Chrome 插件开发实战：从入门到进阶

1.1 Chrome 插件的魅力与应用场景

Chrome 插件是增强 Chrome 浏览器功能的得力助手，能实现广告拦截、密码管理、标签管理等实用功能。在日常办公中，我们可以借助插件提升效率，如自动填充表单、快速保存网页内容；在浏览网页时，通过插件美化页面、屏蔽广告，优化浏览体验；对于数据分析师或爬虫爱好者，插件还能用于抓取网页数据并保存到本地。Chrome 插件丰富了浏览器的功能，为用户带来了高度定制化的浏览体验。

1.2 为什么要学习 Chrome 插件开发

Chrome 插件开发门槛较低，掌握基础的 HTML、CSS 和 JavaScript 知识即可入门，同时能快速实现实用功能。通过开发插件，我们可以打造符合自己或团队需求的工具，提升工作效率。此外，学习 Chrome 插件开发还能加深对 Web 技术的理解，拓展技术视野。而且，Chrome 浏览器市场占有率高，开发的插件能惠及大量用户，具有广泛的应用前景。

1.3 本文目标与读者对象

本文旨在带领读者从零开始，逐步掌握 Chrome 插件开发的核心知识与实战技巧。无论是对插件开发感兴趣的初学者，还是有一定经验想进一步提升的开发者，都能从本文中获取有价值的信息。通过阅读本文，读者将了解 Chrome 插件的基本架构、核心 API，学会开发简单插件，并掌握测试、调试及发布插件的方法。

二、Chrome 插件开发基础

2.1 插件构成要素

2.1.1 manifest.json：插件的灵魂配置文件

manifest.json 是 Chrome 插件的核心配置文件，位于插件根目录。它指定了插件的名称、版本、图标等基础信息，同时根据插件功能声明权限，确定要在后台和网页上运行哪些文件。例如：

json

{
    "manifest_version": 3,
    "name": "My Chrome Extension",
    "version": "1.0",
    "description": "这是一个简单的Chrome插件示例",
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "icon16.png",
            "48": "icon48.png",
            "128": "icon128.png"
        }
    },
    "permissions": ["activeTab"]
}

其中，manifest_version声明使用的 Manifest 版本，Chrome 推荐使用版本 3；name和version分别为插件的名称和版本号；action定义了插件的弹出窗口和图标，这里指定了popup.html作为默认弹出页面；permissions声明插件需要的权限，activeTab权限用于访问当前活跃的页面。

2.1.2 Content Scripts：网页内容的操控者

Content Scripts 是可以通过 DOM 操作网页内容的脚本文件。它能在网页上下文中运行，读取和修改网页的 DOM 元素、CSS 样式以及 JavaScript 变量。例如，我们可以编写 Content Scripts 来实现网页元素的隐藏、样式的修改或数据的提取。内容脚本的注入可以通过在 manifest.json 中进行静态声明，也可以动态声明或以编程方式注入。例如，通过静态声明注入内容脚本的配置如下：

json

{
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ]
}

上述配置表示content.js脚本将在所有网址的页面中执行。

2.1.3 Service Worker：插件的后台守护者

Service Worker 用于执行后台任务，在扩展程序的整个生命周期中持续运行。它可以监听浏览器标签更新、监听插件安装或更新、定时通知提醒、实现广告拦截，还能与弹出窗口或内容脚本通信。例如，使用 Service Worker 往内容脚本发消息，获取当前 tab 的标题：

javascript

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    var tab = tabs[0];
    chrome.tabs.sendMessage(tab.id, { message: 'getTitle' }, function (response) {
        console.log('当前页面标题:', response.title);
    });
});

在 manifest.json 中，通过以下配置指定 Service Worker 脚本：

json

{
    "background": {
        "service_worker": "service - worker.js"
    }
}

2.2 核心 API 解读

2.2.1 chrome.tabs：标签页的魔法师

用途：用于操作浏览器标签页，如创建、切换、关闭或获取当前活动标签页。

常用方法：

• chrome.tabs.create(object createProperties, function callback)：创建新标签页。例如，chrome.tabs.create({ url: 'https://www.example.com' });将打开一个指定网址的新标签页。
• chrome.tabs.query(object queryInfo, function callback)：查询标签页。如chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { /* 处理查询结果 */ });可获取当前活动窗口中的活动标签页。
• chrome.tabs.update(tabId, object updateProperties, function callback)：更新标签页属性，如chrome.tabs.update(tabId, { url: 'https://new - url.com' });可更改指定标签页的网址。

2.2.2 chrome.action：插件图标的掌控者

用途：允许开发者控制插件图标的外观、交互行为以及弹出窗口（Popup）。

常用方法：

