Extension Won't Come Up: Where to Find Logs and How to Read Errors

You followed Your First Chrome Extension: Hello World in 15 Minutes and built it, then added some new features, and now: clicking the icon shows no popup or a blank one, you wrote console.log but can't see it anywhere, features work intermittently, and fetch to an external API keeps failing. Don't rush to change the code — the first lesson of Chrome extension debugging: find the logs in the right place, and read the information out of the errors.

What You'll Be Able to Do After Learning

• Tell the two problem types apart in 60 seconds: "failed to load" (an error dialog pops up at load time) and "loaded but has errors" (the Errors button turns red)
• Find the log locations for all three code blocks — Service Worker, popup, and content script — in one go, and stop searching all over the interface for console.log
• Learn the original text of 6 high-frequency Chrome extension errors, knowing the cause and fix for each one
• Feed the original error text back to AI verbatim; when two rounds of self-checking fail, escalate with three pieces of material

⏳ First triage: a 60-second quick check

Open the extensions management page and first determine which category the problem falls into:

# 1. Type it in the address bar to open the extensions management page and find your extension's card
chrome://extensions

# 2. An error dialog pops up at load time → the manifest is broken and the extension failed to load → see "Manifest and permission-related issues"

# 3. The Errors button turns red → loaded successfully but with errors; open it and copy the original text → match it against the error text

# 4. Both places are clean → confirm the extension is enabled, click "Reload," then reproduce the symptom once more

# 5. Still no clue → most likely you're looking at the wrong place for logs → see "Where to find logs," switch to the right console, and go through it again

🔧 Troubleshooting Common Issues

The error texts below come verbatim from the Broken Color example in Chrome's official extension debugging tutorial, grouped by extension component, each with its cause and fix.

Where to find logs: look in the right place first when debugging Chrome extensions

"You wrote console.log but can't see the output anywhere"

Cause: The logs of an extension's three code blocks go to three different places; look in the wrong one and you won't see a single line.

Fix: Match each to its place —

Where the code is	Where the logs are	How to open
Service Worker	the DevTools opened via the link beside Inspect views on the extensions page	chrome://extensions → click the service worker link on the extension's card
popup	the popup's own DevTools	right-click on the popped-up popup → "Inspect"
content script	the host webpage's console	press F12 on the target page, then select your extension in the dropdown beside top

You should see: each code block's console.log appearing in its corresponding place. For what each of the three code blocks does, see Content Script vs. Service Worker: The Extension's Brain and Hands.

💡 The extension's other full-page pages

For extension pages displayed as tabs (such as a full-page options page), right-click "Inspect" directly on the page to view logs, or go back to the extensions management page to check Errors.

"Features work intermittently, the service worker seems to be asleep"

Cause: It may not be an illusion. While inspecting (with DevTools open), the service worker stays active, so many problems that "only surface after it falls asleep" cannot be reproduced then; only when DevTools is closed does it get terminated per its normal lifecycle.

Fix:

1. Keep DevTools open while reproducing the problem (enter via the Inspect views link) so the worker doesn't fall asleep midway.
2. Close DevTools when verifying real behavior, letting the worker be terminated per its normal lifecycle.
3. To start/stop it manually: copy the extension ID above Inspect views on the extensions page, open chrome-extension://<你的扩展ID>/manifest.json in the browser, inspect that page, then go to the Application panel's Service Workers pane and use the link beside status to start/stop it.

Manifest and permission-related issues

「Failed to load extension / Required value version is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536. / Could not load manifest.」

Cause: A field name or format in manifest.json is wrong — for example, "version" written as "versions" — so the extension never loaded successfully. This error dialog pops up at load time, and Chrome points out where the problem is.

Fix:

1. Check manifest.json against the field named in the dialog and fix it (versions → version).
2. After saving, go back to chrome://extensions and click "Reload."
3. You should see: the dialog no longer pops up, and the extension's card displays normally.
4. If repeated fixes don't work, copy the entire error message verbatim to the AI, along with the full manifest.json.

💡 Prevent this kind of error in advance

Attach the Chrome manifest JSON schema (json.schemastore.org/chrome-manifest) to manifest.json in your code editor—misspelled fields and missing required fields will be flagged in red immediately.

「Permission 'activetab' is unknown or URL pattern is malformed.」

Cause: a permission name is misspelled, e.g. writing activeTab as all-lowercase activetab. Note: with this kind of error the extension still loads successfully; only the Errors button on the extensions page turns red, making it the easiest to overlook.

Fix:

