We have a collaborative session

please prepare laptop or smartphone to join!

Who am I?

• Yukai Huang
• Full Stack Developer @HackMD
• VSCode
• I use tabs.

What's HackMD?

Shamelss plug here

Let's play with it!

hackmd.io/ts-swiss-demo

70% of our users are developers. Developers GitHub.

Usage flow

Extension architecture

Background script

• Run after the extension start
• Long run action, web request, heavy works, …
• Kinda backend

Content script

• Bind with each page
• Manipulate DOM
• Add event listeners
• Isolated JavaScript environment
  • It doesn't break things

Injected script

• Injected with content script
• Accessing global variable
• Call global function
• Acts as JavaScript inserted with HTML script tag <script>

3 environments

cross-environment communication

Case: Sync HackMD with GitHub

• We can't send message between two injected scripts
• We need to manage flow by ourself
• Different set of API
  • content <-> background
  • content <-> injected

• onMessage('event'): Register event listener
• sendMessage('event'): Trigger event

Register event listener

Trigger event

What if we want the result back?

It's a pain to bridge events manually

• Dead simple API
• Only cares about application logic

import * as Channeru from 'channeru'

// setup channel in different page environment, once
const channel = Channeru.create()

// in background script
const fakeLogin = async () => true

channel.answer('isLogin', async () => {
  return await fakeLogin()
})

// in inject script
const isLogin = await channel.callBackground('isLogin')
console.log(isLogin) //-> true

Our extension is not open sourced for now

Use crx-bridge as alternative

https://github.com/NeekSandhu/crx-bridge

We typescript!

• Strongly Typed: Manage different protocol with ease
• IDE Features (I VSCode)

One more thing

HackDF

HackDF keeps Documentation Fresh

(recursive acronym)

hackmd.io/hackdf

• an GitHub App
• Integrate GitHub With HackMD
• Remind you when should update documentation
• Commit and push documentation changes right on HackMD

Wrap up

• Cross envornment commnication
• A small library to solve messaging pain
• TypeScript Rocks

Wishlist

Thank you!

You can find me on

• GitHub (@Yukaii)
• Twitter (@yukaii_h)
• or send an email to yukai@hackmd.io