Extension Coder
← All posts

How to Test a Chrome Extension Before Publishing

Testing a Chrome extension before publishing is straightforward once you know the workflow. Here is what the process looks like from first load to final check.

Enabling Developer Mode

Open chrome://extensions in your browser. In the top-right corner, toggle on Developer mode. This unlocks a set of options that are hidden by default, including the ability to load extensions that have not been published to the Chrome Web Store.

Loading Your Extension

Click Load unpacked and select the folder that contains your extension's manifest.json file. Chrome will install it immediately and show it in the list. If there is a red error icon, click it to see what went wrong, usually a malformed manifest or a missing file reference.

The Reload Loop

When you make changes to your extension's files, Chrome does not pick them up automatically. You need to go back to chrome://extensions and click the reload button (the circular arrow) on your extension card. Content scripts that have already injected into a page will not update until you refresh that page as well. Get into the habit of reloading both.

Service workers (background scripts) can also cache stale code. If something seems off after a reload, click Service Worker in the extension card to open DevTools for the background context, then use the Update button or manually stop and restart it.

Testing Content Scripts

Content scripts run in the context of web pages. To confirm yours is working, open the target site, then open DevTools (F12) and check the Console tab. Messages you log from a content script appear here. You can also inspect the DOM to verify that any elements your script injects are present and correct.

If your script is supposed to run on specific URLs, visit a matching page and a non-matching one to confirm the URL pattern in your manifest is scoped correctly.

Testing Popups and Options Pages

Right-click the extension icon in the toolbar and choose Inspect popup to open DevTools for the popup. This lets you see console output and inspect the popup's DOM without it closing when you click away.

For an options page, go to chrome://extensions, click Details on your extension, then Extension options. The options page opens in a tab, so normal DevTools apply.

Testing Permissions

Some permissions, like storage, tabs, or access to specific origins, only matter at runtime. Test actions that rely on those permissions explicitly. If Chrome shows a permission error in the console, check that the permission is declared in your manifest and that you are calling the API correctly.

For extensions that request host permissions, test on the actual sites you intend to support. Behavior can vary across sites because of Content Security Policy differences.

Testing on Real Sites

Load your extension and use it on real pages, not just a local test file. Many bugs only surface in the wild: sites that block script injection, pages with iframes, single-page apps that change the URL without a full reload. Test on a few representative sites before submitting.

Cloud Browser Previews

Some tools offer cloud-hosted browser sessions where you can install and test extensions without setting up a local environment. These are useful for quick checks on a machine where you cannot install software, but they are not a substitute for thorough local testing.

Common Pitfalls

  • Forgetting to reload after editing files is the most common time-waster.
  • Manifest version mismatches: Chrome extensions use Manifest V3. Some older tutorials reference V2 APIs that no longer work.
  • CSP conflicts: Inline scripts are blocked in extension pages. Move any inline JavaScript to external files.
  • Storage limits: The storage.sync API has a 100KB quota. If you are storing data, test with realistic amounts.

Build Without the Setup

If you want to skip the boilerplate entirely, Extension Coder lets you describe what you want your extension to do and generates the code for you. You still load and test it the same way, but you start from working code instead of a blank folder.

Build it without the setup.

Describe the extension you want and Extension Coder builds it, previews it live, and helps you publish.

Start building