Unleash the power!

slide: https://hackmd.io/p/template-Talk-slide adasdas

---

We have a collaborative session

please prepare laptop or smartphone to join!

---

Who am I?

• Front-end developer
• VSCode
• I use tabs.

---

70% of our users are developers. Developers GitHub.

---

---

Usage flow

---

---

Architecture of extension

---

---

Content script

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

---

---

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

---

---

• 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

---

---

Wrap up

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

---

Thank you!

You can find me on

• GitHub
• Twitter
• or email me