Open Skills Logo
Open Skills

browser-extension-builder

专业构建解决实际问题的浏览器扩展——涵盖Chrome、Firefox及跨浏览器扩展开发。精通扩展架构设计、Manifest V3规范、内容脚本注入、弹窗界面开发、盈利策略制定及Chrome应用商店发布全流程。适用场景：浏览器扩展开发、Chrome扩展、Firefox插件、扩展程序、Manifest V3迁移。

作者

@sickn33

分类

开发工具

安装

热度:39

下载并解压到你的 skills 目录

复制命令，发送给 OpenClaw 自动安装：

下载并安装这个技能 https://openskills.cc/api/download?slug=sickn33-skills-browser-extension-builder&locale=zh&source=copy

Browser Extension Builder - 浏览器扩展开发专家

技能概述


帮助你从零构建真正解决问题的浏览器扩展——支持 Chrome、Firefox 和跨浏览器开发，涵盖 Manifest V3 架构、内容脚本、弹窗界面、货币化策略和 Chrome Web Store 发布全流程。

适用场景

  • 从零开发浏览器扩展

    • 当你有一个创意想要做成浏览器扩展时，这个技能能帮你设计扩展架构、编写 Manifest V3 配置、实现 Content Script 和 Background Service Worker，并最终发布到 Chrome Web Store。

  • Manifest V3 迁移或升级

    • 当你需要将旧的 Manifest V2 扩展迁移到 V3，或者想了解 V3 的新特性和最佳实践时，这个技能提供完整的迁移指南和代码示例。

  • 扩展货币化和商店发布

    • 当你开发的扩展准备上线并考虑盈利模式时，这个技能帮你设计定价策略、实现付费功能、准备商店素材，并通过 Chrome Web Store 的审核流程。

    核心功能

  • 现代扩展架构设计

    • 提供完整的扩展项目结构模板，包括 manifest.json 配置、Popup 界面、Content Scripts、Background Service Worker 和 Options 页面。教你如何设计扩展内部通信机制，实现 Popup ↔ Background ↔ Content Script 之间的消息传递，以及使用 Chrome Storage API 持久化用户数据。

  • Content Script 和页面交互

    • 编写能够在目标网页上运行的代码，包括 DOM 操作、UI 注入、事件监听和与页面脚本的隔离处理。提供如何安全地修改页面内容、提取网页数据、创建浮动 UI 组件的实用代码模式。

  • Chrome Web Store 发布和货币化

    • 指导你完成商店发布全过程，包括扩展图标设计、隐私政策制定、权限说明撰写、审核流程应对。提供多种货币化策略参考，如一次性付费、订阅制、内购解锁、企业授权等，以及如何实现许可验证和付费墙。

    常见问题

    如何从零开始开发一个 Chrome 扩展？

    创建 Chrome 扩展需要以下基本步骤：

  • 创建项目文件夹，包含 manifest.json 配置文件

  • 声明扩展需要的权限和功能（action、content_scripts、background 等）

  • 编写 Popup 界面（HTML/CSS/JS）

  • 编写 Content Script 处理网页内容

  • 编写 Background Service Worker 处理后台逻辑

  • 在 Chrome 的 chrome://extensions 页面加载未打包的扩展进行测试

  • 准备商店素材并发布到 Chrome Web Store

    • 这个技能可以帮你完成每一步的具体实现。

    Manifest V3 和 V2 有什么区别？

    Manifest V3 是 Chrome 扩展的新标准，主要变化包括：

    方面Manifest V2Manifest V3
    后台脚本background page (持久)Service Worker (事件驱动)
    内容安全不限制远程代码禁止远程代码，禁止 eval
    主机权限<all_urls>activeTab + 特定权限
    API 变化chrome.extensionchrome.runtime + chrome.action

    V3 的优势是更好的安全性、性能和隐私保护。如果你有 V2 扩展需要迁移，这个技能提供详细的迁移指南。

    浏览器扩展如何实现盈利？

    常见的扩展盈利模式包括：

  • 一次性付费：用户付费下载或解锁高级功能

  • 订阅制：按月/年订阅，适合持续更新的工具

  • 内购解锁：基础免费，高级功能付费

  • 企业授权：为企业客户提供定制版和技术支持

  • 联盟营销：在扩展中推广相关产品获得佣金

  • 数据服务：提供数据分析或 API 服务（需注意隐私）

    • 实现盈利时需要注意：清晰说明付费功能、提供免费试用、处理退款请求、遵守商店政策。这个技能可以帮你设计合适的货币化策略。