1. Open chrome://extensions and click the red Errors button on the extension's card.
2. Fix the spelling of the permission named in the error: activetab → activeTab.
3. Click Clear all in the top-right corner to clear the old logs, then reload the extension.
4. You should see: the Errors button no longer turns red.

"fetch() requests to an external API keep failing"

Cause: the manifest doesn't declare the target URL as a host permission. To fetch() an external server, you must first declare that URL in the manifest, otherwise the request never goes out at all—the same code runs fine in an ordinary web page, and that's exactly the difference.

Fix:

1. Declare the target site as a host permission in the manifest.
2. Save, reload the extension, and send the request again.
3. You should see: the request appears in the popup's Network panel (see "Popup-related issues" for how to capture it).

Service Worker issues

「Service worker registration failed. Status code: 15.」

Cause: the service worker threw an error during the startup (registration) phase, e.g. writing onInstalled as lowercase oninstalled. While registration is failing, the worker's DevTools won't even open, so you must fix this one first.

Fix:

1. Go back to chrome://extensions and click Errors—this registration failure is the first one that appears.
2. The real cause is usually in the second error right after it (see the next section); fix the code based on that one.
3. After fixing, click Clear all and reload. You should see: this error no longer appears in Errors.

「Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')」

Cause: calling addListener on an undefined object—nine times out of ten the API name is misspelled (e.g. onInstalled written as oninstalled), so the object can't be retrieved and the subsequent call blows up.

Fix:

1. Check the spelling and capitalization of the API name against the line number in the error, and change it back to the correct name.
2. Reload the extension, then open DevTools from Inspect views to confirm the worker registers normally.
3. You should see: the logs you wrote appear in the worker's Console, with no more errors.

Popup issues

「Uncaught ReferenceError: tabs is not defined」

Cause: the popup code uses an undefined tabs (e.g. the tabs.query part was commented out), so the extension doesn't know which tab to inject the script into.

Fix:

1. Right-click the popup that opened → "Inspect" to open the popup's own DevTools; the error is right there in the Console.
2. Add back tabs.query to get the current tab, then use tabs[0].id to specify the injection target.
3. Click Clear all and reload, then reopen the popup to verify. You should see: after clicking the button, the target tab shows the expected effect.

"Can't capture a single one of the popup's network requests"

Cause: the popup sends its requests too fast—often all of them are done before you even open DevTools, so the Network panel is blank.

Fix: in the popup's DevTools, switch to the Network panel and click refresh inside the panel—this reloads the popup without closing DevTools, so the requests get recorded.

content script issues

「Uncaught ReferenceError: colors is not defined」

Cause: a variable name is misspelled in the content script (e.g. color written as colors), so the injected script passes the wrong variable.

Fix:

1. Go to the host web page and press F12 to open the console—content script errors are logged here, not on the extensions page.
2. In the console, click the dropdown arrow next to top and select your extension to see only its logs.
3. Fix the variable name back to the correct one based on the error, then refresh the web page and retry. You should see: the error disappears from the web page's console and the page effect appears.

"The extensions page Errors is clean, but the extension doesn't work"

Cause: the extensions page's Errors only records runtime errors, console.warning, and console.error. Many content script problems never show up there—if you look in the wrong place for logs, no amount of searching will help.

Fix:

1. Check again in the host web page's console (method in the previous item).
2. If the logs really are clean, the manifest has passed schema validation, and the feature still doesn't work—stop guessing blindly and escalate for help with three pieces of material (see below).

💡 Still not working?

If two rounds of self-checking still leave you without a clue, stop guessing blindly. If any of the following occurs, escalate immediately:

• The error involves Chrome API behavior, and the AI's fixes over two consecutive rounds were ineffective
• The logs are clean, the manifest schema validation passes, the feature still doesn't work, and you've confirmed you weren't looking in the wrong place for logs

When asking for help, bring three pieces of material:

1. The full manifest.json
2. The complete original error text (including the stack trace)
3. Minimal reproduction steps

With all the material ready, whether you send it to an AI or go ask a question, you can get an effective answer in the first round. For the specific method of feeding the error back to the AI verbatim, see The error loop: feed the error message back verbatim.

To sum up, the path to debugging a Chrome extension is just three steps: first classify, then find the right place for logs, and finally feed the original error text back verbatim.

Next lesson preview

Once the extension is running stably, share it with more people: the next page, Publishing to the Chrome Web Store: registration, packaging, and submission end to end, walks you through the complete process of registering a developer account, packaging, and submitting for review.