Making The Web A Better Place with Chrome Extensions

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?

Ff1de7f1a325c8005379a310949f7f23?s=128

Dani Gámez Franco

August 30, 2016
Tweet

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