如何快速开发浏览器扩展：从manifest.json到background.js的完整指南

如何快速开发浏览器扩展：从manifest.json到background.js的完整指南

【免费下载链接】webextensions-examplesExample Firefox add-ons created using the WebExtensions API项目地址: https://gitcode.com/gh_mirrors/we/webextensions-examples

WebExtensions API是开发跨浏览器扩展的强大工具，允许开发者创建功能丰富的浏览器插件。本教程将带你从基础的manifest.json配置到复杂的background.js逻辑，轻松掌握浏览器扩展开发的核心技能。

1. 认识WebExtensions API

WebExtensions API提供了一套标准化的接口，让开发者能够构建兼容Chrome、Firefox等主流浏览器的扩展。通过这个API，你可以访问浏览器的各种功能，如标签管理、书签操作、网络请求拦截等。

图1：WebExtensions API测试界面展示，显示测试通过状态

2. 项目结构与环境搭建

首先，克隆项目仓库到本地：

git clone https://gitcode.com/gh_mirrors/we/webextensions-examples

项目包含多个示例扩展，每个扩展都有独立的目录，典型结构如下：

extension-directory/ ├── manifest.json # 扩展配置文件 ├── background.js # 后台脚本 ├── icons/ # 图标资源 └── popup/ # 弹出界面相关文件

3. manifest.json配置详解

manifest.json是扩展的核心配置文件，包含扩展的基本信息、权限声明和资源引用。以下是一个Manifest V3的示例：

{ "manifest_version": 3, "name": "Block only, without host_permissions", "description": "Blocks requests using declarativeNetRequest", "version": "0.1", "permissions": ["declarativeNetRequest"], "declarative_net_request": { "rule_resources": [{ "id": "ruleset", "enabled": true, "path": "rules.json" }] } }

关键配置项说明：

• manifest_version: 声明使用的Manifest版本（V2或V3）
• permissions: 请求的浏览器权限
• declarative_net_request: 声明式网络请求规则配置

4. background.js后台逻辑开发

background.js是扩展的后台脚本，负责处理长期运行的任务和事件监听。以下是一个典型的background.js示例：

// 监听扩展安装事件 browser.runtime.onInstalled.addListener(details => { if (details.reason === "install") { // 首次安装时打开选项页面 browser.runtime.openOptionsPage(); } }); // 监听权限变化 browser.permissions.onAdded.addListener(permissions => { if (permissions.permissions.includes("userScripts")) { // 权限添加后注册用户脚本 ensureUserScriptsRegistered(); } });

background.js的主要功能：

• 处理扩展生命周期事件
• 管理后台任务和定时器
• 协调不同组件间的通信

5. 实用示例：图片收集扩展

store-collected-images示例展示了如何使用WebExtensions API创建一个图片收集工具。该扩展允许用户保存网页中的图片，并在扩展界面中查看和管理。

图2：图片收集扩展界面，显示已保存的图片和管理功能

核心功能实现：

• 使用content_scripts捕获网页图片
• 通过storage API存储图片数据
• 提供用户界面进行图片管理

6. 测试与调试技巧

开发扩展时，有效的测试和调试至关重要：

1. 浏览器扩展页面：在Chrome中访问chrome://extensions/，在Firefox中访问about:debugging
2. 开发者工具：使用浏览器内置的开发者工具调试扩展
3. 单元测试：参考mocha-client-tests示例，实现自动化测试

图3：扩展单元测试通过界面

7. 发布与分发

扩展开发完成后，可以发布到各大浏览器的应用商店：

• Chrome Web Store
• Firefox Add-ons
• Edge Add-ons

发布前确保：

• 所有权限都有合理的解释
• 扩展图标符合尺寸要求
• 提供详细的使用说明

结语

WebExtensions API为浏览器扩展开发提供了强大而灵活的工具集。通过本教程，你已经了解了从manifest.json配置到background.js逻辑的核心知识。现在，你可以开始创建自己的浏览器扩展，为用户提供更丰富的网页体验。

探索更多示例，如beastify展示的内容脚本功能，或cookie-bg-picker的用户界面设计，继续提升你的扩展开发技能！

图4：beastify示例中使用的图片资源

【免费下载链接】webextensions-examplesExample Firefox add-ons created using the WebExtensions API项目地址: https://gitcode.com/gh_mirrors/we/webextensions-examples