Porting A Chrome Extension to Firefox

Recently Mozilla released an Extension Compatibility Tester which allows you to check compatibility of Chrome extensions with Firefox. You simply upload your .crx file and the tool will give you a list of warnings and errors to help you port your extension.

I decided to give this a go for my Chrome extension Furigana Toggle which is an extension to help with Japanese language reading practice.

Checking Compatibility

The first step is checking compatibility using Mozilla's new tool. I logged into my Chrome Developer Dashboard, clicked ‘more info’, downloaded my extension .crx file and then uploaded this to the compatibility tester.

I was presented with great news – my extension was compatible with Firefox!

The report featured details of a couple of warnings. It is really handy having all the file names and line numbers to go with each issue!

{
  "compat": [],
  "errors": [],
  "warnings": [
    {
      "message": ""storage.sync" can cause issues when loaded temporarily",
      "locations": [
        {
          "file": "background.js",
          "line": 3
        },
        {
          "file": "background.js",
          "line": 34
        },
        {
          "file": "content.js",
          "line": 1
        },
        {
          "file": "options.js",
          "line": 13
        },
        {
          "file": "options.js",
          "line": 59
        }
      ]
    },
    {
      "message": ""tabs.getAllInWindow" is deprecated or unimplemented",
      "locations": [
        {
          "file": "background.js",
          "line": 40
        }
      ]
    }
  ]
}

Porting to Firefox

The first thing I thought I would have to deal with was changing all uses of the ‘chrome’ namespace to ‘browser’ which Firefox uses. It turns out this is not necessary though as Firefox supports both the chrome and browser namespaces. Mozilla states that this allows many Chrome extensions to work in Firefox without modification. The difference between the two is that chrome exposes callback-based function interfaces whilst browser is promise-based. I decided if I needed any new code I would just stick with chrome and its callback interfaces so I could keep the code simple whilst keeping it compatible with both Chrome and Firefox.

To test out my extension I loaded it as a temporary add-on. I then turned the add-on on and opened the debug window and tried out my extension. I could see a number of errors, the first of which was:

&dquo;Unchecked lastError value: Error: The storage API will not work with a temporary addon ID. Please add an explicit addon ID to your manifest. For more information see https://bugzil.la/1323228.&dquo;

I added an ID to my manifest file as described in Mozilla's documentation and this seemed to do the trick.

{
  "applications": {
      "gecko": {
        "id": "furiganatoggle@darrenlester.com",
        "strict_min_version": "53.0"
      }
    }
}

I adapted my build process to make sure the ‘applications’ JSON is only included in Firefox builds.

As suggested by the compatibility report, browser.tabs.getAllInWindow is not implemented. Mozilla's documentation suggested I use tabs.query({currentWindow: true}) instead.

// Old
chrome.tabs.getAllInWindow(null, function(tabs) {
  tabs.forEach(function(tab) {
    applyStylesheetToTab(tab.id);
  });
});

// New
chrome.tabs.query({currentWindow: true}, function(tabs) {
  tabs.forEach(function(tab) {
    applyStylesheetToTab(tab.id);
  });
});

After those minor changes my extension now seemed to work perfectly as a Firefox add-on. I was pleasantly surprised by how easy the porting process was.

Submitting the Add-on For Review

Add-ons to be listed on AMO must be submitted for review to ensure they are of good quality, secure and not malicious. It is simple to register as an Add-ons developer and the submission process is very similar as for Chrome with just some basic info to fill out about your add-on such as description, screenshots and icons. After you have submitted you can see what position you are in the review queue and will be alerted by email when your add-on has been reviewed.

Conclusion

With the help of the new Extension Compatibility Tester, porting from Chrome to Firefox was super simple. It took less than an hour to get everything updated and the new Firefox add-on submitted to Mozilla for review!