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

0•

セキュリティとテスト

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.

主な機能

010 GitHub stars

02Context-aware console selection for content script debugging

03Async message passing troubleshooting and 'return true' patterns

04Network and declarativeNetRequest rule analysis techniques

05Chrome storage inspection and quota monitoring utilities

06Detailed Service Worker lifecycle and event monitoring guides

ユースケース

01Identifying why a service worker terminates prematurely or fails to load

02Fixing 'Receiving end does not exist' errors in cross-script communication

03Monitoring real-time storage changes and inspecting local/sync data

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add francanete/fran-marketplace debugging-guide

For use in Claude.ai and ChatGPT

Download Skill