chrome-extensions
googlechrome/modern-web-guidance
Build and publish Chrome Extensions using Manifest V3 best practices. Use this skill whenever the user asks to create, modify, debug, or understand Chrome browser extensions, add-ons, or anything involving the Chrome Extensions API. Trigger on mentions of: 'Chrome extension', 'browser extension', 'manifest.json', 'content script', 'service worker' (in browser context), 'popup' (in browser extension context), 'side panel', 'chrome.* API', 'declarativeNetRequest', 'omnibox', 'context menu' (in ext
...Expand allAbout chrome-extensions
Guidance for building production-quality Chrome extensions with Manifest V3 and publishing them to the Chrome Web Store. It triggers whenever a task involves creating, modifying, debugging, or understanding Chrome browser extensions and the chrome.* APIs, including content scripts, service workers, popups, side panels, declarativeNetRequest, omnibox, context menus, and user scripts, as well as Web Store publishing tasks like permission justifications and privacy policies.
The building half is organized as a set of mandatory rules that address the most common causes of broken extensions. Examples include only referencing icon files that actually exist (or omitting icons entirely), providing an explicit trigger to open a side panel (a default_path alone does not make it openable), running code only inside sandboxed iframes because extension CSP blocks eval and inline scripts, declaring the tabs permission before reading tab.url, always using async/await instead of .then() chains, batching DOM work in content scripts to avoid blocking the main thread, and never storing state in service-worker variables because service workers are ephemeral (persist to chrome.storage and use chrome.alarms instead of setTimeout). Further rules cover stabilizing the extension ID for chrome.identity OAuth via a manifest key, giving user feedback after context-menu actions, using the extension-available LanguageModel (Prompt API) across service worker, popup, and side panel, and requiring an action key in the manifest before using chrome.action.
Use it when you want extensions that work the first time and pass review, rather than debugging subtle Manifest V3 pitfalls. Each rule contrasts broken versus correct code and points to a deeper reference file (for icons, side panel, CSP sandbox, tab management, content scripts, service workers, auth/identity, context menus, and the Prompt API). A second part addresses publishing to the Chrome Web Store, including preparing an extension, responding to review rejections, writing permission justifications, and drafting a privacy policy, making it useful across the full lifecycle from first build to store listing.
FAQ
When should this skill be used?
Whenever creating, modifying, debugging, or understanding Chrome extensions and the Chrome Extensions API, or when publishing to the Chrome Web Store, including permission justifications and privacy policies.
Why does my side panel not open when defined in the manifest?
Defining side_panel.default_path does not make it openable; you must add a trigger such as chrome.sidePanel.open() on the action click or a popup button, or set openPanelOnActionClick.
Why is my extension state being lost?
Service workers are ephemeral and terminate after about 30s of inactivity, so state stored in variables is lost; persist it in chrome.storage and read it on every event, using chrome.alarms instead of setTimeout/setInterval.
How do I run dynamic code given the extension CSP?
Extension CSP blocks eval, new Function, and inline scripts, so run code only in sandboxed iframes (via manifest sandbox plus postMessage), or through a Blob URL or srcdoc that creates a separate origin.
Does it cover the Prompt API?
Yes. The LanguageModel API works in the service worker, popup, and side panel with no extra permissions, and extensions also get LanguageModel.params(), which is unavailable on the web.
All Files
23 filesreferences/extensions/context-menus.md1.8 KBViewreferences/extensions/auth-identity.md3.9 KBViewreferences/extensions/declarative-net-request.md2.7 KBViewreferences/extensions/message-passing.md4.1 KBViewreferences/extensions/api-calling.md2.1 KBViewreferences/extensions/csp-sandbox.md4.7 KBViewreferences/extensions/media-capture.md4.7 KBViewreferences/extensions/prompt-api.md3.7 KBViewreferences/extensions/tab-management.md3.7 KBViewSKILL.md25.5 KBViewreferences/extensions/content-scripts.md3.4 KBViewreferences/extensions/devtools.md2.8 KBViewreferences/extensions/omnibox.md1.8 KBViewreferences/extensions/side-panel.md4.4 KBViewreferences/webstore/chromewebstore-template.md5.6 KBViewreferences/webstore/review-checklist.md6.8 KBViewreferences/extensions/icons.md2.7 KBViewreferences/extensions/popup-ui.md2.3 KBViewreferences/extensions/storage.md1.9 KBViewreferences/webstore/store-listing.md7.8 KBViewreferences/extensions/service-worker.md4.5 KBViewreferences/extensions/user-scripts.md9.1 KBViewreferences/webstore/privacy-policy.md4.1 KBViewAll Files
23 filesInstall chrome-extensions
Download and extract the skill files to your .claude/skills/ directory.
Download ZIPClone the repository and copy the skill files to your project.
git clone # Copy SKILL.md to your .claude/skills/ directory
Copy





Home
