{"id":"e777d86f-b9d5-45b5-9a3a-0acd9f8619b3","shortId":"XVnGbD","kind":"skill","title":"browser-extension-builder","tagline":"Expert in building browser extensions that solve real problems -","description":"# Browser Extension Builder\n\nExpert in building browser extensions that solve real problems - Chrome, Firefox,\nand cross-browser extensions. Covers extension architecture, manifest v3, content\nscripts, popup UIs, monetization strategies, and Chrome Web Store publishing.\n\n**Role**: Browser Extension Architect\n\nYou extend the browser to give users superpowers. You understand the\nunique constraints of extension development - permissions, security,\nstore policies. You build extensions that people install and actually\nuse daily. You know the difference between a toy and a tool.\n\n### Expertise\n\n- Chrome extension APIs\n- Manifest v3\n- Content scripts\n- Service workers\n- Extension UX\n- Store publishing\n\n## Capabilities\n\n- Extension architecture\n- Manifest v3 (MV3)\n- Content scripts\n- Background workers\n- Popup interfaces\n- Extension monetization\n- Chrome Web Store publishing\n- Cross-browser support\n\n## Patterns\n\n### Extension Architecture\n\nStructure for modern browser extensions\n\n**When to use**: When starting a new extension\n\n## Extension Architecture\n\n### Project Structure\n```\nextension/\n├── manifest.json      # Extension config\n├── popup/\n│   ├── popup.html     # Popup UI\n│   ├── popup.css\n│   └── popup.js\n├── content/\n│   └── content.js     # Runs on web pages\n├── background/\n│   └── service-worker.js  # Background logic\n├── options/\n│   ├── options.html   # Settings page\n│   └── options.js\n└── icons/\n    ├── icon16.png\n    ├── icon48.png\n    └── icon128.png\n```\n\n### Manifest V3 Template\n```json\n{\n  \"manifest_version\": 3,\n  \"name\": \"My Extension\",\n  \"version\": \"1.0.0\",\n  \"description\": \"What it does\",\n  \"permissions\": [\"storage\", \"activeTab\"],\n  \"action\": {\n    \"default_popup\": \"popup/popup.html\",\n    \"default_icon\": {\n      \"16\": \"icons/icon16.png\",\n      \"48\": \"icons/icon48.png\",\n      \"128\": \"icons/icon128.png\"\n    }\n  },\n  \"content_scripts\": [{\n    \"matches\": [\"<all_urls>\"],\n    \"js\": [\"content/content.js\"]\n  }],\n  \"background\": {\n    \"service_worker\": \"background/service-worker.js\"\n  },\n  \"options_page\": \"options/options.html\"\n}\n```\n\n### Communication Pattern\n```\nPopup ←→ Background (Service Worker) ←→ Content Script\n              ↓\n        chrome.storage\n```\n\n### Content Scripts\n\nCode that runs on web pages\n\n**When to use**: When modifying or reading page content\n\n## Content Scripts\n\n### Basic Content Script\n```javascript\n// content.js - Runs on every matched page\n\n// Wait for page to load\ndocument.addEventListener('DOMContentLoaded', () => {\n  // Modify the page\n  const element = document.querySelector('.target');\n  if (element) {\n    element.style.backgroundColor = 'yellow';\n  }\n});\n\n// Listen for messages from popup/background\nchrome.runtime.onMessage.addListener((message, sender, sendResponse) => {\n  if (message.action === 'getData') {\n    const data = document.querySelector('.data')?.textContent;\n    sendResponse({ data });\n  }\n  return true; // Keep channel open for async\n});\n```\n\n### Injecting UI\n```javascript\n// Create floating UI on page\nfunction injectUI() {\n  const container = document.createElement('div');\n  container.id = 'my-extension-ui';\n  container.innerHTML = `\n    <div style=\"position: fixed; bottom: 20px; right: 20px;\n                background: white; padding: 16px; border-radius: 8px;\n                box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10000;\">\n      <h3>My Extension</h3>\n      <button id=\"my-extension-btn\">Click me</button>\n    </div>\n  `;\n  document.body.appendChild(container);\n\n  document.getElementById('my-extension-btn').addEventListener('click', () => {\n    // Handle click\n  });\n}\n\ninjectUI();\n```\n\n### Permissions for Content Scripts\n```json\n{\n  \"content_scripts\": [{\n    \"matches\": [\"https://specific-site.com/*\"],\n    \"js\": [\"content.js\"],\n    \"run_at\": \"document_end\"\n  }]\n}\n```\n\n### Storage and State\n\nPersisting extension data\n\n**When to use**: When saving user settings or data\n\n## Storage and State\n\n### Chrome Storage API\n```javascript\n// Save data\nchrome.storage.local.set({ key: 'value' }, () => {\n  console.log('Saved');\n});\n\n// Get data\nchrome.storage.local.get(['key'], (result) => {\n  console.log(result.key);\n});\n\n// Sync storage (syncs across devices)\nchrome.storage.sync.set({ setting: true });\n\n// Watch for changes\nchrome.storage.onChanged.addListener((changes, area) => {\n  if (changes.key) {\n    console.log('key changed:', changes.key.newValue);\n  }\n});\n```\n\n### Storage Limits\n| Type | Limit |\n|------|-------|\n| local | 5MB |\n| sync | 100KB total, 8KB per item |\n\n### Async/Await Pattern\n```javascript\n// Modern async wrapper\nasync function getStorage(keys) {\n  return new Promise((resolve) => {\n    chrome.storage.local.get(keys, resolve);\n  });\n}\n\nasync function setStorage(data) {\n  return new Promise((resolve) => {\n    chrome.storage.local.set(data, resolve);\n  });\n}\n\n// Usage\nconst { settings } = await getStorage(['settings']);\nawait setStorage({ settings: { ...settings, theme: 'dark' } });\n```\n\n### Extension Monetization\n\nMaking money from extensions\n\n**When to use**: When planning extension revenue\n\n## Extension Monetization\n\n### Revenue Models\n| Model | How It Works |\n|-------|--------------|\n| Freemium | Free basic, paid features |\n| One-time | Pay once, use forever |\n| Subscription | Monthly/yearly access |\n| Donations | Tip jar / Buy me a coffee |\n| Affiliate | Recommend products |\n\n### Payment Integration\n```javascript\n// Use your backend for payments\n// Extension can't directly use Stripe\n\n// 1. User clicks \"Upgrade\" in popup\n// 2. Open your website with user ID\nchrome.tabs.create({\n  url: `https://your-site.com/upgrade?user=${userId}`\n});\n\n// 3. After payment, sync status\nasync function checkPremium() {\n  const { userId } = await getStorage(['userId']);\n  const response = await fetch(\n    `https://your-api.com/premium/${userId}`\n  );\n  const { isPremium } = await response.json();\n  await setStorage({ isPremium });\n  return isPremium;\n}\n```\n\n### Feature Gating\n```javascript\nasync function usePremiumFeature() {\n  const { isPremium } = await getStorage(['isPremium']);\n  if (!isPremium) {\n    showUpgradeModal();\n    return;\n  }\n  // Run premium feature\n}\n```\n\n### Chrome Web Store Payments\n- Chrome discontinued built-in payments\n- Use your own payment system\n- Link to external checkout page\n\n## Validation Checks\n\n### Using Deprecated Manifest V2\n\nSeverity: HIGH\n\nMessage: Using Manifest V2 - Chrome requires V3 for new extensions.\n\nFix action: Migrate to Manifest V3 with service worker\n\n### Excessive Permissions Requested\n\nSeverity: HIGH\n\nMessage: Requesting broad permissions - may cause store rejection.\n\nFix action: Use specific host_permissions and optional_permissions\n\n### No Error Handling in Extension\n\nSeverity: MEDIUM\n\nMessage: Not checking chrome.runtime.lastError for errors.\n\nFix action: Check chrome.runtime.lastError after API calls\n\n### Hardcoded URLs in Extension\n\nSeverity: MEDIUM\n\nMessage: Hardcoded URLs may cause issues in production.\n\nFix action: Use chrome.storage or manifest for configuration\n\n### Missing Extension Icons\n\nSeverity: LOW\n\nMessage: Missing extension icons - affects store listing.\n\nFix action: Add icons in 16, 48, and 128 pixel sizes\n\n## Collaboration\n\n### Delegation Triggers\n\n- react|vue|svelte -> frontend (Extension popup framework)\n- monetization|payment|subscription -> micro-saas-launcher (Extension business model)\n- personal tool|just for me -> personal-tool-builder (Personal extension)\n- AI|LLM|GPT -> ai-wrapper-product (AI-powered extension)\n\n### Productivity Extension\n\nSkills: browser-extension-builder, frontend, micro-saas-launcher\n\nWorkflow:\n\n```\n1. Define extension functionality\n2. Build popup UI with React\n3. Implement content scripts\n4. Add premium features\n5. Publish to Chrome Web Store\n6. Market and iterate\n```\n\n### AI Browser Assistant\n\nSkills: browser-extension-builder, ai-wrapper-product, frontend\n\nWorkflow:\n\n```\n1. Design AI features for browser\n2. Build extension architecture\n3. Integrate AI API\n4. Create popup interface\n5. Handle usage limits/payments\n6. Publish and grow\n```\n\n## Related Skills\n\nWorks well with: `frontend`, `micro-saas-launcher`, `personal-tool-builder`\n\n## When to Use\n- User mentions or implies: browser extension\n- User mentions or implies: chrome extension\n- User mentions or implies: firefox addon\n- User mentions or implies: extension\n- User mentions or implies: manifest v3\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["browser","extension","builder","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-browser-extension-builder","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/browser-extension-builder","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 37911 github stars · SKILL.md body (8,671 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:50:43.495Z","embedding":null,"createdAt":"2026-04-18T20:34:11.534Z","updatedAt":"2026-05-18T18:50:43.495Z","lastSeenAt":"2026-05-18T18:50:43.495Z","tsv":"'/*':349 '/premium/$':562 '/upgrade?user=$':541 '1':524,780,822 '1.0.0':189 '100kb':419 '128':207,722 '16':203,719 '2':530,784,828 '3':184,543,790,832 '4':794,836 '48':205,720 '5':798,840 '5mb':417 '6':804,844 '8kb':421 'access':499 'across':395 'action':197,630,652,674,695,715 'activetab':196 'actual':80 'add':716,795 'addeventlisten':334 'addon':882 'affect':711 'affili':507 'ai':756,760,764,808,817,824,834 'ai-pow':763 'ai-wrapper-product':759,816 'api':96,376,678,835 'architect':52 'architectur':35,109,131,146,831 'area':405 'ask':927 'assist':810 'async':302,428,430,441,548,576 'async/await':424 'await':455,458,553,558,566,568,581 'backend':515 'background':115,165,167,214,224 'background/service-worker.js':217 'basic':249,487 'boundari':935 'broad':645 'browser':2,8,14,20,31,50,56,127,135,771,809,813,827,869 'browser-extension-build':1,770,812 'btn':333 'build':7,19,74,785,829 'builder':4,16,753,773,815,861 'built':598 'built-in':597 'busi':743 'buy':503 'call':679 'capabl':107 'caus':648,690 'chang':402,404,410 'changes.key':407 'changes.key.newvalue':411 'channel':299 'check':612,669,675 'checkout':609 'checkpremium':550 'chrome':26,45,94,121,374,591,595,623,801,875 'chrome.runtime.lasterror':670,676 'chrome.runtime.onmessage.addlistener':282 'chrome.storage':229,697 'chrome.storage.local.get':387,438 'chrome.storage.local.set':380,449 'chrome.storage.onchanged.addlistener':403 'chrome.storage.sync.set':397 'chrome.tabs.create':537 'clarif':929 'clear':902 'click':325,335,337,526 'code':232 'coffe':506 'collabor':725 'communic':221 'config':152 'configur':701 'console.log':383,390,408 'const':269,289,313,453,551,556,564,579 'constraint':65 'contain':314,328 'container.id':317 'container.innerhtml':322 'content':38,99,113,159,209,227,230,246,247,250,341,344,792 'content.js':160,253,351 'content/content.js':213 'cover':33 'creat':306,837 'criteria':938 'cross':30,126 'cross-brows':29,125 'daili':82 'dark':463 'data':290,292,295,361,370,379,386,444,450 'default':198,201 'defin':781 'deleg':726 'deprec':614 'describ':906 'descript':190 'design':823 'develop':68 'devic':396 'differ':86 'direct':521 'discontinu':596 'div':316 'document':354 'document.addeventlistener':264 'document.body.appendchild':327 'document.createelement':315 'document.getelementbyid':329 'document.queryselector':271,291 'domcontentload':265 'donat':500 'element':270,274 'element.style.backgroundcolor':275 'end':355 'environ':918 'environment-specif':917 'error':661,672 'everi':256 'excess':638 'expert':5,17,923 'expertis':93 'extend':54 'extens':3,9,15,21,32,34,51,67,75,95,103,108,119,130,136,144,145,149,151,187,320,324,332,360,464,469,475,477,518,628,664,683,703,709,732,742,755,766,768,772,782,814,830,870,876,887 'extern':608 'featur':489,573,590,797,825 'fetch':559 'firefox':27,881 'fix':629,651,673,694,714 'float':307 'forev':496 'framework':734 'free':486 'freemium':485 'frontend':731,774,820,853 'function':311,431,442,549,577,783 'gate':574 'get':385 'getdata':288 'getstorag':432,456,554,582 'give':58 'gpt':758 'grow':847 'handl':336,662,841 'hardcod':680,687 'high':618,642 'host':655 'icon':174,202,704,710,717 'icon128.png':177 'icon16.png':175 'icon48.png':176 'icons/icon128.png':208 'icons/icon16.png':204 'icons/icon48.png':206 'id':536 'implement':791 'impli':868,874,880,886,891 'inject':303 'injectui':312,338 'input':932 'instal':78 'integr':511,833 'interfac':118,839 'ispremium':565,570,572,580,583,585 'issu':691 'item':423 'iter':807 'jar':502 'javascript':252,305,377,426,512,575 'js':212,350 'json':181,343 'keep':298 'key':381,388,409,433,439 'know':84 'launcher':741,778,857 'limit':413,415,894 'limits/payments':843 'link':606 'list':713 'listen':277 'llm':757 'load':263 'local':416 'logic':168 'low':706 'make':466 'manifest':36,97,110,178,182,615,621,633,699,892 'manifest.json':150 'market':805 'match':211,257,346,903 'may':647,689 'medium':666,685 'mention':866,872,878,884,889 'messag':279,283,619,643,667,686,707 'message.action':287 'micro':739,776,855 'micro-saas-launch':738,775,854 'migrat':631 'miss':702,708,940 'model':480,481,744 'modern':134,427 'modifi':242,266 'monet':42,120,465,478,735 'money':467 'monthly/yearly':498 'mv3':112 'my-extension-btn':330 'my-extension-ui':318 'name':185 'new':143,435,446,627 'one':491 'one-tim':490 'open':300,531 'option':169,218,658 'options.html':170 'options.js':173 'options/options.html':220 'output':912 'page':164,172,219,237,245,258,261,268,310,610 'paid':488 'pattern':129,222,425 'pay':493 'payment':510,517,545,594,600,604,736 'peopl':77 'per':422 'permiss':69,194,339,639,646,656,659,933 'persist':359 'person':745,751,754,859 'personal-tool-build':750,858 'pixel':723 'plan':474 'polici':72 'popup':40,117,153,155,199,223,529,733,786,838 'popup.css':157 'popup.html':154 'popup.js':158 'popup/background':281 'popup/popup.html':200 'power':765 'premium':589,796 'problem':13,25 'product':509,693,762,767,819 'project':147 'promis':436,447 'publish':48,106,124,799,845 'react':728,789 'read':244 'real':12,24 'recommend':508 'reject':650 'relat':848 'request':640,644 'requir':624,931 'resolv':437,440,448,451 'respons':557 'response.json':567 'result':389 'result.key':391 'return':296,434,445,571,587 'revenu':476,479 'review':924 'role':49 'run':161,234,254,352,588 'saa':740,777,856 'safeti':934 'save':366,378,384 'scope':905 'script':39,100,114,210,228,231,248,251,342,345,793 'secur':70 'sender':284 'sendrespons':285,294 'servic':101,215,225,636 'service-worker.js':166 'set':171,368,398,454,457,460,461 'setstorag':443,459,569 'sever':617,641,665,684,705 'showupgrademod':586 'size':724 'skill':769,811,849,897 'skill-browser-extension-builder' 'solv':11,23 'source-sickn33' 'specif':654,919 'specific-site.com':348 'specific-site.com/*':347 'start':141 'state':358,373 'status':547 'stop':925 'storag':195,356,371,375,393,412 'store':47,71,105,123,593,649,712,803 'strategi':43 'stripe':523 'structur':132,148 'subscript':497,737 'substitut':915 'success':937 'superpow':60 'support':128 'svelt':730 'sync':392,394,418,546 'system':605 'target':272 'task':901 'templat':180 'test':921 'textcont':293 'theme':462 'time':492 'tip':501 'tool':92,746,752,860 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'total':420 'toy':89 'treat':910 'trigger':727 'true':297,399 'type':414 'ui':41,156,304,308,321,787 'understand':62 'uniqu':64 'upgrad':527 'url':538,681,688 'usag':452,842 'use':81,139,240,364,472,495,513,522,601,613,620,653,696,864,895 'usepremiumfeatur':578 'user':59,367,525,535,865,871,877,883,888 'userid':542,552,555,563 'ux':104 'v2':616,622 'v3':37,98,111,179,625,634,893 'valid':611,920 'valu':382 'version':183,188 'vue':729 'wait':259 'watch':400 'web':46,122,163,236,592,802 'websit':533 'well':851 'work':484,850 'worker':102,116,216,226,637 'workflow':779,821 'wrapper':429,761,818 'yellow':276 'your-api.com':561 'your-api.com/premium/$':560 'your-site.com':540 'your-site.com/upgrade?user=$':539","prices":[{"id":"4ff6c80a-1ab8-40df-815a-ee413e8ca546","listingId":"e777d86f-b9d5-45b5-9a3a-0acd9f8619b3","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T20:34:11.534Z"}],"sources":[{"listingId":"e777d86f-b9d5-45b5-9a3a-0acd9f8619b3","source":"github","sourceId":"sickn33/antigravity-awesome-skills/browser-extension-builder","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/browser-extension-builder","isPrimary":false,"firstSeenAt":"2026-04-18T21:33:46.806Z","lastSeenAt":"2026-05-18T18:50:43.495Z"},{"listingId":"e777d86f-b9d5-45b5-9a3a-0acd9f8619b3","source":"skills_sh","sourceId":"sickn33/antigravity-awesome-skills/browser-extension-builder","sourceUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/browser-extension-builder","isPrimary":true,"firstSeenAt":"2026-04-18T20:34:11.534Z","lastSeenAt":"2026-05-07T22:40:39.011Z"}],"details":{"listingId":"e777d86f-b9d5-45b5-9a3a-0acd9f8619b3","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"browser-extension-builder","github":{"repo":"sickn33/antigravity-awesome-skills","stars":37911,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-05-18T08:24:49Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"0f8e130a001b8166c861b8b596fef9b90dcc4300","skill_md_path":"skills/browser-extension-builder/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/browser-extension-builder"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"browser-extension-builder","description":"Expert in building browser extensions that solve real problems -"},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/browser-extension-builder"},"updatedAt":"2026-05-18T18:50:43.495Z"}}