I built a browser extension this week, and had to do a bit of digging to figure out how to test it properly on Chrome and Edge before publishing it. It's always important to test extensions before publishing them to stores, so here's some quick steps for you to get started (and for my future self who will definitely forget this)!
- Download/clone your repository if it's not on your computer already (just have the one you have built ready, no need to zip it up)
- On Edge, go to
edge://extensions, or on Chrome, go tochrome://extensions - Toggle on "Developer Mode"
- Click the "Load Unpacked" button
- Select the unzipped extension folder (again, don't zip it up yet)
- Look for the lil puzzle piece icon, and make sure the extension is toggled on
- And you're installed!
Now as you develop your extension, you can hit the "reload" button on the Extensions page and the browser will automatically load your changes.
Once you're done, you can hit the "Pack Extension" button to make a downloadable extension file (a .crx file), or you can just zip your folder up and send it to the various web stores.
Top comments (2)
Nice, seems pretty straightforward. It's a bit of a pain on Firefox. It's not a problem if you're using Firefox Developer Edition or Firefox Nightly, but if you want to use it on a normal Firefox, you have to pack and sign it using their
web-exttool every time you make changes to it, and only then you're allowed to enable it in your browser. It's a bit like having to publish an NPM package just so you can test it (except extension doesn't get published, it just gets checked and signed by Mozilla). It's fine if you intend to publish the extension, because for that you will have to sign up on addons.mozilla.org and set up the 2-factor authentication anyway, but having to do this in case you're just developing an extension for yourself without an intent to publish (as was the case for me) was pretty inconvenientI noticed that, which is why I admit I didn't bother 😅 it was such a pain! Thanks for sharing this though.