This skill provides expert-level guidance for Chrome extension development, covering JavaScript/TypeScript, browser extension APIs, and modern web development practices.
manifest.json, background service worker, content scripts, and popup files.chrome.* API.chrome.runtime.sendMessage, and respect CSP.chrome.storage.local or chrome.storage.sync to persist user settings and extension state.chrome://extensions, use Chrome DevTools to inspect the service worker and content scripts, and run unit tests.{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0.0",
"description": "A sample Chrome extension using Manifest V3",
"permissions": ["storage", "activeTab"],
"action": {
"default_popup": "popup/popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"background": {
"service_worker": "background/service-worker.js",
"type": "module"
},
"content_scripts": [
{
"matches": ["https://*.example.com/*"],
"js": ["content/content-script.js"],
"css": ["content/styles.css"]
}
]
}
// background/service-worker.ts
// Listen for extension install or update
chrome.runtime.onInstalled.addListener((details) => {
if (details.reason === 'install') {
chrome.storage.local.set({ initialized: true, count: 0 });
console.log('Extension installed');
}
});
// Handle messages from content scripts or popup
chrome.runtime.onMessage.addListener(
(message: { type: string; payload?: unknown }, sender, sendResponse) => {
if (message.type === 'GET_COUNT') {
chrome.storage.local.get('count', (result) => {
sendResponse({ count: result.count ?? 0 });
});
return true; // keep message channel open for async response
}
if (message.type === 'INCREMENT') {
chrome.storage.local.get('count', (result) => {
const newCount = (result.count ?? 0) + 1;
chrome.storage.local.set({ count: newCount }, () => {
sendResponse({ count: newCount });
});
});
return true;
}
}
);
// Schedule periodic tasks with chrome.alarms
chrome.alarms.create('sync-data', { periodInMinutes: 30 });
chrome.alarms.onAlarm.addListener((alarm) => {
if (alarm.name === 'sync-data') {
console.log('Running scheduled sync');
}
});
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).