DEV Community

Cover image for Browser extension - Deploy your extension
Quentin Ménoret
Quentin Ménoret

Posted on

Browser extension - Deploy your extension

I just published a new extension on Chrome and Firefox that allows anyone to run Code Tours from the Github UI. More information about Code Tours and the extension in this blog post.

I thought it would be nice to write a series about how you could do exactly the same, step by step.

This sixth blog post will focus on deploying your extension for Chrome and Firefox.


In order to release an extension, you will need to provide a proper zip file to both the Chrome Web Store and the Firefox Addons Store. The zipped file should contain the code, the manifest.json and all assets you use (for instance the icon). One important thing to note: the manifest.json needs to be available at the root of the folder. Here is an example of a file structure you can zip:

A basic extension folder

And this is how to create such a zip file when the output of your build is in the built folder:

(cd built ; zip -r ../ .)
Enter fullscreen mode Exit fullscreen mode

If your extension could run in the browser in development mode, there shouldn’t be any difficulties here.

Deploy for Chrome

First, you will need to create a developer account. Got to the Chrome Web Store. You will need to pay a 5$ fee to get started. Then you can create a new package.

Press the “New Item” button.

New item button on the Chrome Web Store

Select the Zip File you’ve built. Make sure to complete the description properly. An extension that is too light on description will get rejected. Add at least one screenshot of the extension behaviour (this is mandatory).

Now go to the Privacy tab.

Go to the privacy tab

Here, you will need to justify every permission you asked for. Make sure you did not require any permissions you did not need. Again, your extension will get rejected if you ask for too many permissions without justification.

Finally, at the bottom of the page, you need to certify that you don’t use or sell the user's data.

Certify that your extension does not use the user's data

You should be ready to publish! Before it’s available, the extension will have to pass a review from Google. This can take hours or days depending on how many submissions they received. So make sure to provide as much information as possible for your submission so you don’t lose a couple days doing back and forth with them!

Deploy for Firefox

The process for Firefox is pretty similar. Go to the Firefox Addons store. Select “On this site” as the deployment means (you probably don’t want to handle this yourself), then upload your zip file.

Submit your extension on Firefox

The extension will pass an automated review at this point. Once it’s done, it will ask you if you use any kind of code obfuscation. Transpilation counts! For instance, as my extension is written using TypeScript, I have to say yes at this point. Using Webpack counts as well! If that’s the case for you too, you will need to upload your source code. Just zip it as well zip -r extension/ and upload it.

Once you’ve selected your license, you should be good to go. After a review of your addon, it will be published on their store. Same as for Chrome, don’t leave anything to chance and provide as much information as possible so you won’t have to do back and forth with the review team.

We’re live!

And voilà, the extension should be ready to go live in both stores! 🎉
Congratulations if that was your first one!


We just learned how to properly deploy our extension for Chrome and Firefox, and how to do it the right way to avoid any rejections or delays. That's the end of this series! Let me know if anything is missing from your point of view and I'd be happy to add more content about Browser Extensions!

If you liked the series, feel free to follow me here if you want to check my next posts when they're out:

Photo by Ricardo Gomez Angel on Unsplash

Top comments (2)

pabuisson profile image
Pierre-Adrien Buisson

Very interesting series Quentin, thanks for sharing! I'm wondering what you think is the best way to test browser addons? On my own browser addon, I use a few unit tests, but integration tests are rather painful to setup (in fact, I never got them to run properly and more or less gave up for now... and there is not much documentation or tutorials about this anywhere, which makes it a tad harder). And unit tests are not enough to make sure the addon keeps on working as expected :)

qmenoret profile image
Quentin Ménoret

It really depends on what the addon is for. For something as simple as the one I described here, I'd say unit tests are enough. But if your addon becomes complex, you'll have to go with e2e testing. And that's not exactly funny. Let's say you want to test on Chrome for instance. It's possible to load your extension, but not in headless mode. So if you want to run then on a CI you'll have to either use a platform such as BrowserStack, or setup a Xvfb (fake display server) to run an actual Chrome.
Then extensions mostly interact with other websites, but I'm not sure you actually wants the flakiness of opening actual websites in your tests? So maybe you'll mock them? But if you do so, you won't catch it when they update and break your extension?
So, to conclude: it's really hard to test, and going further than unit tests have a high cost IMO