browser-extension-builder by sickn33/antigravity-awesome-skills
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill browser-extension-builder角色:浏览器扩展架构师
你通过扩展浏览器赋予用户超能力。你理解扩展开发的独特限制——权限、安全、商店政策。你构建用户愿意安装并真正日常使用的扩展。你懂得玩具和工具之间的区别。
现代浏览器扩展的结构
使用时机:开始开发新扩展时
extension/
├── manifest.json # 扩展配置
├── popup/
│ ├── popup.html # 弹出界面
│ ├── popup.css
│ └── popup.js
├── content/
│ └── content.js # 在网页上运行
├── background/
│ └── service-worker.js # 后台逻辑
├── options/
│ ├── options.html # 设置页面
│ └── options.js
└── icons/
├── icon16.png
├── icon48.png
└── icon128.png
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0.0",
"description": "What it does",
"permissions": ["storage", "activeTab"],
"action": {
"default_popup": "popup/popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content/content.js"]
}],
"background": {
"service_worker": "background/service-worker.js"
},
"options_page": "options/options.html"
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
弹出界面 ←→ 后台 (Service Worker) ←→ 内容脚本
↓
chrome.storage
在网页上运行的代码
使用时机:当需要修改或读取页面内容时
// content.js - 在每个匹配的页面上运行
// 等待页面加载
document.addEventListener('DOMContentLoaded', () => {
// 修改页面
const element = document.querySelector('.target');
if (element) {
element.style.backgroundColor = 'yellow';
}
});
// 监听来自弹出界面/后台的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === 'getData') {
const data = document.querySelector('.data')?.textContent;
sendResponse({ data });
}
return true; // 保持通道开放以支持异步操作
});
// 在页面上创建浮动用户界面
function injectUI() {
const container = document.createElement('div');
container.id = 'my-extension-ui';
container.innerHTML = `
<div style="position: fixed; bottom: 20px; right: 20px;
background: white; padding: 16px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10000;">
<h3>My Extension</h3>
<button id="my-extension-btn">Click me</button>
</div>
`;
document.body.appendChild(container);
document.getElementById('my-extension-btn').addEventListener('click', () => {
// 处理点击事件
});
}
injectUI();
{
"content_scripts": [{
"matches": ["https://specific-site.com/*"],
"js": ["content.js"],
"run_at": "document_end"
}]
}
持久化扩展数据
使用时机:当需要保存用户设置或数据时
// 保存数据
chrome.storage.local.set({ key: 'value' }, () => {
console.log('Saved');
});
// 获取数据
chrome.storage.local.get(['key'], (result) => {
console.log(result.key);
});
// 同步存储(跨设备同步)
chrome.storage.sync.set({ setting: true });
// 监听变化
chrome.storage.onChanged.addListener((changes, area) => {
if (changes.key) {
console.log('key changed:', changes.key.newValue);
}
});
| 类型 | 限制 |
|---|---|
| local | 5MB |
| sync | 总计 100KB,每项 8KB |
// 现代异步包装器
async function getStorage(keys) {
return new Promise((resolve) => {
chrome.storage.local.get(keys, resolve);
});
}
async function setStorage(data) {
return new Promise((resolve) => {
chrome.storage.local.set(data, resolve);
});
}
// 使用示例
const { settings } = await getStorage(['settings']);
await setStorage({ settings: { ...settings, theme: 'dark' } });
为何不好:用户不会安装。商店可能拒绝。安全风险。差评。
替代方案:请求最小必要权限。使用可选权限。在描述中解释原因。在需要使用时请求。
为何不好:MV3 会终止空闲工作线程。耗电。浏览器变慢。用户卸载。
替代方案:保持后台最小化。使用警报进行周期性任务。将任务卸载到内容脚本。积极使用缓存。
为何不好:选择器改变。API 改变。用户不满。差评。
替代方案:使用稳定的选择器。添加错误处理。监控功能失效情况。失效时快速更新。
与以下技能配合良好:frontend、micro-saas-launcher、personal-tool-builder
此技能适用于执行概述中描述的工作流程或操作。
每周安装量
685
代码仓库
GitHub 星标
27.4K
首次出现
2026 年 1 月 19 日
安全审计
安装于
opencode539
gemini-cli530
codex499
claude-code468
github-copilot454
cursor434
Role : Browser Extension Architect
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.
Structure for modern browser extensions
When to use : When starting a new extension
extension/
├── manifest.json # Extension config
├── popup/
│ ├── popup.html # Popup UI
│ ├── popup.css
│ └── popup.js
├── content/
│ └── content.js # Runs on web pages
├── background/
│ └── service-worker.js # Background logic
├── options/
│ ├── options.html # Settings page
│ └── options.js
└── icons/
├── icon16.png
├── icon48.png
└── icon128.png
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0.0",
"description": "What it does",
"permissions": ["storage", "activeTab"],
"action": {
"default_popup": "popup/popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content/content.js"]
}],
"background": {
"service_worker": "background/service-worker.js"
},
"options_page": "options/options.html"
}
Popup ←→ Background (Service Worker) ←→ Content Script
↓
chrome.storage
Code that runs on web pages
When to use : When modifying or reading page content
// content.js - Runs on every matched page
// Wait for page to load
document.addEventListener('DOMContentLoaded', () => {
// Modify the page
const element = document.querySelector('.target');
if (element) {
element.style.backgroundColor = 'yellow';
}
});
// Listen for messages from popup/background
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === 'getData') {
const data = document.querySelector('.data')?.textContent;
sendResponse({ data });
}
return true; // Keep channel open for async
});
// Create floating UI on page
function injectUI() {
const container = document.createElement('div');
container.id = 'my-extension-ui';
container.innerHTML = `
<div style="position: fixed; bottom: 20px; right: 20px;
background: white; padding: 16px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10000;">
<h3>My Extension</h3>
<button id="my-extension-btn">Click me</button>
</div>
`;
document.body.appendChild(container);
document.getElementById('my-extension-btn').addEventListener('click', () => {
// Handle click
});
}
injectUI();
{
"content_scripts": [{
"matches": ["https://specific-site.com/*"],
"js": ["content.js"],
"run_at": "document_end"
}]
}
Persisting extension data
When to use : When saving user settings or data
// Save data
chrome.storage.local.set({ key: 'value' }, () => {
console.log('Saved');
});
// Get data
chrome.storage.local.get(['key'], (result) => {
console.log(result.key);
});
// Sync storage (syncs across devices)
chrome.storage.sync.set({ setting: true });
// Watch for changes
chrome.storage.onChanged.addListener((changes, area) => {
if (changes.key) {
console.log('key changed:', changes.key.newValue);
}
});
| Type | Limit |
|---|---|
| local | 5MB |
| sync | 100KB total, 8KB per item |
// Modern async wrapper
async function getStorage(keys) {
return new Promise((resolve) => {
chrome.storage.local.get(keys, resolve);
});
}
async function setStorage(data) {
return new Promise((resolve) => {
chrome.storage.local.set(data, resolve);
});
}
// Usage
const { settings } = await getStorage(['settings']);
await setStorage({ settings: { ...settings, theme: 'dark' } });
Why bad : Users won't install. Store may reject. Security risk. Bad reviews.
Instead : Request minimum needed. Use optional permissions. Explain why in description. Request at time of use.
Why bad : MV3 terminates idle workers. Battery drain. Browser slows down. Users uninstall.
Instead : Keep background minimal. Use alarms for periodic tasks. Offload to content scripts. Cache aggressively.
Why bad : Selectors change. APIs change. Angry users. Bad reviews.
Instead : Use stable selectors. Add error handling. Monitor for breakage. Update quickly when broken.
Works well with: frontend, micro-saas-launcher, personal-tool-builder
This skill is applicable to execute the workflow or actions described in the overview.
Weekly Installs
685
Repository
GitHub Stars
27.4K
First Seen
Jan 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode539
gemini-cli530
codex499
claude-code468
github-copilot454
cursor434
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
136,300 周安装
Gemini图像分割技能 - 基于AI的物体识别与遮罩生成工具
spec-workflow:腾讯云开发技能,结构化开发工作流与EARS需求语法指南
656 周安装
Amazon Aurora DSQL 分布式 SQL 数据库技能 - 无服务器 PostgreSQL 兼容,支持模式管理与迁移
从 NativeWind 迁移到 Uniwind 完整指南:提升 React Native 样式性能与稳定性
656 周安装
Amazon Aurora DSQL 技能:无服务器分布式SQL数据库,支持MCP工具查询与模式管理
合作与业务拓展指南:9位产品负责人教你建立战略伙伴关系,达成业务交易
656 周安装