[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FSX4Q8TBK1Q2MHZF3HB6BD":3,"skill-same:01M6FSX4Q8TBK1Q2MHZF3HB6BD":64},{"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":35,"linkOnly":36,"markdownContent":37,"markdownBody":38,"frontMatter":39,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":14,"repositoryHtmlUrl":45,"repositoryHomepageUrl":6,"ownerHtmlUrl":46,"ownerBlogUrl":47,"ownerDescription":48,"updatedAt":49,"install":50,"resources":63},"01M6FSX4Q8TBK1Q2MHZF3HB6BD","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 ...","reikiplanet\u002Fdaoskills","reikiplanet","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F96377599?v=4","01M6CVWCMD740YHQDK7E9QYBW4","Reiki Planet","01M6CVWCS4KXVA2CWFVJ43EAXK",0,"MIT","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fcreative\u002Fbrowser-extension-builder\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34],"browser","browser extension builder","builder","extension","browser extension","chrome","firefox","architecture","apache","content","manifest","solve","expert","monetization","v3","scripts","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 ...\"\nsource: vibeship-spawner-skills (Apache 2.0)\nrisk: unknown\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\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\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\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n",{"name":5,"risk":40,"source":41,"description":7},"unknown","vibeship-spawner-skills (Apache 2.0)","master","dff58085da947e81e8418c922055644bf0082b1b","creative\u002Fbrowser-extension-builder","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills","https:\u002F\u002Fgithub.com\u002Freikiplanet","https:\u002F\u002Fwww.reiki-planet.com","Reiki Planet Game","2026-03-29 06:02:29",{"source":8,"skillName":5,"commands":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add reikiplanet\u002Fdaoskills --skill browser-extension-builder",{"tool":56,"command":57},"bunx","bunx skills add reikiplanet\u002Fdaoskills --skill browser-extension-builder",{"tool":59,"command":60},"pnpm","pnpm dlx skills add reikiplanet\u002Fdaoskills --skill browser-extension-builder","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fcreative\u002Fbrowser-extension-builder\u002FSKILL.md",true,[],[65,91,103,118,138,161],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":71,"publishedAt":35},"01M6G614JTEQJHPT8AKK3YQ18S","web-games","Web browser game development principles. Framework selection, WebGPU, optimization, PWA.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fweb-games\u002FSKILL.md",[],[72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,19,89,90],"games","web games","web","grep","principles","selection","community","framework selection","edit","write","read","pwa","game","web browser","game development","Optimization","framework","development","webgpu",{"skillNo":92,"name":93,"nameZh":6,"description":94,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":97,"publishedAt":35},"01M6G611H2YGV0GZFP90D38ZMJ","vr-ar","VR\u002FAR development principles. Comfort, interaction, performance requirements.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fvr-ar\u002FSKILL.md",[],[98,99,89,100,101,78,80,81,82,75,102,76],"ar","vr ar","interaction","requirements","performance",{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":109,"publishedAt":35},"01M6G60XNMHAMV1SV0EJ1CX0AY","templates","Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Ftemplates\u002FSKILL.md",[],[105,110,111,112,113,114,78,115,82,116,117,75],"project scaffolding","From Scratch","tech","project","scaffolding","use","projects","applications",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":124,"publishedAt":35},"01M6G60T0GATMK3Q5H8GDC1Z8S","wcag-audit-patterns","Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing ac...","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fwcag-audit-patterns\u002FSKILL.md",[],[125,126,127,128,129,78,130,131,132,133,115,134,135,136,137],"wcag audit patterns","wcag audit","patterns","WCAG","audit","manual","with","automated testing","guidance","remediation","verification","accessibility","testing",{"skillNo":139,"name":140,"nameZh":6,"description":141,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":142,"categories":143,"keywords":144,"publishedAt":35},"01M6G60PMCHW1FRZ63F931QK3R","vulnerability-scanner","Advanced vulnerability analysis principles. OWASP 2025, Supply Chain Security, attack surface mapping, risk prioritization.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fvulnerability-scanner\u002FSKILL.md",[],[145,146,147,148,149,150,151,152,78,82,75,153,76,154,155,156,157,158,159,160],"scanner","vulnerability scanner","vulnerability","prioritization","2025","mapping","chain","supply chain","Bash","analysis","risk","owasp","supply chain security","security","supply","advanced",{"skillNo":162,"name":163,"nameZh":6,"description":164,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":167,"publishedAt":35},"01M6G60JZBB8DK0W3DSG1WNMZK","threat-modeling-expert","Expert in threat modeling methodologies, security architecture review, and risk assessment. Masters STRIDE, PASTA, attack trees, and security requirement extraction. Use for security architecture r...","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fthreat-modeling-expert\u002FSKILL.md",[],[168,169,170,31,171,172,173,26,158,115,174,175,176,78,177,178,179,155,180,181],"modeling","threat modeling expert","threat modeling","threat","risk assessment","architecture review","security architecture review","trees","security architecture","security requirement extraction","assessment","extraction","review","stride"]