Building a Workable Chrome Extension in React & Redux

Slide 1

Slide 1 text

Building a Workable Chrome Extension in React & Redux Devit Conference • May 2016

Slide 2

Slide 2 text

We are... Sokratis Vidros Senior Software Engineer @ Workable sokratisvidros Nikos Kostoulas Senior Software Engineer @ Workable nkostoulas

Slide 3

Slide 3 text

Chrome Extensions

Slide 4

Slide 4 text

Chrome Extensions

Slide 5

Slide 5 text

Chrome Extensions Building blocks

Slide 6

Slide 6 text

Background page

Slide 7

Slide 7 text

Content script

Slide 8

Slide 8 text

Popup

Slide 9

Slide 9 text

Options

Slide 10

Slide 10 text

Background and content script are separate JS runtimes

Slide 11

Slide 11 text

● Simple one-time requests ● Long-lived connections Message passing Background script Content script

Slide 12

Slide 12 text

Spoiled™ Chrome Extension https://github.com/Workable/devit2016

Slide 13

Slide 13 text

1. Select a GoT character name in narratives 2. View their spoiler on the side Scenario

Slide 14

Slide 14 text

Demo

Slide 15

Slide 15 text

Let’s Dev it!

Slide 16

Slide 16 text

Background page ● Fetch spoiler from server ● Memoize last spoiler Responsibilities Content script ● Interact with page DOM ● Display the spoiler on the side

Slide 17

Slide 17 text

Background page Flow Content script 1. Select name in text 2. Send it to the background 6.Render the spoiler 5. Pass it to the content script 3. Receive the selected name 4. Fetch spoiler from server

Slide 18

Slide 18 text

We would also like to... ● Render data efficiently ● Achieve content script isolation ● Facilitate message passing ● Add memory

Slide 19

Slide 19 text

Can we use React/Redux?

Slide 20

Slide 20 text

React/Redux View Action Middleware Reducers Store

Slide 21

Slide 21 text

{ tab, foreground: true, type: ... } Content script Background script Architecture View Action Middleware Reducers Store Action Middleware Reducers Store { payload: … } { background: true, type: ... }

Slide 22

Slide 22 text

Toolbelt + Redux Redux notify React Redux thunk Redux Chrome Gofer

Slide 23

Slide 23 text

Show us the code!

Slide 24

Slide 24 text

Step 1: Scaffolding ● Add manifest.json ● Add the background Redux Stack ● Add the content script React/Redux Stack ● Set-up reduxChromeGofer middleware > git checkout step1

Slide 25

Slide 25 text

Step 2: Content script encapsulation ● Leverage React componentization ○ Root container component ○ Spoiler presentational component ● Enclose root component in a shadow root ○ Style encapsulation and isolation > git checkout step2

Slide 26

Slide 26 text

Step 3: Request spoiler Background Script Content Script { background: true, type: “REQUEST_SPOILER”, name: ... } ● Transfer action from content to background ● Execute ajax request from the background ○ No same-origin policy limitations > git checkout step3 GET /spoilers.json?c=eddard Select name

Slide 27

Slide 27 text

Content Script Background Script Step 4: Receive spoiler dispatch(receiveSpoiler()) { foreground: true, tab, type: “RECEIVE_SPOILER”, spoiler: ... } ● Dispatch receive action upon retrieval ● Pass the spoiler to content script > git checkout step4

Slide 28

Slide 28 text

● Listen to background script state changes ● Push background state to every content script Step 5: Sync state Background Script Content Script Content Script Content Script > git checkout step5

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

✓ Back end engineers ✓ Front end engineers ✓ Machine learning engineers ✓ Data scientists ✓ DevOps ✓ UI / UX designers We’re constantly looking for: Apply at careers.workable.com