Making The Web A Better Place with Chrome Extensions

Why should you, as a Software Engineer/Developer, care about Chrome Extensions? Let's see what they can offer us and some examples of interesting stuff we can do with some of its features!

I gave this presentation while working at Netcentric in one of our regular Frontend Talks. Would you like to join us?

Transcript

1. MAKING THE WEB A BETTER PLACE WITH <CHROME EXTENSIONS/> AUGUST 2016 DANI GÁMEZ
2. CONTENT WHAT ARE EXTENSIONS? WHY SHOULD WE CARE? BUILDING BLOCKS CHROME APIS & EXAMPLES MY EXPERIENCES
3. <GETTING STARTED/> COPYRIGHT © DADBLUNDERS – FLICKR.COM, MODIFIED IMAGE
4. WHAT ARE EXTENSIONS? Extensions are small software programs that can modify and enhance the functionality of the Chrome browser, written in the languages that we all know and love:
5. BECAUSE THIS LOOKS ABSOLUTELY HORRIBLE TO US. WHY SHOULD WE CARE? {"web-app": { "servlet": [ { "servlet-name": "cofaxCDS", "servlet-class": "org.cofax.cds.CDSServlet", "init-param": { "configGlossary:installationAt": "Philadelphia, PA", "configGlossary:adminEmail": "ksm@pobox.com", "configGlossary:poweredBy": "Cofax", "configGlossary:poweredByIcon": "/images/cofax.gif", "configGlossary:staticPath": "/content/static", "templateProcessorClass": "org.cofax.WysiwygTemplate", "templateLoaderClass": "org.cofax.FilesTemplateLoader", "templatePath": "templates", "templateOverridePath": "", "defaultListTemplate": "listTemplate.htm", "defaultFileTemplate": "articleTemplate.htm", …
6. BECAUSE THERE ARE BETTER WAYS TO MEASURE PIXELS FROM THE SCREEN. WHY SHOULD WE CARE? COPYRIGHT © HOMESPOT HQ – FLICKR.COM, MODIFIED IMAGE
7. WHY DO YOU CARE?
8. <BUILDING BLOCKS/> COPYRIGHT © REGAN76 – FLICKR.COM, ORIGINAL IMAGE
9. THE MANIFEST.JSON { // Required "manifest_version": 2, "name": "My Extension", "version": "1.0", // Recommended "description": “Lorem ipsum...", "icons": {...}, // Usually there "permissions": {...}, ... }
10. BROWSER ACTION (+ POPUP)
11. PAGE ACTION (+ POPUP)
12. CONTEXT MENU
13. NOTIFICATIONS SIMPLE Set icon, title and body text. From Web Notification API (only allows text, adding HTML has been deprecated). RICH HTML page inside! From the Chrome Notification API, not yet stable.
14. LOCAL PAGE (TAB) OPTIONS PAGE (TAB)
15. OPTIONS PAGE (POPUP)
16. Shared DOM, but isolated from page original JS and other content scripts JS. Just extension, runtime, storage and i18n APIs. CONTENT SCRIPT (JS & CSS) COPYRIGHT © NATHAN FORGET – FLICKR.COM, MODIFIED IMAGE
17. Persistent and Non-Persistent, which should improve performance (specially on low-power devices). Event page loaded, suspended and unloaded as needed by events. BACKGROUND/EVENT PAGE COPYRIGHT © JUSTIN – FLICKR.COM, MODIFIED IMAGE
18. Allows the use of insecure disabled-by-default features such as eval or loading remote scripts, but has no access to APIs, so it has to communicate with other parts of the extension. SANDBOXED PAGE COPYRIGHT © STEVEN ISAACSON – FLICKR.COM, MODIFIED IMAGE
19. <CHROME APIS/> COPYRIGHT © MATTHEW HURST – FLICKR.COM, MODIFIED IMAGE
20. CHROME APIS Special-purpose APIs that expose additional functionality and features to our extensions, beyond the limits we are all used to while developing normal web pages. A few of them are available just in the Chrome Dev channel. We will pick the Chrome APIs as a reference to check the support offered by other browsers, but… https://developer.chrome.com/extensions/api_index
21. APIS SUPPORT FULLY SUPPORTED: 7 PARTIALLY SUPPORTED: 12 PLANNED: 4 https://developer.mozilla.org/en-us/add- ons/webextensions/chrome_incompatibilities
22. APIS SUPPORT SUPPORTED: 13 UNDER CONSIDERATION: 5 https://developer.microsoft.com/en-us/microsoft- edge/platform/documentation/extensions/api-support/extension- api-roadmap NEWBIE
23. 4PI5 5U220R7 S#*P0%+!_D: |E EDGE.EXE STOPPED WORKING: 0X000000F8 https://msdn.microsoft.com/es- es/library/windows/desktop/bb513641(v=vs.85).aspx
24. <CHROME APIS IN ACTION/> COPYRIGHT © STEVE JOHNSON – FLICKR.COM, MODIFIED IMAGE
25. COPYRIGHT © MARIYA CHORNA – FLICKR.COM, MODIFIED IMAGE GLUE EVERYTHING TOGETHER extension, runtime Overcome the limitation of each building block implementing using message passing.
26. MANAGE BOOKMARKS bookmarks Watch bookmarks to automatically classify them by hostname using your own custom filters. Share project bookmarks with your team? COPYRIGHT © MARIYA CHORNA – FLICKR.COM, MODIFIED IMAGE
27. CLEAN YOUR FINGERTIPS history, cookies, browsingData, downloads Watch history to prevent entries from certain pages, automatically clear cookies and local data… COPYRIGHT © QUINN DOMBROWSKI – FLICKR.COM, MODIFIED IMAGE
28. SCREENSHOTS & RECORDINGS desktopCapture Capture the whole screen, window, tab or audio. COPYRIGHT © ZORAH OLIVIA – FLICKR.COM, MODIFIED IMAGE
29. INTERCEPT REQUESTS webRequest, debugger Block certain request (e.g. Facebook Messenger seen request), modify or analyze them (to access non-public APIs data as an alternative to crawlers). COPYRIGHT © LEE HAYWOOD – FLICKR.COM, MODIFIED IMAGE
30. ACCESIBILITY tts, ttsEngine, automation (dev channel) Play synthesized text-to-speech (TTS), implement your own TTS extension and access accessibility tree (similar to the DOM tree, but only exposes the semantic structure of the page). COPYRIGHT © MARIYA CHORNA – FLICKR.COM, MODIFIED IMAGE
31. STORAGE storage (not localStorage) Type-safe, asynchronous and optionally synced storage! COPYRIGHT © MIKE MOZART – FLICKR.COM, MODIFIED IMAGE
32. <MY EXPERIENCE/> COPYRIGHT © THEILR – FLICKR.COM, MODIFIED IMAGE
33. MY EXTENSIONS Facebook Invites Bomber UNPUBLISHED milanuncios adds auto-renewal PRIVATE Outlook side-add blocker and responsive improvements PRIVATE StackOverflow Steroids PUBLISHED (WILL BE UNPUBLISHED SOON) i18n XML generator MIGRATED TO NODE.JS SCRIPT +2 IN PROGRESS (:
34. TIPS Consider Node.js scripts first & prefer intercepting requests than crawling the page. Don’t re-implement other’s sites. Don’t underestimate user’s pressure & maintenance. Share! Your problems may be someone else’s problems too, and it’s just $5 to register. Take the money if someone offers you! Or monetize it yourself. CRAWLING & GATHERING DATA UX SHARING MAINTENAN -CE MONETIZING
35. TRY THEM AND FEEL THE
36. GITHUB.COM/DANZIGER LINKEDIN.COM/IN/DANIGAMEZFRANCO GMZCODES.COM DANI GÁMEZ