How do I debug content scripts specifically?

Open the web page DevTools, go to the Console tab, and use the execution context dropdown (top-left of the console) to select your extension's context instead of 'top'.

How do I access the service worker console?

Go to chrome://extensions, enable Developer mode, and click the 'Service Worker' link next to your extension to open its dedicated DevTools window.

How can I view data stored in chrome.storage?

Open DevTools for your extension's context, navigate to the Application tab, and expand 'Extension storage' in the sidebar to view local, sync, and session data.

Why is my message passing returning 'undefined'?

Ensure your onMessage listener returns 'true' when handling responses asynchronously; this informs Chrome to keep the message channel open until sendResponse is called.

What does 'Extension context invalidated' mean?

This error occurs when an extension has been reloaded or updated, but a content script from the previous version is still attempting to interact with the Chrome API on an open page.

Chrome Extension Debugging Guide

Name: Chrome Extension Debugging Guide
Author: francanete

byfrancanete

보안 및 테스팅

Provides comprehensive strategies and code patterns for troubleshooting Chrome Extension service workers, content scripts, and communication layers.

소개

This skill equips developers with a structured framework for diagnosing and fixing issues in Chrome Extensions. It covers critical areas such as service worker lifecycle management, context-specific DevTools usage, asynchronous message passing, and storage monitoring. By providing ready-to-use debugging snippets and common error solutions, it helps developers resolve 'extension context invalidated' errors and complex communication bugs efficiently during the development cycle.

주요 기능

0 GitHub stars
Context-aware console selection for content script debugging
Async message passing troubleshooting and 'return true' patterns
Network and declarativeNetRequest rule analysis techniques
Chrome storage inspection and quota monitoring utilities
Detailed Service Worker lifecycle and event monitoring guides

사용 사례

Identifying why a service worker terminates prematurely or fails to load
Fixing 'Receiving end does not exist' errors in cross-script communication
Monitoring real-time storage changes and inspecting local/sync data

소개

주요 기능

0 GitHub stars
Context-aware console selection for content script debugging
Async message passing troubleshooting and 'return true' patterns
Network and declarativeNetRequest rule analysis techniques
Chrome storage inspection and quota monitoring utilities
Detailed Service Worker lifecycle and event monitoring guides

사용 사례

Identifying why a service worker terminates prematurely or fails to load
Fixing 'Receiving end does not exist' errors in cross-script communication
Monitoring real-time storage changes and inspecting local/sync data