google-chrome-extension Tutorial => Porting through WebExtensions

Example

Before talking about porting Firefox extensions from/to, one should know what WebExtensions is.

WebExtensions - is a platform that represents an API for creating Firefox extensions.

It uses the same architecture of extension as Chromium, as a result, this API is compatible in many ways with API in Google Chrome and Opera (Opera which based on Chromium). In many cases, extensions developed for these browsers will work in Firefox with a few changes or even without them at all.

MDN recommends to use WebExtension for new extensions:

In the future, WebExtensions will be the recommended way to develop Firefox add-ons, and other systems will be deprecated.

In view of the foregoing, if you want to port extensions to Firefox, you have to know, how the extension was written.

Extensions for Firefox can be based on WebExtension, Add-on SDK or XUL.

Compatible extensions based on WebExtension

When using WebExtension, one has to look through the list of incompatibilities, because some functions are supported fully or partially, that is in other words, one should check one’s manifest.json.

It also enables to use the same namespace:

At this time, all APIs are accessible through the chrome.* namespace. When we begin to add our own APIs, we expect to add them to the browser.* namespace. Developers will be able to use feature detection to determine if an API is available in browser.*.

A simple extension that can work in Firefox and Google Chrome

manifest.json:

{
  "manifest_version": 2,
  
  "name": "StackMirror",
  
  "version": "1.0",
  
  "description": "Mirror reflection of StackOverflow sites",
  
  "icons": {
    "48": "icon/myIcon-48.png"
  },
  
  "page_action": {
    "default_icon": "icon/myIcon-48.png"
  },
  
  "background": {
    "scripts"   : ["js/background/script.js"],
    "persistent": false
  },
  
  "permissions": ["tabs", "*://*.stackoverflow.com/*"]
}

background script:

function startScript(tabId, changeInfo, tab) {

    if (tab.url.indexOf("stackoverflow.com") > -1) {

        chrome.tabs.executeScript(tabId, 
            
            {code: 'document.body.style.transform = "scaleX(-1)";'}, function () {

            if (!chrome.runtime.lastError) {

                chrome.pageAction.show(tabId);
            }
        });
    }
}

chrome.tabs.onUpdated.addListener(startScript);

Pack project as standard zip file, but with .xpi extensions.

Then,you have to load the extension in Firefox.

Open the about:addons page, accessible through Menu > Add-ons.

Click on Tools for all add-ons button.

When the extension is loaded the page about:addons will look like this:

Directions on loading the extension in Google Chrome is in other topic - Getting started with Chrome Extensions.

The result of extension operation will be same in both browsers (Firefox/Google Chrome):

If the current add-on is based on Add-on SDK or XUL

When extension being ported is based on Add-on SDK one has to look through the comparison table for Add-on SDK => WebExtensions, because these technologies have similar features, but differ in implementation. Each section of table describes the equivalent of Add-on SDK for WebExtension.

Comparison with the Add-on SDK

A similar approach and for XUL extensions.

Comparison with XUL/XPCOM extensions