Chrome Extensions

Extending the web one line of Javascript at a time

Chrome Web Store

Where does it start?

Javascript

A real world example

Live demo! Nothing can possibly go wrong!

It works!

Why not just use Javascript?

(if the demo gods allowed it)

Javascript is cool and all but....

Chrome Extensions!

Extensions are small software programs that can modify and enhance the functionality of the Chrome browser. You write them using web technologies such as HTML, JavaScript, and CSS

Little / No Interface

What's in an extension?

  • A manifest file
  • One or more HTML files (unless the extension is a theme)
  • Optional: One or more JavaScript files
  • Optional: Any other files your extension needs—for example, image files

Development: just put them in a folder

Distribution: zip them up with .crx extension

Manifest

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": { "128": "icon_128.png" },
  "background": {
    "persistent": false,
    "scripts": ["bg.js"]
  },
  "permissions": ["http://*.google.com/", "https://*.google.com/"],
  "browser_action": {
    "default_title": "",
    "default_icon": "icon_19.png",
    "default_popup": "popup.html"
  }
}

Architecture (part 1)

  • #1: Background pages
    • Invisible page that holds main logic of extension
    • 2 types:

Architecture (part 2)

  • #2 UI pages
    • HTML pages that display the extension's UI
    • Pages have complete access to each other's DOMs => can invoke functions on each other

Example Scenario:

  • Popup's contents: HTML file (popup.html)
  • Background page (background.html)
  • Popup can invoke functions on the background page.

Architecture (part 3)

  • #3 Content Scripts
    • Executes in a special environment a.k.a. an isolated world
      • can read & modify DOM of displayed page
      • cannot access Javascript variables/functions
  • Cannot modify DOM of parent extension's background page
    • Can exchange messages w/ parent extension
      • Content script / Background page can send message

Samples!

Demos

01 popup

A simple popup

02 popup

We got a bug!

Debugging

02 popup

CSP?

Content Security Policy (CSP)

  • CSP works as a black/whitelisting mechanism
  • Default Policy Restrictions:
    • Eval and related functions are disabled
    • Inline JavaScript will not be executed
      • More on next page
    • Only local script and and object resources are loaded
      • Download libraries and include in your extension

Content Security Policy (CSP)

// popup.js

function main(){ console.log("Main"); };
function clickHandler(){ console.log("You are awesome"); };

document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('button').addEventListener('click', clickHandler);
  main();
});
<!-- popup.html - CSP problems -->
  <script>
    function main(){ console.log("Main"); };
    function clickHandler(){ console.log("You are awesome"); };
  </script>
  <body onload="main();">
    <button onclick="clickHandler(this)">Click for awesomeness!</button>
  </body>
<!-- popup.html - Fixed for CSP -->
  <script src="popup.js"></script>
  <body>
    <button>Click for awesomeness!</button>
  </body>

03 popup

Solved for CSP!

04 popup

No state

05 popup

State with persistent background pages

Communication between pages

  • All extension pages execute in same process on the same thread => can make direct function calls to each other
  • Find appropriate pages: use chrome.extension methods

07 popup

More communications

chrome.* APIs

  • Chrome only functions
    • e.g. tabs.create can be used instead of window.open() so you can specify which window to open it in
  • Many asynchronous => deal w/ them using callbacks
    • chrome.tabs.create(object createProperties, function callback)
  • Example synchronous calls
    • string chrome.runtime.getURL()

07 popup

Semi-State with event pages

Saving data

  • Storage API
  • HTML5 web storage API (e.g. localStorage)
  • The cloud via server requests
  • Incognito Mode
    • Promises that the window will leave no tracks
    • Do best to honor this promise
function saveTabData(tab, data) {
  if (tab.incognito) {
    chrome.runtime.getBackgroundPage(function(bgPage) {
      bgPage[tab.url] = data;      // Persist data ONLY in memory
    });
  } else {
    localStorage[tab.url] = data;  // OK to store data
  }
}

Architecture (part 3)

  • #3 Content Scripts
    • Executes in a special environment a.k.a. an isolated world
      • can read & modify DOM of displayed page
      • cannot access Javascript variables/functions
  • Cannot modify DOM of parent extension's background page
    • Can exchange messages w/ parent extension
      • Content script / Background page can send message

Demos

08 content script

Not working?

09 content script

Include your scripts

10 content script / bt

Auto inject content

Q & A

Chrome Extensions - extending the web one line of Javascript at a time

By Timothy Lim

Chrome Extensions - extending the web one line of Javascript at a time

  • 2,909