# 論文題目! #### 作者:蔡可凡 #### 指導教授:黃文禎 ---- # 展示影片 https://www.youtube.com/watch?v=KDtWrTh2vE8 {%youtube KDtWrTh2vE8%} --- # 摘要 #### 一.線上直播 #### 二.web2.0 #### 三.youtube ---- # 摘要二 #### 一.線上串流直播 #### 二.捐獻與訂閱 #### 三.直播平台 #### 四.線上遊戲 --- ## 文獻探討 #### 一.心流 #### 二.沉浸式體驗 #### 三.情感依戀 ---- ## 文獻探討二 #### 自我辨識 #### 上網焦慮 --- - Front-end developer - VSCode :heart: - I use tabs. :cat: ---- ### 70% of our users are developers. Developers :heart: GitHub. --- {%youtube E8Nj7RwXf0s %} --- ### Usage flow --- ```graphviz digraph { compound=true rankdir=RL graph [ fontname="Source Sans Pro", fontsize=20 ]; node [ fontname="Source Sans Pro", fontsize=18]; edge [ fontname="Source Sans Pro", fontsize=12 ]; subgraph core { c [label="Hackmd-it \ncore"] [shape=box] } c -> sync [ltail=session lhead=session] subgraph cluster1 { concentrate=true a [label="Text source\nGithub, Gitlab, ..."] [shape=box] b [label="HackMD Editor"] [shape=box] sync [label="sync" shape=plaintext ] b -> sync [dir="both"] sync -> a [dir="both"] label="An edit session" } } ``` --- ### Architecture of extension ---  --- ## Content script - Bind with each page - Manipulate DOM - Add event listeners - Isolated JavaScript environment - It doesn't break things --- # :fork_and_knife: --- <style> code.blue { color: #337AB7 !important; } code.orange { color: #F7A004 !important; } </style> - <code class="orange">onMessage('event')</code>: Register event listener - <code class="blue">sendMessage('event')</code>: Trigger event --- # :bulb: --- - Dead simple API - Only cares about application logic --- ```typescript import * as Channeru from 'channeru' // setup channel in different page environment, once const channel = Channeru.create() ``` --- ```typescript // in background script const fakeLogin = async () => true channel.answer('isLogin', async () => { return await fakeLogin() }) ``` <br> ```typescript // in inject script const isLogin = await channel.callBackground('isLogin') console.log(isLogin) //-> true ``` --- # :100: :muscle: :tada: --- ### Wrap up - Cross envornment commnication - A small library to solve messaging pain - TypeScript Rocks :tada: --- ### Thank you! :sheep: You can find me on - GitHub - Twitter - or email me