Chrome插件开发完整教程：从入门到发布

Chrome插件（扩展程序）是增强浏览器功能、提升工作效率的利器。无论是屏蔽广告、管理标签页，还是集成AI助手，插件都能为你提供定制化体验。本教程将带你从零开始，掌握Chrome插件开发的核心流程。

一、核心概念与架构

Chrome插件基于Web技术（HTML、CSS、JavaScript）构建，当前主流标准是Manifest V3。一个典型的插件包含以下核心组件：

1. manifest.json：插件的“身份证”，定义名称、版本、权限及功能入口。

2. Popup（弹出页）：点击工具栏图标时显示的交互界面。

3. Content Script（内容脚本）：注入到网页中，可直接操作页面DOM。

4. Background Service Worker（后台服务）：处理后台事件（如右键菜单、网络请求），无DOM访问权限。

二、环境准备与项目初始化

1. 必备工具

Chrome浏览器（最新版）
代码编辑器（推荐VS Code）
Node.js（可选，用于工程化构建）

2. 创建项目结构

新建文件夹 my-extension，包含以下基础文件：

my-extension/
├── manifest.json      # 核心配置
├── popup.html         # 弹出界面
├── popup.js           # 弹出页逻辑
├── content.js         # 内容脚本
└── icon.png           # 插件图标（128x128）

3. 编写 manifest.json

{
  "manifest_version": 3,
  "name": "我的第一个插件",
  "version": "1.0",
  "description": "一个简单的Hello World插件",
  "permissions": ["activeTab", "storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

三、核心功能开发实战

1. 构建Popup界面

在 popup.html 中设计交互界面，例如：

<!DOCTYPE html>
<html>
<body style="width:300px; padding:16px;">
  <h3>网页摘要助手</h3>
  <button id="summarizeBtn">生成摘要</button>
  <div id="result" style="margin-top:12px; padding:8px; background:#f5f5f5;"></div>
  <script src="popup.js"></script>
</body>
</html>

2. 实现核心逻辑

在 popup.js 中通过 chrome.scripting API 获取页面内容：

document.getElementById('summarizeBtn').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const results = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => document.body.innerText.slice(0, 500) // 截取前500字符
  });
  document.getElementById('result').textContent = results[0].result;
});

3. 数据持久化

使用 chrome.storage 保存用户设置：

// 保存数据
chrome.storage.local.set({ theme: 'dark' });

// 读取数据
chrome.storage.local.get('theme', (data) => {
  console.log(data.theme);
});

四、调试与测试

1. 加载插件：访问 chrome://extensions/，开启“开发者模式”，点击“加载已解压的扩展程序”。

2. 调试Popup：右键点击插件图标 → “检查弹出内容”。

3. 调试Content Script：在网页中按F12，在Console中查看注入脚本的日志。

4. 调试Service Worker：在扩展管理页点击“Service Worker”链接。

五、打包与发布

1. 本地打包

在 chrome://extensions/ 点击“打包扩展程序”，选择项目文件夹，生成 .crx 和 .pem 文件（私钥需妥善保管）。

2. 上架Chrome Web Store

1. 注册开发者账号（一次性费用\$5）。

2. 将项目文件夹压缩为 .zip（非.crx）。

3. 上传至Chrome Web Store Developer Dashboard，填写描述、截图及隐私政策。

4. 提交审核（通常1-3天）。

如何开发一个Chrome插件?