---
title: Talk slides template
tags: Templates, Talk
description: View the slide with "Slide Mode".
---

# Unleash the power!

<!-- Put the link to this slide here so people can follow -->
slide: https://hackmd.io/p/template-Talk-slide

---

We have a collaborative session

please prepare laptop or smartphone to join!

---

## 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

---

digraph "toto" 
{
    // graph[ "rankdir" = "TB" ]
    
    // nodes
    node[ shape = box ];
    BROUILLON[ label= "Brouillon", margin = "0.4,0.0" ];
    A_VALIDER_RH[ label = "À valider par la RH", margin = "0.4,0.0", color = red ];
    node[ shape = plaintext ];
    n1[ label = "Soumettre" ];
    n2[ label = "Refuser" ];

    // edges
    BROUILLON -> n1 ->  A_VALIDER_RH;
    A_VALIDER_RH -> n2 -> BROUILLON;
}

---

### Architecture of extension

---

![](https://i.imgur.com/ij69tPh.png)

---

## 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

---

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()
})

<br>

// 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