concentrate=true a [label="Text source\nGithub, Gitlab, ..."] [shape=box] b -> sync [dir="both"] b [label="HackMD Editor"] [shape=box] c [label="Hackmd-it \ncore"] [shape=box] label="An edit session" sync -> a [dir="both"] sync [label="sync" shape=plaintext ] - It doesn't break things c -> sync [ltail=session lhead=session] color: #337AB7 !important; color: #F7A004 !important; compound=true edge [ fontname="Source Sans Pro", fontsize=12 ]; graph [ fontname="Source Sans Pro", fontsize=20 ]; node [ fontname="Source Sans Pro", fontsize=18]; rankdir=RL return await fakeLogin() subgraph cluster1 { subgraph core { } }  # :100: :muscle: :tada: # :bulb: # :fork_and_knife: # 傳揚系統說明會 ## Content script ## 流程 ## 系統管理員 ## 總經理 ### Architecture of extension ### Thank you! :sheep: ### Usage flow ### Wrap up - <code class="blue">sendMessage('event')</code>: Trigger event - <code class="orange">onMessage('event')</code>: Register event listener - A small library to solve messaging pain - Add event listeners - Bind with each page - Cross envornment commnication - Dead simple API - GitHub - Isolated JavaScript environment - Manipulate DOM - Only cares about application logic - Twitter - TypeScript Rocks :tada: - or email me - ph --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- // in background script // in inject script // setup channel in different page environment, once <!-- Put the link to this slide here so people can follow --> </style> <br> <style> You can find me on ``` ``` ``` ``` ```graphviz ```typescript ```typescript ```typescript channel.answer('isLogin', async () => { code.blue { code.orange { console.log(isLogin) //-> true const channel = Channeru.create() const fakeLogin = async () => true const isLogin = await channel.callBackground('isLogin') description: 測試說明會簡報 digraph { import * as Channeru from 'channeru' title: Trendyoung 測試說明會 } } } }) 接下來會以 **財務、業務、專案執行** 的角度進行演