Chrome浏览器插件开发

javascript
  目录
  1. 1. Chrome插件是什么？
  2. 2. 创建插件项目
    1. 2.1. 项目结构
    2. 2.2. 核心文件：manifest.json
    3. 2.3. 弹出页面 popup.html
    4. 2.4. 弹出页面交互逻辑 popup.js
    5. 2.5. 操作网页内容 content.js
    6. 2.6. 后台逻辑 background.js
    7. 2.7. 加载并测试插件
    8. 2.8. 核心概念与API
    9. 2.9. 注意
    10. 2.10. preview&source
  3. 3. 实战
  4. 4. 参考

Chrome浏览器插件开发入门

Chrome插件是什么？

Chrome 插件（也称为扩展程序）是使用 HTML、CSS 和 JavaScript 构建的小型程序，可以自定义和增强你的浏览体验。

创建插件项目

项目结构

一个基本的 Chrome 插件需要以下文件：

1
2
3
4
5
6
7
8
my-first-extension/
├── manifest.json      # 必需：插件的“身份证”
├── popup.html         # 可选：点击插件图标时弹出的页面
├── popup.js           # 可选：popup.html 的脚本
├── popup.css          # 可选：popup.html 的样式
├── background.js      # 可选：后台运行的脚本
├── content.js         # 可选: 内容脚本，运行在网页中的脚本
└── icon.png           # 可选：插件图标 (建议 128x128)

核心文件：manifest.json

这是插件的配置文件，必须放在根目录，Chrome 插件现在使用Manifest V3。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{
  "manifest_version": 3, // 指定使用 V3 版本
  "name": "我的第一个插件", // 插件名称
  "version": "1.0", // 版本号

  // 基本信息（可选）
  "description": "一个简单的 Chrome 插件示例",

  // 图标（可选）
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },

  // 弹出页面（可选）
  "action": {
    "default_popup": "popup.html",
    "default_title": "点击打开弹窗"
  },

  // 背景服务工作线程（可选，V3 使用 service_worker 替代 background scripts）
  "background": {
    "service_worker": "background.js"
  },

  // 权限声明（根据需要添加）
  "permissions": [
    "activeTab", // 访问当前标签页的权限（安全推荐）
    // "storage" // 如果需要持久化存储
    // "tabs" // 如果需要操作标签页
  ],

  // 内容脚本（可选：注入到网页中的脚本）
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 在哪些网页上注入
      "js": ["content.js"] // 注入的 JS 文件
      // "css": ["content.css"] // 注入的 CSS 文件
    }
  ]
}

弹出页面 popup.html

当用户点击插件图标时显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的插件</title>
  <link rel="stylesheet" href="popup.css">
  <!-- 弹出页面的宽度和高度最好明确设置 -->
  <style>
    body {
      width: 300px;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>你好，世界！</h1>
  <p>这是一个简单的 Chrome 插件。</p>
  <button id="changeColor">改变页面背景色</button>

  <!-- 必须在 HTML 中直接引入 JS，不能使用内联脚本 -->
  <script src="popup.js"></script>
</body>
</html>

弹出页面交互逻辑 popup.js

popup.html引入的js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 获取按钮元素
const changeColorButton = document.getElementById('changeColor');

// 当按钮被点击时
changeColorButton.addEventListener('click', async () => {
  // 使用 Chrome 扩展 API 获取当前活动标签页
  let [tab] = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });

  // 向当前标签页发送消息，让 content script 执行操作
  chrome.tabs.sendMessage(tab.id, { action: "changeColor", color: "yellow" });
});

操作网页内容 content.js

这个脚本会被注入到匹配的网页中，可以直接操作 DOM。

1
2
3
4
5
6
7
8
9
// 监听来自 popup 或 background 的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "changeColor") {
    // 改变页面背景色
    document.body.style.backgroundColor = request.color;
    // 可以发送响应（如果需要）
    // sendResponse({status: "success"});
  }
});

后台逻辑 background.js

后台脚本（V3 中是 Service Worker）在插件安装后常驻内存，处理事件和长期任务。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 监听扩展图标被点击的事件
chrome.action.onClicked.addListener(async (tab) => {
  // 例如：可以在这里执行一些后台操作
  console.log('插件图标被点击了！当前标签页:', tab.url);
  // 也可以向内容脚本发送消息
  // chrome.tabs.sendMessage(tab.id, {action: "doSomething"});
});

// 监听来自 content script 或 popup 的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "getData") {
    // 执行一些后台逻辑
    const data = "来自后台的数据";
    sendResponse({data: data});
  }
  // 如果使用 sendResponse，需要返回 true（异步情况下）
  return true;
});

加载并测试插件

  • 打开 Chrome 浏览器。
  • 在地址栏输入 chrome://extensions 并回车。
  • 打开右上角的 “开发者模式” 开关。
  • 点击 “加载已解压的扩展程序”。
  • 选择你创建的 my-first-extension 文件夹。
  • 成功加载后，你会在浏览器右上角看到你的插件图标。

核心概念与API

  • Manifest V3: 最新版本，更安全（例如用 service_worker 替代了持久化 background scripts，用 declarativeNetRequest 替代部分 webRequest）。
  • 权限 (Permissions): 插件需要明确声明所需权限（如 activeTab, storage, tabs 等），用户安装时会提示。
  • 消息传递 (Messaging): 不同部分（popup, content script, background）之间通过 chrome.runtime.sendMessage 和 chrome.runtime.onMessage 进行通信。
  • 内容脚本 (Content Scripts): 注入到网页 DOM 中的脚本，可以直接读取和修改页面内容，但运行在独立的环境中。
  • Service Worker (Background): 处理事件、管理状态、执行长期任务。注意：V3 的 Service Worker 是非持久化的，可能被暂停。
  • 存储 (chrome.storage): 用于持久化存储数据，比 localStorage 更好（支持同步、配额更大）。

注意

安全性: 不要注入不安全的内联脚本。使用 Content Security Policy (CSP)。
性能: 避免在 content script 或 background 中执行耗时操作。
Manifest V3: 确保遵循 V3 规范，旧的 V2 插件未来可能不被支持。
调试:

popup.html: 右键点击插件图标 -> “检查弹出窗口”。
content.js: 在目标网页的开发者工具中找到对应的 content script 标签页。
background.js: 在 chrome://extensions 页面，找到你的插件，点击 “service worker” 链接进行调试。

preview&source

img
源码

实战

一个简单的翻译插件
img
源码

参考

Chrome 浏览器插件开发实践指南

  浏览器