[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6XF3TA4TFX4VEF579CCDH0N":3,"skill-same:01M6XF3TA4TFX4VEF579CCDH0N":67},{"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":40,"linkOnly":41,"markdownContent":42,"markdownBody":43,"frontMatter":44,"refName":47,"commitSha":48,"skillDirectory":49,"forksCount":14,"repositoryHtmlUrl":50,"repositoryHomepageUrl":6,"ownerHtmlUrl":51,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":52,"install":53,"resources":66},"01M6XF3TA4TFX4VEF579CCDH0N","browser-extension-builder",null,"You extend the browser to give users superpowers. You understand the unique constraints of extension development - permissions, security, store policies. You build extensions that people install and actually use daily. You know the difference between a toy and a tool.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\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,39],"browser","browser extension builder","browser extension","builder","extension","daily","2026","extend","spawner","unknown","extensions","you","people","security","superpowers","use","install","tool","apache","permissions","development","2026-11-10 10:12:30",false,"---\nname: browser-extension-builder\ndescription: \"You extend the browser to give users superpowers. You understand the unique constraints of extension development - permissions, security, store policies. You build extensions that people install and actually use daily. You know the difference between a toy and a tool.\"\nrisk: unknown\nsource: \"vibeship-spawner-skills (Apache 2.0)\"\ndate_added: \"2026-02-27\"\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### 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### 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### 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## 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### 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### 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### 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## 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":28,"source":45,"date_added":46,"description":7},"vibeship-spawner-skills (Apache 2.0)","2026-02-27","main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fcopilot\u002Fbrowser-extension-builder","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":54,"prompt":64,"zipAvailable":65},[55,58,61],{"tool":56,"command":57},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill browser-extension-builder",{"tool":59,"command":60},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill browser-extension-builder",{"tool":62,"command":63},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill browser-extension-builder","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Fbrowser-extension-builder\u002FSKILL.md",true,[],[68,92,117,127,139,158],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":79,"publishedAt":40},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[74],{"categoryNo":75,"categoryName":76,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000037","律师与法务","PROFESSION","适用职业",[80,81,82,83,84,85,86,87,88,89,90,91],"wechat search","wechat","search","capabilities","openclaw","design","web search","compliance","web","official","fetch","with",{"skillNo":93,"name":94,"nameZh":6,"description":95,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":98,"publishedAt":40},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[99,100,101,102,103,104,82,105,106,107,108,109,110,111,112,113,35,114,115,116],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","when","brew","live","data","google","read","across","api",{"skillNo":118,"name":119,"nameZh":6,"description":120,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":121,"categories":122,"keywords":123,"publishedAt":40},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[124,125,99,110,111,112,113,103,82,114,126,115,116,109,107,106,105,35,104,102],"trend radar","radar","pulse",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":133,"publishedAt":40},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[134,135,136,24,137,138],"news","tech","tech news daily","rss","翻译",{"skillNo":140,"name":141,"nameZh":6,"description":142,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":143,"categories":144,"keywords":150,"publishedAt":40},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[145],{"categoryNo":146,"categoryName":147,"taxonomyType":148,"taxonomyTypeDesc":149},"01JBSEEDCAT000000000000021","资料检索与研究","SCENARIO","使用场景",[141,88,151,152,153,91,110,154,155,156,101,157,35],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":162,"categories":163,"keywords":164,"publishedAt":40},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[160,165,166,167,35,168,155,169,170,171,172,173],"status","play","go","latest","github","discover","control","cmd","volume"]