Make Browser Extensions Great Again... Again

Slides from a talk I gave with Jean-François Grand, at Open R&Days #3, on June 20, 2018.

More info on the event here: http://openrday.oodrive.fr/.

Links found in the slides

Slide 2
https://www.youtube.com/watch?v=BElclOxXz4k

Slide 9
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension

Slide 14
https://developers.giphy.com/docs

Slide 19
https://chrome.google.com/webstore/developer/dashboard
https://addons.mozilla.org/en-US/developers/addons
https://developer.microsoft.com/en-US/dashboard
http://gs.statcounter.com/browser-market-share/desktop/worldwide/#monthly-201805-201805-bar

Slide 21
https://developer.mozilla.org/en-US/Add-ons/WebExtensions
https://github.com/mozilla/webextension-polyfill
https://www.npmjs.com/package/webextension-toolbox
https://docs.microsoft.com/en-us/microsoft-edge/extensions/guides/porting-chrome-extensions
https://github.com/gritchou/take-a-break
https://www.youtube.com/watch?v=BElclOxXz4k

Transcript

1. Make Browser Extensions Great Again… Again Jean-François Grand gritchou gritchou Dhaya Benmessaoud _dhaya_ dhayab
2. Make Browser Extensions Great Again… Again? 2 See https://www.youtube.com/watch?v=BElclOxXz4k
3. Summary 3 1. Browser extensions? 2. Live code Take a Break! 3. Packaging & Deployment
4. Part I 4 1. Browser extensions? 2. Live code Take a Break! 3. Packaging & Deployment
5. What are Browser Extensions? 5
6. What Applications? 6 Security / Privacy Productivity Accessibility
7. 7 Where does it work? Chrome(+ Opera), Firefox, Edge
8. 8 Where does it work? take-a-break.dir Resolving cross-browser compatibility issues
9. 9 Where does it work? take-a-break.dir Resolving cross-browser compatibility issues webextension-toolbox mozilla/ webextension-polyfill
10. 10 Where does it work? take-a-break.dir Resolving cross-browser compatibility issues CRX XPI APPX webextension-toolbox mozilla/ webextension-polyfill
11. Browser Extensions entry point: manifest.json 11 manifest.json Background page (optional) Content scripts Browser action / Page action icons popup Options page Web accessible resources Adapted from https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
12. Part II 12 1. Browser extensions? 2. Live code Take a Break! 3. Packaging & Deployment
13. Live coding - What are we building? 13
14. Live coding - Step 0: Initialization 14 • package.json ◦ install webextension-toolbox dependency • app/manifest.json ◦ mandatory: manifest_version, name, version ◦ optional: description, homepage_url, icons, ... project structure, package.json, manifest.json
15. • app/manifest.json add background script + permission for alarms Live coding - Step 1: Set up alarm 15 background.js
16. Live coding - Step 2: Retrieve GIF from Giphy API 16 background.js, giphy.js • app/background.js • app/lib/giphy.js Giphy documentation: https://developers.giphy.com/docs
17. Live coding - Step 3: Display GIF in current tab 17 content-script.js, content-script.css • app/manifest.json add content script + permission for activeTab
18. Live coding - Step 4: Add options page 18 options.html, options.js, options.css, config.js • app/manifest.json options user interface + permission for storage • app/lib/config.js
19. Part III 19 1. Browser extensions? 2. Live code Take a Break! 3. Packaging & Deployment
20. Packaging & Deployment 20 Creating an unsigned package 1 take-a-break.dir
21. Packaging & Deployment 21 Creating an unsigned package 1 2 take-a-break.zip take-a-break.dir
22. Packaging & Deployment 22 Deploying in browser stores Usage share: 66.93% Developer dashboard: https://chrome.google.com/webstore/developer/dashboard Fee: 5$ (on account creation) Usage share: 11.55% Developer dashboard: https://addons.mozilla.org/en-US/developers/addons Fee: Free Desktop Browser Market Share Worldwide, May 2018 - StatCounter Global Stats http://gs.statcounter.com/browser-market-share/desktop/worldwide/#monthly-201805-201805-bar Usage share: 4.15% Developer dashboard: https://developer.microsoft.com/en-US/dashboard Fee: 19$ for an individual, 99$ for a company (on account creation)
23. The Future of Browser Extensions 23 Roadmap • Accelerate standardization of the W3C preliminary specification • Simplify the development of extensions for all browsers • Improve safety and security of extensions
24. Further reading 24 • Browser Extensions on MDN • Mozilla polyfill to help cross-browser extension development • Toolbox to help scaffolding a cross-browser extension project • Microsoft guide for porting a Chrome extension to Edge • Source code for the take-a-break browser extension • Our first talk on Youtube Make Browser Extensions Great Again
25. QUESTIONS? Notice and acknowledgments All product names, logos, and brands are property of their respective owners. All company, product and service names used in this presentation are for identification purposes only. Icons made by Eucalyp, Freepik, Kiranshastry, Smashicons, Icomoon, Pixel perfect from flaticon.com. Icons made by mikicon from thenounproject.com. Jean-François Grand gritchou Dhaya Benmessaoud _dhaya_