[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EXWFWW94AM2KMN4CZCEK4E":3,"skill-same:01M6EXWFWW94AM2KMN4CZCEK4E":74},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":45,"commitSha":46,"skillDirectory":47,"forksCount":48,"repositoryHtmlUrl":49,"repositoryHomepageUrl":50,"ownerHtmlUrl":51,"ownerBlogUrl":6,"ownerDescription":52,"updatedAt":53,"install":54,"resources":67},"01M6EXWFWW94AM2KMN4CZCEK4E","browser-extension-builder",null,"Expert in building browser extensions that solve real problems - Chrome, Firefox, and cross-browser extensions. Covers extension architecture, manifest v3, content scripts, popup UIs, monetization strategies, and Chrome Web Store publishing. Use when: browser extension, chrome extension, firefox addon, extension, manifest v3.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fbrowser-extension-builder\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"browser extension","browser","extension","browser extension builder","builder","solve","store","scripts","v3","strategies","chrome extension","expert","chrome","publishing","use","manifest","apache","architecture","web","firefox","2026-11-10 10:12:30",false,"---\nname: browser-extension-builder\ndescription: \"Expert in building browser extensions that solve real problems - Chrome, Firefox, and cross-browser extensions. Covers extension architecture, manifest v3, content scripts, popup UIs, monetization strategies, and Chrome Web Store publishing. Use when: browser extension, chrome extension, firefox addon, extension, manifest v3.\"\nsource: vibeship-spawner-skills (Apache 2.0)\n---\n\n# Browser Extension Builder\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## 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```javascript\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\n### Content Scripts\n\nCode that runs on web pages\n\n**When to use**: When modifying or reading page content\n\n```javascript\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\n### Storage and State\n\nPersisting extension data\n\n**When to use**: When saving user settings or data\n\n```javascript\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\n## Anti-Patterns\n\n### ❌ Requesting All Permissions\n\n**Why bad**: Users won't install.\nStore may reject.\nSecurity risk.\nBad reviews.\n\n**Instead**: Request minimum needed.\nUse optional permissions.\nExplain why in description.\nRequest at time of use.\n\n### ❌ Heavy Background Processing\n\n**Why bad**: MV3 terminates idle workers.\nBattery drain.\nBrowser slows down.\nUsers uninstall.\n\n**Instead**: Keep background minimal.\nUse alarms for periodic tasks.\nOffload to content scripts.\nCache aggressively.\n\n### ❌ Breaking on Updates\n\n**Why bad**: Selectors change.\nAPIs change.\nAngry users.\nBad reviews.\n\n**Instead**: Use stable selectors.\nAdd error handling.\nMonitor for breakage.\nUpdate quickly when broken.\n\n## Related Skills\n\nWorks well with: `frontend`, `micro-saas-launcher`, `personal-tool-builder`\n","# Browser Extension Builder\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## 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```javascript\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\n### Content Scripts\n\nCode that runs on web pages\n\n**When to use**: When modifying or reading page content\n\n```javascript\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\n### Storage and State\n\nPersisting extension data\n\n**When to use**: When saving user settings or data\n\n```javascript\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\n## Anti-Patterns\n\n### ❌ Requesting All Permissions\n\n**Why bad**: Users won't install.\nStore may reject.\nSecurity risk.\nBad reviews.\n\n**Instead**: Request minimum needed.\nUse optional permissions.\nExplain why in description.\nRequest at time of use.\n\n### ❌ Heavy Background Processing\n\n**Why bad**: MV3 terminates idle workers.\nBattery drain.\nBrowser slows down.\nUsers uninstall.\n\n**Instead**: Keep background minimal.\nUse alarms for periodic tasks.\nOffload to content scripts.\nCache aggressively.\n\n### ❌ Breaking on Updates\n\n**Why bad**: Selectors change.\nAPIs change.\nAngry users.\nBad reviews.\n\n**Instead**: Use stable selectors.\nAdd error handling.\nMonitor for breakage.\nUpdate quickly when broken.\n\n## Related Skills\n\nWorks well with: `frontend`, `micro-saas-launcher`, `personal-tool-builder`\n",{"name":5,"source":44,"description":7},"vibeship-spawner-skills (Apache 2.0)","main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fbrowser-extension-builder",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":55,"prompt":65,"zipAvailable":66},[56,59,62],{"tool":57,"command":58},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill browser-extension-builder",{"tool":60,"command":61},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill browser-extension-builder",{"tool":63,"command":64},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill browser-extension-builder","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fbrowser-extension-builder\u002FSKILL.md",true,[68],{"path":69,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":72,"sourceHtmlUrl":73},"skill-report.json","REFERENCE","参考文档",10538,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fbrowser-extension-builder\u002Fskill-report.json",[75,89,99,108,114,121],{"skillNo":76,"name":77,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":78,"categories":79,"keywords":85,"publishedAt":39},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[80],{"categoryNo":81,"categoryName":82,"taxonomyType":83,"taxonomyTypeDesc":84},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[86,87,88],"model","model hierarchy","model hierarchy skill",{"skillNo":90,"name":91,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":95,"publishedAt":39},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[94],{"categoryNo":81,"categoryName":82,"taxonomyType":83,"taxonomyTypeDesc":84},[96,97,98],"MCP","zoom","zoom mcp",{"skillNo":100,"name":101,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":104,"publishedAt":39},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[105,106,107,97],"sdk","zoom apps sdk","apps",{"skillNo":109,"name":110,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":113,"publishedAt":39},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[110],{"skillNo":115,"name":116,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":120,"publishedAt":39},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[119],{"categoryNo":81,"categoryName":82,"taxonomyType":83,"taxonomyTypeDesc":84},[116],{"skillNo":122,"name":123,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":126,"publishedAt":39},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[123]]