• chrome.action.setIcon(object details, function callback)：设置插件图标。例如，chrome.action.setIcon({ path: 'new - icon.png' });可更换插件图标。
• chrome.action.setPopup(object details, function callback)：设置插件弹出窗口。如chrome.action.setPopup({ popup: 'new - popup.html' });可改变插件点击后弹出的页面。
• chrome.action.onClicked.addListener(function callback)：监听插件图标点击事件。chrome.action.onClicked.addListener(function (tab) { console.log('插件图标被点击了'); });在图标被点击时执行相应操作。

2.2.3 chrome.storage：数据存储的小助手

用途：用于存储插件数据，当用户清除浏览数据时，扩展程序存储空间不会被清除。

两种存储方式：

• chrome.storage.sync：同步存储，数据会在用户的多个设备间同步。例如：

javascript

chrome.storage.sync.set({ key: 'value' }, function () {
    console.log('数据已同步存储');
});
chrome.storage.sync.get(['key'], function (result) {
    console.log('获取到的数据:', result.key);
});

• chrome.storage.local：本地存储，数据仅存储在当前设备。使用方法与chrome.storage.sync类似，只需将sync替换为local。

2.2.4 chrome.runtime：插件运行环境的管理者

用途：管理插件运行环境，支持后台脚本与内容脚本通信。

常用方法：

• chrome.runtime.sendMessage(destination, message, options, function responseCallback)：发送消息。例如，在后台脚本中向内容脚本发送消息：

javascript

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    var tab = tabs[0];
    chrome.tabs.sendMessage(tab.id, { message: 'hello from background' }, function (response) {
        console.log('收到内容脚本的响应:', response);
    });
});

在内容脚本中接收消息：

javascript

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    if (message.message === 'hello from background') {
        sendResponse({ response: 'hello back' });
    }
});

• chrome.runtime.onInstalled.addListener(function callback)：监听插件安装或更新事件。可用于在插件安装或更新时执行初始化操作。

2.2.5 chrome.webRequest：网络请求的拦截者

用途：监控或修改 HTTP 请求（需在 manifest.json 声明权限）。

适用场景：广告拦截等。

示例（拦截请求）：

在 manifest.json 中添加权限：

json

{
    "permissions": ["webRequest", "webRequestBlocking"]
}

在后台脚本中拦截请求：

javascript

chrome.webRequest.onBeforeRequest.addListener(
    function (details) {
        if (details.url.match(/ads\.example\.com/)) {
            return { cancel: true };
        }
        return {};
    },
    { urls: ["<all_urls>"] },
    ["blocking"]
);

上述代码可拦截所有指向ads.example.com的请求。

2.2.6 chrome.contextMenus：右键菜单的定制者

用途：在浏览器右键菜单中添加自定义选项。

示例：

在 manifest.json 中添加权限：

json

{
    "permissions": ["contextMenus"]
}

在后台脚本中创建右键菜单：

javascript

chrome.contextMenus.create({
    title: "Search Google for '%s'",
    contexts: ["selection"],
    onclick: function (info, tab) {
        var searchText = info.selectionText;
        chrome.tabs.create({ url: `https://www.google.com/search?q=${searchText}` });
    }
});

上述代码在用户右键选择文本时，添加一个 "Search Google for '% s'" 的菜单选项，点击后将在新标签页中搜索所选文本。

2.2.7 chrome.notifications：桌面通知的发送者

用途：向用户发送系统级通知（需权限）。

示例：

在 manifest.json 中添加权限：

json

{
    "permissions": ["notifications"]
}

在后台脚本中发送通知：

javascript

chrome.notifications.create('reminder', {
    type: 'basic',
    title: '提醒',
    message: '该做某事啦！',
    iconUrl: 'icon.png'
});

上述代码将发送一个简单的桌面通知。

三、插件开发实战

3.1 "Hello World" 插件：插件开发初体验

3.1.1 创建项目结构

首先，创建一个名为HelloWorld的文件夹，作为插件项目的根目录。在该文件夹下，再创建一个popup文件夹。项目结构如下：

plaintext

HelloWorld/
├── popup/

图片可以从 iconfont 等图标库下载，准备好三种不同尺寸的图标：icon16.png、icon48.png和icon128.png，并将它们放置在HelloWorld文件夹中。

3.1.2 编写 manifest.json

在HelloWorld文件夹中创建manifest.json文件，并添加以下内容：

json

{
    "manifest_version": 3,
    "name": "Hello Extensions",
    "description": "Base Level Extension",
    "version": "1.0",
    "action": {
        "default_popup": "popup/popup.html",
        "default_icon": {
            "16": "icon16.png",
            "48": "icon48.png",
            "128": "icon128.png"
        }
    }
}

此manifest.json文件声明了插件的基本信息，包括插件规范版本、名称、描述、版本和图标，同时通过action字段指定了点击插件图标后弹出的窗口为popup/popup.html。

3.1.3 构建 popup 页面

在popup文件夹中创建popup.html文件，内容如下：

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <title>Hello World</title>
    <link rel="stylesheet" href="popup.css">
</head>

