Installing Chrome extension from raw source code
Tags: webdev, javascript, tutorial, browser
Published: 2023-09-02 15:39:19

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](https://brave.com/), [Vivaldi](https://vivaldi.com/), [ungoogled-chromium](https://github.com/ungoogled-software/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](https://github.com/smart-move-media/adjust-video-speed)
2. Download the project folder
  * `git clone` the repo
  * or download the [zip](https://github.com/smart-move-media/adjust-video-speed/archive/refs/heads/master.zip), then unpack the archive; see image below:

![download zip from GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7feoaibg1e0891mugodp.jpg)

---

## 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ml2hmlh0sratxwpxas8c.jpg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/746mbiwvfpsfpezr64sx.jpg)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqlcmzuffe5mv4j9f9s6.jpg)

---

## 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 <a href="https://youtu.be/DfJrL4LEXz0" target="_blank">YouTube link</a> and screenshot example of where the speed indicator should be (in upper-left corner):
![Adjust Video Speed UI in upper-left corner](https://raw.githubusercontent.com/smart-move-media/adjust-video-speed/master/img/0-initalizeed-location.jpg)
Also I give links to other video hosting platforms like <a href="https://rumble.com/v2bmh7d-oatmeal-cake-and-brown-sugar-glaze-old-fashioned-goodness-heirloom-recipe-t.html" target="_blank">rumble</a>, <a href="https://odysee.com/@fireship/cpu-vs-gpu-vs-tpu-vs-dpu-vs-qpu" target="_blank">odysee</a> 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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4guz4eva69i73w7ou0p.jpg)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rosb0q2af0eyiluhxl73.jpg)

---

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!