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
   EXTENSIONS/>
   AUGUST 2016
   DANI GÁMEZ
   

   View Slide

2. CONTENT
   WHAT ARE EXTENSIONS?
   WHY SHOULD WE CARE?
   BUILDING BLOCKS
   CHROME APIS & EXAMPLES
   MY EXPERIENCES
   

   View Slide

3. STARTED/>
   COPYRIGHT © DADBLUNDERS – FLICKR.COM, MODIFIED IMAGE
   

   View Slide

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:
   

   View Slide

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", …
   

   View Slide

6. BECAUSE THERE ARE BETTER WAYS TO
   MEASURE PIXELS FROM THE SCREEN.
   WHY SHOULD WE CARE?
   COPYRIGHT © HOMESPOT HQ – FLICKR.COM, MODIFIED IMAGE
   

   View Slide

7. WHY DO
   YOU
   CARE?
   

   View Slide

8. BLOCKS/>
   COPYRIGHT © REGAN76 – FLICKR.COM, ORIGINAL IMAGE
   

   View Slide

9. THE MANIFEST.JSON
   {
   // Required
   "manifest_version": 2,
   "name": "My Extension",
   "version": "1.0",
   // Recommended
   "description": “Lorem ipsum...",
   "icons": {...},
   // Usually there
   "permissions": {...},
   ...
   }
   

   View Slide

10. BROWSER ACTION (+ POPUP)
    

    View Slide

11. PAGE ACTION (+ POPUP)
    

    View Slide

12. CONTEXT MENU
    

    View Slide

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.
    

    View Slide

14. LOCAL PAGE (TAB)
    OPTIONS PAGE (TAB)
    

    View Slide

15. OPTIONS PAGE (POPUP)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

19. APIS/>
    COPYRIGHT © MATTHEW HURST – FLICKR.COM, MODIFIED IMAGE
    

    View Slide

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
    

    View Slide

21. APIS SUPPORT
    FULLY SUPPORTED: 7
    PARTIALLY SUPPORTED: 12
    PLANNED: 4
    https://developer.mozilla.org/en-us/add-
    ons/webextensions/chrome_incompatibilities
    

    View Slide

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
    

    View Slide

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
    

    View Slide

24. IN ACTION/>
    COPYRIGHT © STEVE JOHNSON – FLICKR.COM, MODIFIED IMAGE
    

    View Slide

25. COPYRIGHT © MARIYA CHORNA – FLICKR.COM, MODIFIED IMAGE
    GLUE EVERYTHING TOGETHER
    extension, runtime
    Overcome the limitation of each building block implementing using
    message passing.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

28. SCREENSHOTS & RECORDINGS
    desktopCapture
    Capture the whole screen, window, tab or audio.
    COPYRIGHT © ZORAH OLIVIA – FLICKR.COM, MODIFIED IMAGE
    

    View Slide

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
    

    View Slide

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
    

    View Slide

31. STORAGE
    storage (not localStorage)
    Type-safe, asynchronous and optionally synced storage!
    COPYRIGHT © MIKE MOZART – FLICKR.COM, MODIFIED IMAGE
    

    View Slide

32. EXPERIENCE/>
    COPYRIGHT © THEILR – FLICKR.COM, MODIFIED IMAGE
    

    View Slide

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 (:
    

    View Slide

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
    

    View Slide

35. TRY
    THEM AND FEEL THE
    

    View Slide

36. GITHUB.COM/DANZIGER
    LINKEDIN.COM/IN/DANIGAMEZFRANCO
    GMZCODES.COM
    DANI GÁMEZ
    

    View Slide