Load and reload the unpacked extension

Chrome can load a plain folder as an extension. No build step, no store, no ZIP. This is called loading an unpacked extension, and it’s how we develop.

Open chrome://extensions, turn on Developer mode in the top right corner, click Load unpacked, and pick the page-notes folder. The one that contains manifest.json, not its parent.

The extension appears as a card. Pin it from the toolbar puzzle-piece menu so the icon is always visible.

What needs a reload

This is where beginners lose hours, so let’s be precise. There are several copies of your code alive at the same time, and they don’t all update together.

Clicking the reload icon on the extension card installs the new files and restarts the extension contexts. You need it after changing the manifest, the service worker, or a content script.

A tab that already had your content script injected keeps running the old code. Reloading the extension doesn’t touch it. You have to reload the page too.

The popup is different again. It’s a separate document that’s created when you open it and destroyed when it loses focus. After a popup-only change, just close it and open it again.

So my sequence is: manifest or worker change, reload the extension, then reload the test tab. Popup change, close and reopen the popup.

When nothing shows up

If a log line is missing, don’t assume your code didn’t run. Check the Errors button on the extension card first. A broken manifest, even a trailing comma, can stop the whole package from loading, and Chrome tells you exactly which key it choked on.

Content script syntax errors show in the page’s DevTools console, not on the card. Worker errors show in the worker’s own inspector. We look at every console in a later lesson.

Prove which code is running

Old content scripts are the classic trap. You fix a bug, reload the extension, test, and it still looks broken. The page is running the previous version.

I keep one fixed test page open and log the extension version at the start of each script:

console.log('Page Notes', chrome.runtime.getManifest().version)

Bump the version in the manifest when you make a change you want to track. Now every console tells you which generation of the code it runs.

Try this now with Page Notes loaded. Change the popup, then the manifest, and note the shortest reload sequence that makes each change visible. Then break something on purpose: remove a quote from the manifest, and add a syntax error to a script. Find both errors before fixing them, so you know where each kind lives.