Extension foundations

Load and reload the unpacked extension

Install the development folder locally, inspect manifest errors, and understand when a code change requires a reload.

8 minute lesson

~~~

Chrome can load a local folder as an unpacked extension, which gives a fast edit–reload–inspect loop.

Open chrome://extensions, enable Developer mode, choose Load unpacked, and select the folder containing the manifest. Manifest, service-worker, and content-script changes normally require reloading the extension; popup HTML may be reopened after a change.

There are several caches of reality during development. Reloading the extension installs the new package and restarts its extension contexts. A tab that already has a declaratively registered content script may still contain the old injected code until the page itself reloads. An open popup is a separate document and disappears when it loses focus.

After a manifest or worker change, reload the extension, then reload the test tab. After a popup-only change, close and reopen it. Check the extension card’s Errors button before assuming a missing log means the code never ran. An invalid manifest can prevent the package from loading at all.

Keep a fixed test page and a tiny change marker, such as the extension version in a debug log, so you can prove which code generation is running. Otherwise an old content script can make a correct fix look broken.

Load and pin Page Notes. Change the popup, content script, service worker, and manifest separately, recording the minimum reload sequence for each. Deliberately break one manifest key and one content-script syntax line and locate both errors.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →