
Chrome Extensions
This one gets straight to Manifest V3 patterns and the specific things that break extensions in production. It covers the entire lifecycle from building to Chrome Web Store publishing, with mandatory rules that address the most common footguns: sandboxed iframe execution, service worker ephemerality, side panel triggers that developers constantly forget, and the silent undefined returns when you miss the tabs permission. The context menu feedback guidance is solid advice, and the chrome.identity OAuth workflow with the key field is something you'll actually need when integrating sign-in. Written for people who want working extensions without debugging CSP violations at 2am.
- skills.sh installs
- 12.8K
- GitHub stars
- 2.7K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add googlechrome/modern-web-guidance --skill chrome-extensions --agent claude-codeInstalls into .claude/skills of the current project.
Files
Chrome Extensions
Build production-quality Chrome extensions using Manifest V3 and publish them to the Chrome Web Store.
Part 1 — Building Extensions
Mandatory Rules
These address the most common causes of broken extensions. Violating any produces a non-functional build.
1. Icons: only reference files you create — or omit icons entirely
❌ BROKEN — referencing files that don't exist or reusing one file for all sizes:
"icons": { "16": "icon.png", "48": "icon.png", "128": "icon.png" }
✅ CORRECT — each size is a separate file at the correct pixel dimensions:
"icons": { "16": "icons/icon-16.png", "48": "icons/icon-48.png", "128": "icons/icon-128.png" }
(where icon-16.png is 16×16px, icon-48.png is 48×48px, icon-128.png is 128×128px)
✅ ALSO CORRECT — omit icons from manifest if you cannot generate real PNG files:
(just remove the "icons" and "default_icon" fields — Chrome uses a default icon)
If you include icon references, you MUST create the actual image files. Generate them with a script (see references/extensions/icons.md) or leave them out. Never reference non-existent files.
2. Side panel: you MUST provide a way to open it
Sponsors
Details
- Repository
- github.com/googlechrome/modern-web-guidance
- Categories
- Backend & APIs, DevOps & CI/CD, Git & Pull Requests, Documentation, Code Review & Quality, Release Management, Debugging, Automation & Workflows
- First seen
- Jul 14, 2026