A Guide to Creating True Cross-Browser Extensions

by linkish.io2mFebruary 22nd, 2021

Too Long; Didn't Read

Using the browser namespace will work for both Chrome extension and Firefox add-on extensions. Using the same name as the extension's manifest.json file, stick to 50 characters with the extension name. There are three types of graphics required in your extension, namely logo/icon, screenshots, and promo tiles. The next week we will discuss browser-specific logic and requirements that we will also discuss next week. We hope this post will help you create one extension that you can upload to all the extension stores.

Company Mentioned

featured image - A Guide to Creating True Cross-Browser Extensions

How to name your extension?

Firefox has a limit of 50 characters on the add-on title but Chrome allows a bit more than that. To be able to use the same manifest.json file, stick to 50 characters with the name.

If you are not an established brand then no one is going to find you just by your product name. Focus on your Unique Selling Proposition (USP) and the keywords for which you want to rank in the Web store and use them in your extension name.

For example, we use "Bookmark manager, URL Shortener, Text highlighter" keywords in our Chrome extension and Firefox add-on title instead of linkish because mostly the potential users are looking for a feature and not a product

How to use the same namespace everywhere?

Since there are no common standards, browsers are using multiple instances like

chrome

and

browser

of the same object. The easiest way to set up that is by adding this snippet on top of your background and content-script files.

window.browser = (function () {
    return window.msBrowser || window.browser || window.chrome;
})();

This will ensure that the entire extension can be ported from Chrome to Firefox without checking each file for possible errors. We will now use the browser namespace which will work for both Chrome extension and Firefox add-on

❌ Avoid this

var sending = chrome.runtime.sendMessage()

✔️ Do this

var sending = browser.runtime.sendMessage()

How to find your current browser's environment?

Since both Firefox and Chrome support

chrome

and

browser

, we can not use them to determine that, but as each extension has its own page in the browser, it has its own unique URL as well which can be accessed like:

const extURL = browser.runtime.getURL("");
const isFirefox = extURL.startsWith("moz-extension://");
const isChrome = extURL.startsWith("chrome-extension://");

These can be used to keep browser-specific logic and requirements that we will discuss next week.

What graphics do I need for my extension?

There are three types of graphics required in your extension, namely logo/icon, screenshots, and promo tiles. Here are the specific requirements for those graphics:

Logo / Icon
- 16x16 : Suggested by Chrome
- 48x48 : Required by Firefox and Suggested by Chrome
- 96x96 : Suggested by Firefox
- 128x128 : Required by Chrome

Screenshots
- Up to a maximum of 5 (at least one is required )
- 1280x800 or 640x400
- JPEG or PNG (no alpha)

Promo tiles ( only for Chrome )
- Small promo tile : 440x280 Canvas, JPEG or PNG (no alpha)
- Large promo tile : 920x680 Canvas, JPEG or PNG (no alpha)
- Marquee promo tile : 1400x560 Canvas, JPEG or PNG (no alpha)

Small promo tile, although optional, is very important for a Chrome extension as in its absence, your icon will be shown in the Chrome search results which alone does not look trustworthy.

I hope this post will help you create one extension that you can upload to all the extension stores sometime soon.

Cover photo credits
Photo by Chris Liverani on Unsplash
Image by Gerd Altmann from Pixabay