Cross-Browser
Browser Extensions

Extension

(ĭk-stĕnˈshən), noun. A bundle of code and data that modifies or augments the functionality of a piece of software.

Extensions 🆚 Plugins

Extensions 🆚 Add-ons

Extensions ⊂ Add-ons

Extensions ⊂ Add-ons

⬆️
read a math once

A Brief Hiſtory of Extenſions

Internet Explorer

Version 5, 1999

Firefox

Version 1, 2004

Opera

Version 10, 2009

Chrome

Version 4, 2010

Safari

Version 5, 2010

XUL
X XML U UI L Language

Browser

EXTENSION

EXTENSION

EXTENSION

PHENOMENAL COSMIC POWERS

whether you want them or not

Add-ons SDK

2010

An API Surface!

Cu.import()

Cu.import()

Meanwhile…

Chrome Extensions

Permissions!

So…

AUG
21
2015

The Future of Developing Firefox Add-ons

We are implementing a new extension API, called WebExtensions—largely compatible with the model used by Chrome and Opera—to make it easier to develop extensions across multiple browsers.

September 2016

Browser Extension Community Group

Problem: There is no cross browser standard for building browser extensions, which requires developers to create extensions for each browser individually. Proposal/Mission: The Browser Extension group will attempt to standardize extension package structure, API, portability etc., across browsers.

and then they were like…

March 17, 2016 4:02 pm

Microsoft Edge extensions now available to preview

By Microsoft Edge Team

The Present Day

{
  "manifest_version": 2,
  "name": "David Blaine's Cool Extension",
  "version": "1.0",
  "description": "Literally MAGIC",
  "icons": {
    "48": "/icon.svg"
  }
}
const { tabs, browserAction } = browser.browserAction;

browserAction.onClicked.addListener(async function() {
  let tab = await tabs.create({
    url:"https://example.org"
  });

  let heading = await tabs.executeScript(tab.id, {
    code: `document.querySelector('h1').textContent;`
  });
});

Pages 🆚 Workers

"background": {
  "scripts": ["polyfill.js", "my-background.js"]
}

// or... "background": { "page": "my-background.html" }
<html>
  <head>
    <script src="polyfill.js"></script>
    <script src="my-background.js"></script>
  </head>
</html>
<div class="something useful"></div>
<script src="polyfill.js"></script>
<script src="dom-library.js"></script>
<script type="module" src="my-background.js"></script>
Background Script content script devtools.panel browserAction
alarms bookmarks browserAction browserSettings browsingData clipboard commands contentScripts contextualIdentities cookies devtools.inspectedWindow devtools.network devtools.panels dns downloads events extension extensionTypes find history i18n identity idle management menus notifications omnibox pageAction permissions pkcs11 privacy proxy runtime search sessions sidebarAction storage tabs theme topSites types webNavigation webRequest windows
a lot

Feature Detection!!

no wait please don't leave

Browser Extensions

chrome.* browser.* browser.*
(Promises)

mozilla/webextension-polyfill

browser.*
(Promises)
SOON

Thanks!

@potch Mozilla Hacks Blog potch.github.io/cross-browser-extensions

Safari

Version 5, 2010

// Safari
safari.self.browserWindow.openTab();

// Elsewhere
browser.tabs.create();

So!

Build!

npm i -g web-ext

Port!

extensiontest.com

extensiontest.com

➡️

Kvetch!

@potch

Thanks!

Browser Extensions on MDN @potch Mozilla Hacks Blog

potch.github.io/cross-browser-extensions