Installing Chrome extension from raw source code

Ever wanted to write your own web browser extension? Want to make the next "AI web tool", automation for co-workers, fork an existing project? Found an extension that is not available for your browser store you want to try out?

You can directly install extensions from a local folder. Helpful before publishing to the store is the best way to get a faster feedback loop. You might end up with higher ratings the more polished your extension is when released.

Note on browser compatibility

While these screenshots use Google Chrome, they will also work on all 'Chromium' based web browsers, like Brave, Vivaldi, ungoogled-chromium, etc. Window's Edge is also compatible, though some the button locations are changed.

Firefox & forks are out of scope of this article.

---

Step 1: Have the File Folder Ready

If you are developing on the same machine, note the folder of your local repo & move to Step 1.

If you want to test another repo on GitHub:
(We'll use my project as an example.)

1. Open the repo webpage, eg: https://github.com/smart-move-media/adjust-video-speed
2. Download the project folder
   • git clone the repo
   • or download the zip, then unpack the archive; see image below:

---

Step 2: "Load Unpacked" Extension Folder

1. Open the Extensions browser page
   • find link in menu, or open the webpage chrome://extensions or brave://extensions
2. Turn on "Developer Mode" in upper-right
3. Click on [ Load Unpacked ] button (see screenshot)
4. Use the file picker to open the project folder

Now the new extension should be listed like so (using my example for Adjust Video Speed):

---

Step 3: Test Loaded Extension

Let's look for if what you just loaded is working. The README or other documentation should have screenshots on what the extension looks like.

In my README, I give a YouTube link and screenshot example of where the speed indicator should be (in upper-left corner):

Also I give links to other video hosting platforms like rumble, odysee for further testing.

---

Advanced: Open Extensions Options

Often extensions will have it's own UI to open their options page (usually via toolbar icon menu). But almost all can be opened via the browser's [ Details ] button:

Then you have to scroll down & click on the [ Extensions Options ] button to open the UI:

---

Conclusion:

So hopefully I have unlocked the mystery of installing a web browser extension from a local folder for you! Add a comment for your new extension for others to try if you're brave enough!

Comments

[Hebert Montarroyos]

Fantastic tutorial! Thank you for sharing .Your step-by-step instructions are clear and easy to follow, making it accessible for both beginners and experienced developers. It's a valuable resource for anyone looking to dive into browser extension development. Kudos to the author for providing such a helpful tutorial!

[Tom Byrer]

Thanks for your kind words Hebert!