# [GerBI & ΔTissue](https://hackmd.io/@GerBI/HJOZEn1zc) --- ```plantuml @startuml skinparam rectangle { roundCorner 25 backgroundcolor white } rectangle "TNBC" as tnbc rectangle "Researcher #1" as r1 rectangle "Researcher #2" as r2 rectangle "Publication A" as pubA rectangle "Publication B" as pubB rectangle "Publication C" as pubC rectangle "Publication D" as pubD rectangle "Results i." as res1 rectangle "Results ii." as res2 rectangle "Results iii." as res3 rectangle "Results iv." as res4 rectangle "Results v." as res5 rectangle "Results vi." as res6 rectangle "Results vii." as res7 rectangle "Results viii." as res8 tnbc -- r1 tnbc -- r2 r1 -- pubA r1 -- pubB r2 -- pubC r2 -- pubD pubA -- res1 pubA -- res2 pubB -- res3 pubB -- res4 pubC -- res5 pubC -- res6 pubD -- res7 pubD -- res8 @enduml ``` --- ## Who am I? - 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