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.

Article No Longer Available

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.

Packaging

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:

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 ../extension.zip .)

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.

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.

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.

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.

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.zip 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!

Conclusion

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: