DEV Community

Cover image for How to create true cross-browser extensions?

Posted on • Originally published at


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 ||;

Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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://");
Enter fullscreen mode Exit fullscreen mode

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

- 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)
Enter fullscreen mode Exit fullscreen mode

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 :

Chrome Small promo tile

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

Top comments (0)

The AI Brief

AI generated git commit messages

Minimize the struggle of remembering what you just coded. AI-generated commits make it easier to manage projects and keep track of changes. The Nutlope/aicommits project demonstrates how AI can improve commit messages.

I open sourced an AI that creates any UI in seconds

Make AI-generated user interfaces a breeze. This open-source project harnesses the power of generative AI technologies like chatGPT to create versatile, quick, and intuitive UI components.

Use AI to commit like a PRO in 1 second

Upgrade your commit message game with AI. Boost your productivity by using ChatGPT to generate commit messages and avoid context switching. OpenCommit is an open-source library that helps you achieve this easily.

Build your own ChatGPT starter kit

Train AI models on custom data for improved domain-specific knowledge. Combine the power of WebView technologies and this starter kit to train your ChatGPT model on specific websites, allowing for better-optimized outcomes.