Building a Workable Chrome Extension in React & Redux

In this talk, we demonstrate a message passing paradigm between the different building blocks of a Chrome Extension (i.e. content scripts and background script) based on Redux principles and accessories. Furthermore, we achieve content script encapsulation by leveraging React componentization and Shadow DOM.

Project companion: https://github.com/Workable/devit2016

Transcript

1. Building a Workable Chrome Extension in React & Redux Devit Conference • May 2016
2. We are... Sokratis Vidros Senior Software Engineer @ Workable sokratisvidros Nikos Kostoulas Senior Software Engineer @ Workable nkostoulas
3. Chrome Extensions
4. Chrome Extensions
5. Chrome Extensions Building blocks
6. Background page
7. Content script
8. Popup
9. Options
10. Background and content script are separate JS runtimes
11. • Simple one-time requests • Long-lived connections Message passing Background script Content script
12. Spoiled™ Chrome Extension https://github.com/Workable/devit2016
13. 1. Select a GoT character name in narratives 2. View their spoiler on the side Scenario
14. Demo
15. Let’s Dev it!
16. Background page • Fetch spoiler from server • Memoize last spoiler Responsibilities Content script • Interact with page DOM • Display the spoiler on the side
17. 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
18. We would also like to... • Render data efficiently • Achieve content script isolation • Facilitate message passing • Add memory
19. Can we use React/Redux?
20. React/Redux View Action Middleware Reducers Store
21. { tab, foreground: true, type: ... } Content script Background script Architecture View Action Middleware Reducers Store Action Middleware Reducers Store { payload: … } { background: true, type: ... }
22. Toolbelt + Redux Redux notify React Redux thunk Redux Chrome Gofer
23. Show us the code!
24. 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
25. 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
26. 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
27. 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
28. • 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
30. ✓ 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