chrome-extension-development
Expert guidelines for Chrome extension development with Manifest V3, covering security, performance, and best practices. Use when building browser extensions, creating popup UIs, implementing content scripts, working with Chrome APIs, managing extension permissions, or publishing to Chrome Web Store.
Security Assessment
About chrome-extension-development
This skill provides comprehensive guidance for building Chrome browser extensions using Manifest V3, the latest extension platform architecture. It addresses the challenges developers face when creating modern browser extensions, including security constraints, permission management, content security policies, and the transition from older manifest versions. The skill covers the complete development lifecycle from project initialization through Chrome Web Store publication.
The skill offers expert-level patterns for implementing core extension components including background service workers, content scripts that interact with web pages, popup UIs, and messaging systems. It demonstrates proper use of Chrome extension APIs for storage, alarms, messaging, and lifecycle management. The guidance emphasizes TypeScript development, functional programming patterns, and modular architecture. It includes practical code examples showing Manifest V3 configuration, service worker event handling, cross-context communication, and state persistence using chrome.storage APIs.
This skill is designed for web developers building Chrome extensions, whether creating productivity tools, content modifiers, API integrations, or browser automation. It serves both developers new to extension development and experienced developers migrating to Manifest V3. The skill is particularly valuable when implementing background processing, DOM manipulation through content scripts, managing extension permissions, handling cross-origin requests, or preparing extensions for Chrome Web Store submission.
FAQ
What is Manifest V3 and why should I use it?
Manifest V3 is the latest Chrome extension platform that replaces background pages with service workers, enforces stricter security policies, and provides better performance. It's now required for new Chrome Web Store submissions and existing extensions must migrate by the deprecation deadline.
How do content scripts communicate with the background service worker?
Content scripts use chrome.runtime.sendMessage() to send messages to the background service worker, which listens via chrome.runtime.onMessage. The service worker can respond asynchronously by returning true from the listener and calling sendResponse() when ready.
What permissions are commonly needed for Chrome extensions?
Common permissions include 'storage' for chrome.storage APIs, 'activeTab' for accessing the current tab, 'alarms' for scheduled tasks, and host permissions (URL patterns) for content script injection. Only request permissions actually needed to minimize user concerns and review friction.
How do I test my extension during development?
Load your extension unpacked via chrome://extensions with Developer Mode enabled. Use Chrome DevTools to inspect the service worker (click 'service worker' link), content scripts (via the page's DevTools), and popup (right-click popup and select Inspect). Check the console for errors and use debugger statements.
Can I use npm packages and build tools with Chrome extensions?
Yes, you can use npm packages, TypeScript, and bundlers like Webpack or Vite. The skill recommends TypeScript for type safety and modular code organization. Bundle your code for production and ensure the output matches the file paths declared in manifest.json.
Install chrome-extension-development
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
mindrally/skills