{"id":"e777d86f-b9d5-45b5-9a3a-0acd9f8619b3","shortId":"XVnGbD","kind":"skill","title":"Browser Extension Builder","tagline":"Antigravity Awesome Skills skill by Sickn33","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"],"capabilities":["skill","source-sickn33","category-antigravity-awesome-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":{"install_from":"skills.sh"}},"qualityScore":"0.300","qualityRationale":"deterministic score 0.30 from registry signals: · indexed on skills.sh · published under sickn33/antigravity-awesome-skills","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:v1","enrichmentVersion":1,"enrichedAt":"2026-04-25T11:40:46.691Z","embedding":null,"createdAt":"2026-04-18T20:34:11.534Z","updatedAt":"2026-04-25T11:40:46.691Z","lastSeenAt":"2026-04-25T11:40:46.691Z","tsv":"'/*':345 '/premium/$':558 '/upgrade?user=$':537 '1':520,776,818 '1.0.0':185 '100kb':415 '128':203,718 '16':199,715 '2':526,780,824 '3':180,539,786,828 '4':790,832 '48':201,716 '5':794,836 '5mb':413 '6':800,840 '8kb':417 'access':495 'across':391 'action':193,626,648,670,691,711 'activetab':192 'actual':76 'add':712,791 'addeventlisten':330 'addon':878 'affect':707 'affili':503 'ai':752,756,760,804,813,820,830 'ai-pow':759 'ai-wrapper-product':755,812 'antigrav':4 'api':92,372,674,831 'architect':48 'architectur':31,105,127,142,827 'area':401 'ask':923 'assist':806 'async':298,424,426,437,544,572 'async/await':420 'await':451,454,549,554,562,564,577 'awesom':5 'backend':511 'background':111,161,163,210,220 'background/service-worker.js':213 'basic':245,483 'boundari':931 'broad':641 'browser':1,10,16,27,46,52,123,131,767,805,809,823,865 'browser-extension-build':766,808 'btn':329 'build':15,70,781,825 'builder':3,12,749,769,811,857 'built':594 'built-in':593 'busi':739 'buy':499 'call':675 'capabl':103 'category-antigravity-awesome-skills' 'caus':644,686 'chang':398,400,406 'changes.key':403 'changes.key.newvalue':407 'channel':295 'check':608,665,671 'checkout':605 'checkpremium':546 'chrome':22,41,90,117,370,587,591,619,797,871 'chrome.runtime.lasterror':666,672 'chrome.runtime.onmessage.addlistener':278 'chrome.storage':225,693 'chrome.storage.local.get':383,434 'chrome.storage.local.set':376,445 'chrome.storage.onchanged.addlistener':399 'chrome.storage.sync.set':393 'chrome.tabs.create':533 'clarif':925 'clear':898 'click':321,331,333,522 'code':228 'coffe':502 'collabor':721 'communic':217 'config':148 'configur':697 'console.log':379,386,404 'const':265,285,309,449,547,552,560,575 'constraint':61 'contain':310,324 'container.id':313 'container.innerhtml':318 'content':34,95,109,155,205,223,226,242,243,246,337,340,788 'content.js':156,249,347 'content/content.js':209 'cover':29 'creat':302,833 'criteria':934 'cross':26,122 'cross-brows':25,121 'daili':78 'dark':459 'data':286,288,291,357,366,375,382,440,446 'default':194,197 'defin':777 'deleg':722 'deprec':610 'describ':902 'descript':186 'design':819 'develop':64 'devic':392 'differ':82 'direct':517 'discontinu':592 'div':312 'document':350 'document.addeventlistener':260 'document.body.appendchild':323 'document.createelement':311 'document.getelementbyid':325 'document.queryselector':267,287 'domcontentload':261 'donat':496 'element':266,270 'element.style.backgroundcolor':271 'end':351 'environ':914 'environment-specif':913 'error':657,668 'everi':252 'excess':634 'expert':13,919 'expertis':89 'extend':50 'extens':2,11,17,28,30,47,63,71,91,99,104,115,126,132,140,141,145,147,183,316,320,328,356,460,465,471,473,514,624,660,679,699,705,728,738,751,762,764,768,778,810,826,866,872,883 'extern':604 'featur':485,569,586,793,821 'fetch':555 'firefox':23,877 'fix':625,647,669,690,710 'float':303 'forev':492 'framework':730 'free':482 'freemium':481 'frontend':727,770,816,849 'function':307,427,438,545,573,779 'gate':570 'get':381 'getdata':284 'getstorag':428,452,550,578 'give':54 'gpt':754 'grow':843 'handl':332,658,837 'hardcod':676,683 'high':614,638 'host':651 'icon':170,198,700,706,713 'icon128.png':173 'icon16.png':171 'icon48.png':172 'icons/icon128.png':204 'icons/icon16.png':200 'icons/icon48.png':202 'id':532 'implement':787 'impli':864,870,876,882,887 'inject':299 'injectui':308,334 'input':928 'instal':74 'integr':507,829 'interfac':114,835 'ispremium':561,566,568,576,579,581 'issu':687 'item':419 'iter':803 'jar':498 'javascript':248,301,373,422,508,571 'js':208,346 'json':177,339 'keep':294 'key':377,384,405,429,435 'know':80 'launcher':737,774,853 'limit':409,411,890 'limits/payments':839 'link':602 'list':709 'listen':273 'llm':753 'load':259 'local':412 'logic':164 'low':702 'make':462 'manifest':32,93,106,174,178,611,617,629,695,888 'manifest.json':146 'market':801 'match':207,253,342,899 'may':643,685 'medium':662,681 'mention':862,868,874,880,885 'messag':275,279,615,639,663,682,703 'message.action':283 'micro':735,772,851 'micro-saas-launch':734,771,850 'migrat':627 'miss':698,704,936 'model':476,477,740 'modern':130,423 'modifi':238,262 'monet':38,116,461,474,731 'money':463 'monthly/yearly':494 'mv3':108 'my-extension-btn':326 'my-extension-ui':314 'name':181 'new':139,431,442,623 'one':487 'one-tim':486 'open':296,527 'option':165,214,654 'options.html':166 'options.js':169 'options/options.html':216 'output':908 'page':160,168,215,233,241,254,257,264,306,606 'paid':484 'pattern':125,218,421 'pay':489 'payment':506,513,541,590,596,600,732 'peopl':73 'per':418 'permiss':65,190,335,635,642,652,655,929 'persist':355 'person':741,747,750,855 'personal-tool-build':746,854 'pixel':719 'plan':470 'polici':68 'popup':36,113,149,151,195,219,525,729,782,834 'popup.css':153 'popup.html':150 'popup.js':154 'popup/background':277 'popup/popup.html':196 'power':761 'premium':585,792 'problem':21 'product':505,689,758,763,815 'project':143 'promis':432,443 'publish':44,102,120,795,841 'react':724,785 'read':240 'real':20 'recommend':504 'reject':646 'relat':844 'request':636,640 'requir':620,927 'resolv':433,436,444,447 'respons':553 'response.json':563 'result':385 'result.key':387 'return':292,430,441,567,583 'revenu':472,475 'review':920 'role':45 'run':157,230,250,348,584 'saa':736,773,852 'safeti':930 'save':362,374,380 'scope':901 'script':35,96,110,206,224,227,244,247,338,341,789 'secur':66 'sender':280 'sendrespons':281,290 'servic':97,211,221,632 'service-worker.js':162 'set':167,364,394,450,453,456,457 'setstorag':439,455,565 'sever':613,637,661,680,701 'showupgrademod':582 'sickn33':9 'size':720 'skill':6,7,765,807,845,893 'solv':19 'source-sickn33' 'specif':650,915 'specific-site.com':344 'specific-site.com/*':343 'start':137 'state':354,369 'status':543 'stop':921 'storag':191,352,367,371,389,408 'store':43,67,101,119,589,645,708,799 'strategi':39 'stripe':519 'structur':128,144 'subscript':493,733 'substitut':911 'success':933 'superpow':56 'support':124 'svelt':726 'sync':388,390,414,542 'system':601 'target':268 'task':897 'templat':176 'test':917 'textcont':289 'theme':458 'time':488 'tip':497 'tool':88,742,748,856 'total':416 'toy':85 'treat':906 'trigger':723 'true':293,395 'type':410 'ui':37,152,300,304,317,783 'understand':58 'uniqu':60 'upgrad':523 'url':534,677,684 'usag':448,838 'use':77,135,236,360,468,491,509,518,597,609,616,649,692,860,891 'usepremiumfeatur':574 'user':55,363,521,531,861,867,873,879,884 'userid':538,548,551,559 'ux':100 'v2':612,618 'v3':33,94,107,175,621,630,889 'valid':607,916 'valu':378 'version':179,184 'vue':725 'wait':255 'watch':396 'web':42,118,159,232,588,798 'websit':529 'well':847 'work':480,846 'worker':98,112,212,222,633 'workflow':775,817 'wrapper':425,757,814 'yellow':272 'your-api.com':557 'your-api.com/premium/$':556 'your-site.com':536 'your-site.com/upgrade?user=$':535","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-04-25T06:50:44.984Z"},{"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-04-25T11:40:46.691Z"}],"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","source":"skills_sh","category":"antigravity-awesome-skills","skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/browser-extension-builder"},"updatedAt":"2026-04-25T11:40:46.691Z"}}