[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-aaef1e44-98c1-474d-afce-a0613663b6e5":3,"$fjAGq5oduz8KJtLA6aDg6fvOzyg-HHuZETGBsDHvcJE4":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"aaef1e44-98c1-474d-afce-a0613663b6e5","browser-extension-builder","浏览器扩展解决方案专家","cat_life_career","mod_other","sickn33,other","---\nname: browser-extension-builder\ndescription: Expert in building browser extensions that solve real problems -\n  Chrome, Firefox, and cross-browser extensions. Covers extension architecture,\n  manifest v3, content scripts, popup UIs, monetization strategies, and Chrome\n  Web Store publishing.\nrisk: unknown\nsource: vibeship-spawner-skills (Apache 2.0)\ndate_added: 2026-02-27\n---\n\n# 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\u002F\n├── manifest.json      # Extension config\n├── popup\u002F\n│   ├── popup.html     # Popup UI\n│   ├── popup.css\n│   └── popup.js\n├── content\u002F\n│   └── content.js     # Runs on web pages\n├── background\u002F\n│   └── service-worker.js  # Background logic\n├── options\u002F\n│   ├── options.html   # Settings page\n│   └── options.js\n└── icons\u002F\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\u002Fpopup.html\",\n    \"default_icon\": {\n      \"16\": \"icons\u002Ficon16.png\",\n      \"48\": \"icons\u002Ficon48.png\",\n      \"128\": \"icons\u002Ficon128.png\"\n    }\n  },\n  \"content_scripts\": [{\n    \"matches\": [\"\u003Call_urls>\"],\n    \"js\": [\"content\u002Fcontent.js\"]\n  }],\n  \"background\": {\n    \"service_worker\": \"background\u002Fservice-worker.js\"\n  },\n  \"options_page\": \"options\u002Foptions.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\u002F\u002F content.js - Runs on every matched page\n\n\u002F\u002F Wait for page to load\ndocument.addEventListener('DOMContentLoaded', () => {\n  \u002F\u002F Modify the page\n  const element = document.querySelector('.target');\n  if (element) {\n    element.style.backgroundColor = 'yellow';\n  }\n});\n\n\u002F\u002F Listen for messages from popup\u002Fbackground\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; \u002F\u002F Keep channel open for async\n});\n```\n\n### Injecting UI\n```javascript\n\u002F\u002F Create floating UI on page\nfunction injectUI() {\n  const container = document.createElement('div');\n  container.id = 'my-extension-ui';\n  container.innerHTML = `\n    \u003Cdiv 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      \u003Ch3>My Extension\u003C\u002Fh3>\n      \u003Cbutton id=\"my-extension-btn\">Click me\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  `;\n  document.body.appendChild(container);\n\n  document.getElementById('my-extension-btn').addEventListener('click', () => {\n    \u002F\u002F Handle click\n  });\n}\n\ninjectUI();\n```\n\n### Permissions for Content Scripts\n```json\n{\n  \"content_scripts\": [{\n    \"matches\": [\"https:\u002F\u002Fspecific-site.com\u002F*\"],\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\u002F\u002F Save data\nchrome.storage.local.set({ key: 'value' }, () => {\n  console.log('Saved');\n});\n\n\u002F\u002F Get data\nchrome.storage.local.get(['key'], (result) => {\n  console.log(result.key);\n});\n\n\u002F\u002F Sync storage (syncs across devices)\nchrome.storage.sync.set({ setting: true });\n\n\u002F\u002F 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\u002FAwait Pattern\n```javascript\n\u002F\u002F 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\u002F\u002F 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\u002Fyearly access |\n| Donations | Tip jar \u002F Buy me a coffee |\n| Affiliate | Recommend products |\n\n### Payment Integration\n```javascript\n\u002F\u002F Use your backend for payments\n\u002F\u002F Extension can't directly use Stripe\n\n\u002F\u002F 1. User clicks \"Upgrade\" in popup\n\u002F\u002F 2. Open your website with user ID\nchrome.tabs.create({\n  url: `https:\u002F\u002Fyour-site.com\u002Fupgrade?user=${userId}`\n});\n\n\u002F\u002F 3. After payment, sync status\nasync function checkPremium() {\n  const { userId } = await getStorage(['userId']);\n  const response = await fetch(\n    `https:\u002F\u002Fyour-api.com\u002Fpremium\u002F${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  \u002F\u002F 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\u002Fpayments\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.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,224,1174,"2026-05-16 13:09:26",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"其他","other","mdi-page-next-outline","其他类型Skill",5,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"职场发展","career","mdi-briefcase-outline","面试准备、简历优化、职业规划",4,575,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"5e99f82d-25ed-4479-a453-643691fea8c9","1.0.0","browser-extension-builder.zip",3731,"uploads\u002Fskills\u002Faaef1e44-98c1-474d-afce-a0613663b6e5\u002Fbrowser-extension-builder.zip","33c99dad8b4a5260a8c5e53b9db8c9d1f39131e8b77870ff23a5ee33c2110fcb","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":9176}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]