Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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?

Dani Gámez Franco

August 30, 2016
Tweet

More Decks by Dani Gámez Franco

Other Decks in Programming

Transcript

  1. 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:
  2. 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": "[email protected]", "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", …
  3. BECAUSE THERE ARE BETTER WAYS TO MEASURE PIXELS FROM THE

    SCREEN. WHY SHOULD WE CARE? COPYRIGHT © HOMESPOT HQ – FLICKR.COM, MODIFIED IMAGE
  4. THE MANIFEST.JSON { // Required "manifest_version": 2, "name": "My Extension",

    "version": "1.0", // Recommended "description": “Lorem ipsum...", "icons": {...}, // Usually there "permissions": {...}, ... }
  5. 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.
  6. 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
  7. 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
  8. 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
  9. 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
  10. APIS SUPPORT FULLY SUPPORTED: 7 PARTIALLY SUPPORTED: 12 PLANNED: 4

    https://developer.mozilla.org/en-us/add- ons/webextensions/chrome_incompatibilities
  11. COPYRIGHT © MARIYA CHORNA – FLICKR.COM, MODIFIED IMAGE GLUE EVERYTHING

    TOGETHER extension, runtime Overcome the limitation of each building block implementing using message passing.
  12. 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
  13. 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
  14. SCREENSHOTS & RECORDINGS desktopCapture Capture the whole screen, window, tab

    or audio. COPYRIGHT © ZORAH OLIVIA – FLICKR.COM, MODIFIED IMAGE
  15. 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
  16. 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
  17. 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 (:
  18. 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