WebExtensions

Martin Giger

@freaktechnik

manifest.json

• Extension metadata
• Permissions
• Static content
  • CSP
  • Content scripts
  • UI features
  • web-acessible resources

manifest.json

{
    "manifest_version": 2,
    "name": "Hello World",
    "version": "1.0.0",
    "description": "Not sure yet, but will be useful.",
    "icons": {
        "48": "icons/icon-48.png"
    },
    "content_scripts": [
        {
            "matches": ["*://*.example.com/*"],
            "js": ["content.js"]
        }
    ],
    "applications": {
        "gecko": {
            "id": "borderify@example.com",
            "strict_min_version": "48.0"
        }
    },
    "options_ui": {
        "page": "settings.html"
    },
    "permissions": [
        "cookies",
        "activeTab"
    ]
}

about:debugging

• Load unsigned extensions
  • Raw extension folder
  • Packaged
• Debug running extension's background page
• Can reload local extensions when they change

web-ext

• Command-line tool
• Signing
• Installing temporarily
• Linting

APIs

Webpage

• All the DOM APIs

  • Except for alert()

• Special globals for extension specific things
• Background page just for the extension
• Content-scripts get a subset of APIs

chrome Namespace

browseR NAmespace

• Promisified APIs
• Firefox-specific API expansions

Events

browser.api.onEvent.addListener((...eventDetails) => {
    // handle event
}, {
    // filter options
    url: [ "https://example.com" ]
});

Messaging

// Send a message and listen for a reply
browser.runtime.sendMessage("WebExtensions are ok.", (response) => {
    console.log(response);
});

// Somewhere else:
const listener = (message, sender, reply) => {
    if(message == "WebExtensions are ok.") {
        reply("WebExtensions rock!");
    }
};

browser.runtime.onMessage.addListener(listener);

console.log(browser.runtime.onMessage.hasListener(listener));

// Console
true
"WebExtensions rock!"

Callbacks

const callback = (result) => {
    if (browser.extension.lastError) {
        console.error(browser.extension.lastError);
    } else {
        console.log(result);
    }
};

browser.cookies.set({
    url: "https://developer.mozilla.org/"
}, logCookie);

// or thanks to promises

browser.cookies.set({
    url: "https://developer.mozilla.org/"
}).then((result) => {
    console.log(result);
}, (error) => {
    console.error(error);
});

Potential APIs

• logins

• webRTC controls

• proxy

• devtool APIs
• API experiments

Embedded WebExtensions

Extension

WebExtension

Old Extension

Cross Browser Standard

Discussion

Image sources

• https://github.com/mozillach/mozillach_branding/blob/master/pictures/raw/mozillach_wordmark-presentation.jpg
• https://commons.wikimedia.org/wiki/File:Lederle_laboratory.jpg
• https://en.wikipedia.org/wiki/File:TeamTimeCar.com-BTTF_DeLorean_Time_Machine-OtoGodfrey.com-JMortonPhoto.com-07.jpg
• https://commons.wikimedia.org/wiki/File:Package_with_ShockDot.png