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 and title instead of because mostly the potential users are looking for a feature and not a product Chrome extension Firefox add-on linkish How to use the same namespace everywhere? Since there are no common standards, browsers are using multiple instances like and 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. chrome browser 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 namespace which will work for both Chrome extension and Firefox add-on browser ❌ 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 and , 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: chrome browser 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: - 16x16 : Suggested by Chrome - 48x48 : Required by Firefox and Suggested by Chrome - 96x96 : Suggested by Firefox - 128x128 : Required by Chrome Logo / Icon - Up to a maximum of 5 (at least one is required ) - 1280x800 or 640x400 - JPEG or PNG (no alpha) Screenshots - 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) Promo tiles ( only for Chrome ) 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. Photo by on Image by from Cover photo credits Chris Liverani Unsplash Gerd Altmann Pixabay

A Guide to Creating True Cross-Browser Extensions

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Useful Tips & Tricks That Will Help You Make the Most of Chrome Devtools

10 Must Have Chrome Extensions for a Web Developer

9 Chrome Extensions To Make Your Life Easier

Browser Extensions: Taking Back What’s Yours

Convert Selected Text to an Image With this Chrome Extentsion

Why I have 218 Tabs Open

10 Useful Tips & Tricks That Will Help You Make the Most of Chrome Devtools

10 Must Have Chrome Extensions for a Web Developer

9 Chrome Extensions To Make Your Life Easier

Browser Extensions: Taking Back What’s Yours

Convert Selected Text to an Image With this Chrome Extentsion

Why I have 218 Tabs Open

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps