How to create 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, the 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 the 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. If provided then the promo tile is shown like this in the search result :

---

I hope this post will help you create one extension that you can upload to all the extension stores with at least 99% same code.

Have questions? Ask them below or subscribe to get notified for more browser extension related tips.

---

Cover photo credits

• Photo by Chris Liverani on Unsplash
• Image by Gerd Altmann from Pixabay