Guide to Installing Chrome Extensions (Non-Store Version) | Developer Mode

This article explains how to register custom or distributed Chrome extensions to your browser. Since they are not published on the Chrome Web Store, a few steps are required, but once set up, you can continue using them as is.

I have compiled a guide on how to install custom (unpacked) extensions into Chrome without using the Chrome Web Store. To ensure even beginners don't get lost, I also explain recommended storage locations.

What exactly is "Developer Mode"?

Chrome has a feature that allows you to load local files directly as extensions without going through the official store. Using this is called Developer Mode.

This is an essential feature when you want to test your own extensions or verify their operation before distribution.

STEP 1: Turn on Developer Mode

1. Enter chrome://extensions in the Chrome address bar and open it

2. Turn on the "Developer mode" toggle in the top right

Three buttons are added when you turn on the top-right toggle

When turned on, the following three buttons will appear at the top of the screen.

Button Purpose Load unpacked extension Register a local folder as an extension Pack extension Create a .crx file Update Reload all registered extensions at once

STEP 2: Decide where to save the extension files

Before loading, it is important to decide where to keep the files. If you move them later, the registration in Chrome will be broken.

✅ Recommended storage locations

For Windows

C:\Users\[ユーザー名]\dev\chrome-extensions\
  └── my-extension\
        ├── manifest.json
        ├── background.js
        ├── popup.html
        └── icons\

For Mac

~/dev/chrome-extensions/
  └── my-extension/
        ├── manifest.json
        ├── background.js
        └── ...

📁 About the Downloads folder

If you are "confident that you will never delete them!", it will work in the Downloads folder. However, it is not recommended. The reasons are as follows.

Downloads folder: Easily gets cluttered and buried; risk of accidental deletion (it does work). Desktop: Easily gets messy and is not suitable for long-term management. Cloud sync folders (OneDrive, etc.): Files may become corrupted depending on the sync timing.

STEP 3: Load the extension into Chrome

1. Open chrome://extensions

2. Click "Load unpacked".

3. Select the extension folder (the folder containing manifest.json)

4. If a card appears in the list, you are done

[Reference Example]
Unzipping results in the following structure.

xxx拡張アプリ名xxx-ext/        ← ★ このフォルダを選ぶ
  ├── manifest.json
  ├── content.js
  ├── background.js
  ├── popup.html
  ├── popup.js
  ├── options.html
  ├── options.js
  └── icons/

Select the xxxExtensionNamexxx-ext folder. That is the folder containing manifest.json.

STEP 4: How to reload after updating files

After you have modified the code yourself, you need to reload it to reflect the changes in Chrome.

Method A: Update button on the extension card

Open chrome://extensions and click the 🔄 (Update) icon on the target extension card.

Method B: Update all at once

Use the "Update" button at the top of the screen to reload all registered extensions at once.

Common Issues and Solutions

[Symptoms, Causes, and Solutions]
・The extension I loaded disappeared
　↳ Moved or deleted the folder - Move it back to the original location and re-register. Code changes are not reflected

　↳
Forgot to reload - Press the 🔄 button. "Manifest file not found" error 　↳ Folder selection is


off by one level - Select the folder that contains manifest.json

Summary

1. In chrome://extensions, turn on Developer mode

2. Keep the files fixed in a specific location

3. Select the folder using "Load unpacked" to install.

4. After changing the code, reload using the 🔄 button.

If you found this article helpful, please feel free to share it.

#ChromeExtension #GoogleChrome #Extensions #DeveloperMode #AITools #WorkflowEfficiency #ProductivityBoost #BrowserExtension #ChromeFeatures #PCEfficiency #AIUsage #WebTools #CustomChromeExtension #DeveloperMode #ChromeSettings #ChatGPT #Gemini #Claude #NoCode #DigitalTools

Thank you for reading. See you in the next article.