您的位置：首页 > 谷歌浏览器插件开发入门及实例教程
谷歌浏览器插件开发入门及实例教程
来源：谷歌浏览器官网
时间：2025-06-16
一、开发前准备
1. 熟悉技术基础：需要掌握HTML、CSS和JavaScript等前端技术，这些是构建插件用户界面和实现交互功能的基础。例如，使用HTML定义插件的页面结构，CSS进行样式美化，JavaScript处理用户操作和动态逻辑。
2. 了解Chrome扩展程序架构：Chrome扩展程序主要由以下几个部分组成：
- manifest.json文件：这是扩展程序的配置文件，包含了扩展的基本信息、权限声明、所需资源等。例如，声明扩展的名称、版本、描述，以及请求访问特定网页的权限等。
- 背景脚本（Background Scripts）：用于处理扩展在后台运行的逻辑，如监听浏览器事件、与服务器通信等。在Manifest V3中，背景脚本通常以服务工作者（Service Worker）的形式存在。
- 内容脚本（Content Scripts）：注入到网页中的脚本，可以与网页的DOM进行交互，实现对网页内容的修改、提取等操作。
- 弹出页面（Popup Page）/选项页面（Options Page）：提供用户交互的界面，通常以HTML和CSS构建，用户点击扩展图标时会弹出该页面，用于展示信息或接收用户输入。
二、开发步骤
1. 创建项目文件夹：在本地计算机上创建一个用于存放扩展程序文件的文件夹，例如命名为“my_chrome_extension”。
2. 编写manifest.json文件：在项目文件夹中创建一个名为“manifest.json”的文件，并按照Chrome扩展程序的规范填写配置信息。例如，一个基本的manifest.json文件可能如下所示：
json
{
"manifest_version": 3,
"name": "My Chrome Extension",
"version": "1.0",
"description": "A simple Chrome extension for demonstration.",
"permissions": [
"tabs"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.",
"default_icon": "icon.png"
}
}
在这个文件中，声明了扩展的名称、版本、描述、所需权限（这里是对标签页的访问权限），指定了背景脚本文件为“background.js”，以及弹出页面为“popup.”，并设置了默认图标为“icon.png”。
3. 编写背景脚本（可选）：如果扩展需要在后台处理一些逻辑，如监听标签页的打开、关闭事件等，可以创建一个名为“background.js”的文件，并在其中编写相应的JavaScript代码。例如：
javascript
// background.js
chrome.tabs.onCreated.addListener(function(tab) {
console.log("A new tab was created with URL: " + tab.url);
});
这段代码会在每次创建新标签页时，在后台控制台输出新标签页的URL。
4. 创建弹出页面：在项目文件夹中创建一个名为“popup.”的文件，用于定义扩展的弹出页面的结构和样式。可以使用HTML和CSS来设计页面，例如：
<>
body {
font-family: Arial, sans-serif;
padding: 10px;
}
hello {
color: blue;
}
Hello, World!
<script src="popup.js">
同时，可以创建一个名为“popup.js”的文件，用于处理弹出页面的交互逻辑，例如：
javascript
// popup.js
document.getElementById("hello").addEventListener("click", function() {
alert("Hello button clicked!");
});
这段代码会为弹出页面中的“Hello, World!”文字添加一个点击事件，点击时弹出提示框。
5. 添加图标文件（可选）：如果需要在扩展中使用图标，可以将图标文件（如PNG格式的图片）放在项目文件夹中，并在manifest.json文件中指定图标路径。例如，将名为“icon.png”的图标文件放在项目文件夹中，manifest.json文件中的“default_icon”字段会自动引用该图标。
6. 加载扩展到Chrome浏览器：打开Chrome浏览器，进入扩展程序管理页面（可以通过在地址栏输入“chrome://extensions/”直接访问）。在页面右上角开启“开发者模式”，然后点击“加载已解压的扩展程序”按钮，选择之前创建的项目文件夹，即可将扩展程序加载到Chrome浏览器中进行测试。
三、实例教程：简单的网页标记插件
1. 功能需求：创建一个Chrome插件，当用户点击扩展图标时，能够将当前网页的文字颜色更改为红色，再次点击则恢复为原来的颜色。
2. 项目结构：
- my_chrome_extension/
- manifest.json
- background.js
- popup.
- popup.js
- icon.png（可选）
3. 代码实现：
- manifest.json文件内容如下：
json
{
"manifest_version": 3,
"name": "Simple Web Marker",
"version": "1.0",
"description": "A simple extension to mark web pages.",
"permissions": [
"activeTab",
"scripting"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.",
"default_icon": "icon.png"
}
}
在这个文件中，声明了扩展的名称、版本、描述，请求了对活动标签页（activeTab）的访问权限以及脚本执行权限（scripting）。指定了背景脚本文件为“background.js”，弹出页面为“popup.”，并设置了默认图标为“icon.png”。
- background.js文件内容如下：
javascript
// background.js
let isMarked = false;
chrome.action.onClicked.addListener(function(tab) {
if (isMarked) {
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: () => {
document.body.style.color = "";
}
});
isMarked = false;
} else {
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: () => {
document.body.style.color = "red";
}
});
isMarked = true;
}
});
这段代码会在扩展图标被点击时执行，根据当前是否已经标记（isMarked变量的值），通过`chrome.scripting.executeScript`方法向当前活动标签页注入脚本，更改网页文字颜色。如果是第一次点击，将文字颜色设置为红色，并将isMarked设置为true；再次点击时，将文字颜色恢复为空（即原来的颜色），并将isMarked设置为false。
- popup.文件内容如下（可选，如果不需要弹出页面显示其他内容，可以只保留基本结构）：
<>
Web Marker Extension
Click the icon to mark/unmark the web page.
这个文件定义了弹出页面的基本结构和内容，当用户点击扩展图标时会显示该页面。由于在这个简单的例子中，主要功能通过背景脚本实现，弹出页面的内容可以根据需要进行修改或扩展。
- 如果需要添加图标文件，可以将名为“icon.png”的图片文件放在项目文件夹中，它会在加载扩展时自动被引用。
4. 测试插件：按照上述步骤将扩展程序加载到Chrome浏览器中后，打开一个网页，然后点击Chrome浏览器工具栏上的扩展图标。第一次点击时，网页文字颜色应变为红色；再次点击时，文字颜色应恢复为原来的颜色，说明插件功能正常。
