스킬 browser-extension-builder
📦

browser-extension-builder

안전

使用 Claude 构建浏览器扩展

构建浏览器扩展需要了解复杂的 API、Manifest V3 要求和跨浏览器兼容性。本技能提供关于扩展架构、内容脚本、存储模式以及发布到应用商店的专业指导。

지원: Claude Codex Code(CC)
📊 71 적절함
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"browser-extension-builder" 사용 중입니다. Help me create a browser extension that changes the background color of all paragraphs on a page.

예상 결과:

I'll help you create a browser extension to modify paragraph backgrounds. Here's the project structure: manifest.json for configuration, content.js with DOM manipulation code using querySelectorAll, and proper permissions in the manifest. The content script will inject a style change on page load using document.addEventListener('DOMContentLoaded').

"browser-extension-builder" 사용 중입니다. How do I save user preferences in my extension?

예상 결과:

Use chrome.storage.local.set() and chrome.storage.local.get() APIs. I'll show you the async wrapper pattern with Promises for cleaner code. This persists data locally in the browser with a 5MB limit. For settings that sync across devices, use chrome.storage.sync instead.

"browser-extension-builder" 사용 중입니다. What's the difference between content scripts and background scripts?

예상 결과:

Content scripts run in the context of web pages and can access the DOM, while background service workers run independently and handle events, maintain state, and coordinate between components. Content scripts see the page; background workers see the browser. Communication happens via chrome.runtime.sendMessage and chrome.runtime.onMessage.

보안 감사

안전
v1 • 2/25/2026

Static analysis detected 36 potential issues, all of which are false positives from code examples in documentation. The flagged patterns (shell command syntax, innerHTML usage, URLs, storage keys) appear exclusively within markdown code blocks as educational examples for browser extension development. No executable code or security threats were found. This is a legitimate documentation skill.

1
스캔된 파일
266
분석된 줄 수
1
발견 사항
1
총 감사 수
낮은 위험 문제 (1)
SKILL.md:133
innerHTML Usage in Documentation Example
Line 133 contains innerHTML usage in a code example demonstrating UI injection. While this pattern has XSS risks when used with untrusted input, this is documentation showing a common browser extension pattern. The example is for educational purposes and the risk is minimal since it's not executable code.
감사자: claude

품질 점수

38
아키텍처
100
유지보수성
87
콘텐츠
33
커뮤니티
100
보안
91
사양 준수

만들 수 있는 것

构建生产力扩展

创建一个 Chrome 扩展，通过有用的工具和快捷方式增强您的浏览体验。

开发跨浏览器扩展

使用标准 API 构建可在 Chrome、Firefox 和其他浏览器上无缝运行的扩展。

浏览器扩展变现

创建并发布带有变现策略的浏览器扩展到 Chrome Web Store。

이 프롬프트를 사용해 보세요

创建简单扩展 
Help me create a simple browser extension that highlights specific text on web pages. I need the manifest.json, content script, and popup UI files.
为扩展添加存储功能 
I have a basic browser extension. Help me add Chrome Storage API so users can save their settings across sessions.
实现通信模式 
Show me how to set up message passing between my extension's popup, background service worker, and content scripts. I need to send data from the popup to modify page content.
发布到 Chrome Web Store 
I have a completed browser extension. Guide me through the process of preparing it for publication on the Chrome Web Store, including packaging, screenshots, and store listing requirements.

모범 사례

  • 仅请求扩展运行所需的最小权限，对可稍后启用的功能使用可选权限
  • 保持后台 service worker 轻量级，因为 Manifest V3 会终止空闲的 worker 以节省资源
  • 使用稳定的 DOM 选择器并添加错误处理，以防止网站更新结构时出现崩溃

피하기

  • 当您只需要访问特定网站时请求广泛的权限，如 <all_urls> 或 tabs
  • 在后台 worker 中执行繁重的处理而不是将任务卸载到内容脚本或使用 alarms
  • 使用脆弱的选择器，在网站更改时容易崩溃，且没有错误处理或监控

자주 묻는 질문

什么是 Manifest V3，为什么它很重要？
Manifest V3 是浏览器扩展清单格式的最新版本。它引入了 service worker 替代后台页面、新的权限模型和增强的安全性。Chrome Web Store 要求新扩展使用 MV3。
这个技能可以将我的扩展发布到 Chrome Web Store 吗？
不能。本技能提供构建扩展的代码和指导，但您必须手动创建开发者账户、支付费用、打包扩展并通过 Chrome Web Store 仪表板提交。
扩展在 Chrome 和 Firefox 中的工作方式相同吗？
大多数现代扩展 API 是相似的，但存在一些差异。本技能涵盖跨浏览器模式，但您应该在每个目标浏览器中测试扩展并查阅其具体文档。
如何调试浏览器扩展？
使用 Chrome DevTools 调试内容脚本（检查页面上的元素），使用 chrome://extensions 调试后台 service worker 和弹窗 UI。代码更改后重新加载扩展。
浏览器扩展的存储限制是什么？
Chrome Storage local 有 5MB 限制，而 sync storage 总限制为 100KB，每项 8KB。对于更大数据，考虑使用 IndexedDB 或服务器端存储。
我可以在扩展中使用 React 这样的框架吗？
可以，但您必须为扩展环境构建前端代码。大多数现代框架使用构建工具可以与扩展一起工作。本技能专注于原生 JavaScript，以确保清晰并避免构建复杂性。

개발자 세부 정보

작성자

sickn33

라이선스

MIT

리포지토리

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/browser-extension-builder

참조

main

파일 구조

📄 SKILL.md