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-code

Installs 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

More from googlechrome/modern-web-guidance

All 2
1samber avatargolang-goplssamber/cc-skills-golangGolang semantic code intelligence via `gopls`, the official Go language server — go-to-definition, find references, call/implementation hierarchy, workspace sym12.5Kskills.sh installs
2google avatargcloudgoogle/skillsProvides safety-critical validation, guardrails, and data reduction for gcloud CLI operations across Google Cloud Platform (GCP) services and infrastructure. Us12.4Kskills.sh installs
3czlonkowski avatarn8n-workflow-patternsczlonkowski/n8n-skillsProven workflow architectural patterns from real n8n workflows. Use when building new workflows, designing workflow structure, choosing workflow patterns, plann12Kskills.sh installs
4nomadamas avatarfine-dust-locationnomadamas/k-skill에어코리아 기반 미세먼지/초미세먼지를 지역명 또는 위치 힌트로 조회한다. 기본 경로는 k-skill-proxy의 report endpoint다.11.6Kskills.sh installs
5rohitg00 avataragentmemory-configrohitg00/agentmemoryagentmemory configuration, environment variables, ports, and feature flags. Use when enabling a feature, changing ports, setting an API key, configuring auth, o11.5Kskills.sh installs
6nomadamas avatarkorean-stock-searchnomadamas/k-skillUse k-skill-proxy to search Korean listed stocks, inspect KRX base information, and fetch daily trade snapshots without asking the user to issue a KRX API key.11.3Kskills.sh installs