Making The Web A Better Place with Chrome Extensions

Slide 1

Slide 1 text

MAKING THE WEB A BETTER PLACE WITH AUGUST 2016 DANI GÁMEZ

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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:

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Slide 7

Slide 7 text

WHY DO YOU CARE?

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

BROWSER ACTION (+ POPUP)

Slide 11

Slide 11 text

PAGE ACTION (+ POPUP)

Slide 12

Slide 12 text

CONTEXT MENU

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

LOCAL PAGE (TAB) OPTIONS PAGE (TAB)

Slide 15

Slide 15 text

OPTIONS PAGE (POPUP)

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

APIS SUPPORT SUPPORTED: 13 UNDER CONSIDERATION: 5 https://developer.microsoft.com/en-us/microsoft- edge/platform/documentation/extensions/api-support/extension- api-roadmap NEWBIE

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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