<body>
    <h1>Hello World!</h1>
    <script src="popup.js"></script>
</body>

</html>

接着，在popup文件夹中创建popup.css文件，添加简单的样式：

css

body {
    width: 200px;
    text - align: center;
    font - family: Arial, sans - serif;
}

h1 {
    color: #333;
}

此时，一个简单的 "Hello World" 插件已编写完成。

3.1.4 加载与测试插件

在浏览器新标签页中输入chrome://extensions/，或者通过工具栏打开扩展程序页面。点击开发者模式旁边的切换开关，启用开发者模式。点击 "加载已解压缩的文件" 按钮，选择HelloWorld文件夹。安装完插件后，在工具栏点击插件图标，即可看到弹出的 "Hello World!" 界面。

3.2 内容脚本实战：为网页添加自定义元素

3.2.1 项目结构搭建

创建一个新的项目文件夹，例如ContentScriptDemo。在该文件夹下，创建content.js文件和manifest.json文件。项目结构如下：

plaintext

ContentScriptDemo/
├── content.js
├── manifest.json

3.2.2 配置 manifest.json

在manifest.json文件中添加以下内容：

json

{
    "manifest_version": 3,
    "name": "Content Script Example",
    "description": "Add custom element to web pages",
    "version": "1.0",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ]
}

上述配置通过content_scripts字段指定了content.js脚本将在所有网址的页面中执行。

3.2.3 编写内容脚本 content.js

在content.js文件中编写如下代码：

javascript

// 创建一个新的div元素
var newDiv = document.createElement('div');
newDiv.style.color ='red';
newDiv.style.fontSize = '20px';
newDiv.textContent = '这是插件添加的自定义内容';

// 将新元素添加到页面body中
document.body.appendChild(newDiv);

该脚本会在页面的body中插入一个红色、字体大小为 20px 的文本内容 "这是插件添加的自定义内容"。

3.2.4 测试内容脚本效果

按照前面介绍的方法，在 Chrome 浏览器中加载已解压缩的ContentScriptDemo插件。刷新任意网页，即可看到页面中添加了自定义的元素。

3.3 使用 Service Worker 实现定时通知

3.3.1 项目结构规划

创建一个名为ServiceWorkerNotification的项目文件夹。在该文件夹下，创建service - worker.js、manifest.json文件，项目结构如下：

plaintext

ServiceWorkerNotification/
├── service - worker.js
├── manifest.json

3.3.2 配置 manifest.json 支持 Service Worker

在manifest.json文件中添加如下内容：

json

{
    "manifest_version": 3,
    "name": "Service Worker Notification",
    "description": "Send定时通知using Service Worker",
    "version": "1.0",
    "background": {
        "service_worker": "service - worker.js"
    },
    "permissions": ["notifications"]
}

这里通过background字段指定了后台运行的 Service Worker 脚本为service - worker.js，并声明了notifications权限用于发送通知。

3.3.3 编写 Service Worker 代码实现定时通知

在service - worker.js文件中编写如下代码：

javascript

self.addEventListener('install', function (event) {
    event.waitUntil(
        self.registration.showNotification('插件已安装', {
            body: '感谢安装本插件！'
        })
    );
});

self.addEventListener('activate', function (event) {
    event.waitUntil(
        self.registration.showNotification('插件已激活', {
            body: '插件已激活，开始提供服务。'
        })
    );
});

// 每小时发送一次通知
setInterval(function () {
    self.registration.showNotification('定时提醒', {
        body: '一小时过去了，休息一下吧！'
    });
}, 60 * 60 * 1000);

上述代码在插件安装和激活时会发送通知，并且每小时发送一次定时提醒通知。

3.3.4 加载插件并验证定时通知功能

在 Chrome 浏览器中加载已解压缩的ServiceWorkerNotification插件。插件安装后，会立即收到安装通知，激活时会收到激活通知，之后每小时会收到一次定时提醒通知，验证了 Service Worker 实现定时通知的功能。

四、插件的测试与调试

4.1 利用 Chrome 开发者工具进行调试

4.1.1 打开插件调试界面

在 Chrome 浏览器中，进入chrome://extensions/页面，确保已启用开发者模式。找到要调试的插件，点击插件卡片上的 "详情" 按钮。在插件详情页面中，会看到 "检查视图" 选项，点击 "background page" 对应的 "检查" 按钮，可打开后台脚本的调试界面；如果插件有弹出窗口，点击 "popup" 对应的 "检查" 按钮，可调试弹出窗口的代码。

4.1.2 调试技巧与常用功能

• 设置断点：在调试界面的代码编辑器中，点击代码行号旁边的空白处，即可设置断点。当代码执行到断点处时，会暂停执行，此时可以查看变量的值、单步执行代码等。
• 查看控制台输出：在调试界面的控制台中，可以查看插件运行过程中输出的日志信息。通过console.log()等方法输出的内容会显示在此