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:
Photo by Ricardo Gomez Angel on Unsplash
Top comments (2)
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 :)
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