通过trae开发你的第一个Chrome扩展插件
文章目录
- 前言：为什么现在要学Chrome插件开发？
- 一、Chrome插件开发基础概念
- 1. 基础必备字段
- 2. 插件界面相关配置
- 3. 权限（permissions）和域名访问限制
- 4. 背景脚本
- 5. 内容脚本（content_scripts）
- 3. 编写 `background.js`
- 4. 编写 `content.js` （注入网页，改变页面背景）
- 5. 编写 `popup.html` 和 `popup.js`
- 三、实战演示：简单插件实现页面背景色切换
- 1. 创建manifest.json文件
- 2. 创建popup.html文件
- 3. 创建popup.js文件
- 4. 加载和测试插件
- 四、如何调试和发布你的插件？
- 五、实战技巧：权限申请和消息通信
- 1. 权限申请原则
- 2. 消息通信示例
- 3. 自定义脚本注入
- 六、主流功能所需要的Chrome API
- 典型功能示例
- 七、总结
前言：为什么现在要学Chrome插件开发？
随着浏览器功能日益丰富，Chrome插件成为提升工作效率和用户体验的重要工具。无论是自动化任务、网页内容定制，还是调试辅助，Chrome插件都能轻松实现。同样对于Java后台开发者来说，掌握Chrome插件开发，不仅能增强前后端协同能力，也能为自己的项目打造专属工具。
本文将带你从零开始，快速搭建一个简单但实用的Chrome插件，介绍Manifest V3关键配置、权限申请、消息通信等核心知识点，助你入门并拓展更多可能。
一、Chrome插件开发基础概念
- Manifest文件：插件配置核心，描述插件信息、权限、入口文件等。
- 背景脚本（background/service worker）：负责插件生命周期管理和事件监听。
- 内容脚本（content scripts）：注入网页，操作DOM，实现交互。
- 弹出页面（popup）：点击插件图标弹出的界面。
- 权限（permissions）：申请访问特定API和网页资源权限。
manifest.json是Chrome插件的配置中心，描述插件的基本信息、权限、入口文件等。Chrome插件从Manifest V2升级到V3，带来了服务工作线程（Service Worker）作为后台脚本的新机制，安全性和性能均有提升。
1. 基础必备字段
| 配置项 | 说明 |
|---|---|
manifest_version | 必填，当前最新版本是3，表示采用Manifest V3规范 |
name | 插件名称 |
version | 插件版本号，必须符合语义化格式（如1.0.0） |
description | 插件描述 |
2. 插件界面相关配置
| 配置项 | 说明 | 备注 |
|---|---|---|
action | 配置插件图标点击后的弹出窗口（Popup） | 通过 default_popup 指定HTML文件 |
sidebar_action | 新增配置，定义浏览器侧边栏面板 | 支持侧边栏功能，需Chrome 相关版本支持 |
示例：
"action": {"default_popup": "popup.html","default_icon": "icon.png"
},
"sidebar_action": {"default_page": "sidebar.html","default_icon": "icon_sidebar.png"
}
小提示：弹窗适合简短交互，侧边栏更适合持续操作的工具型插件，比如笔记、任务管理等。
3. 权限（permissions）和域名访问限制
插件需要声明权限以访问浏览器API或网站数据。权限声明越精细，越安全，也越易获用户信任。
| 权限类型 | 作用 |
|---|---|
"tabs" | 访问浏览器标签页信息 |
"scripting" | 动态注入脚本或样式 |
"storage" | 访问插件本地存储 |
"webRequest" | 监听和修改HTTP请求 |
"activeTab" | 只对当前激活标签页短期授权 |
域名限制示例：
"host_permissions": ["https://www.example.com/*","http://localhost/*"
]
只有声明的域名匹配的页面，插件才能注入脚本或访问数据，有效限制了权限范围。
4. 背景脚本
Manifest V3背景页改为Service Worker，负责监听事件、管理插件生命周期。
"background": {"service_worker": "background.js"
}
5. 内容脚本（content_scripts）
声明要注入网页的JS或CSS文件，自动注入或指定页面匹配。
"content_scripts": [{"matches": ["https://*.example.com/*"],"js": ["content.js"],"css": ["style.css"],"run_at": "document_idle"}
]
matches：注入目标页面，支持通配符run_at：注入时机，常用document_start/document_idle
以下是一个简单的示例：
{"manifest_version": 3,"name": "My First Chrome Extension","version": "1.0","description": "一个简单的Chrome插件示例","permissions": ["tabs", "scripting"],"background": {"service_worker": "background.js"},"action": {"default_popup": "popup.html","default_icon": {"16": "icon16.png","48": "icon48.png","128": "icon128.png"}},"content_scripts": [{"matches": ["https://*/*", "http://*/*"],"js": ["content.js"]}]
}
3. 编写 background.js
chrome.action.onClicked.addListener((tab) => {chrome.scripting.executeScript({target: { tabId: tab.id },files: ['content.js']});
});
4. 编写 content.js （注入网页，改变页面背景）
document.body.style.backgroundColor = 'lightyellow';
alert('页面背景已被插件修改！');
5. 编写 popup.html 和 popup.js
popup.html：
<!DOCTYPE html>
<html>
<head><title>插件弹出</title></head>
<body><h3>欢迎使用插件！</h3><button id="changeColor">改变页面背景色</button><script src="popup.js"></script>
</body>
</html>
popup.js：
document.getElementById('changeColor').addEventListener('click', () => {chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {chrome.scripting.executeScript({target: { tabId: tabs[0].id },function: () => document.body.style.backgroundColor = '#a8dadc'});});
});
三、实战演示：简单插件实现页面背景色切换
如果使用Trae，你只需要一句话来生成下面项目：
请你基于最新的Manifest V3协议，开发一个可以切换标签页背景颜色的chrome插件
1. 创建manifest.json文件
{"manifest_version": 3,"name": "标签页背景颜色切换器","version": "1.0","description": "一个可以切换标签页背景颜色的Chrome插件","permissions": ["activeTab","scripting"],"action": {"default_popup": "popup.html"}
}
2. 创建popup.html文件
<!DOCTYPE html>
<html>
<head><style>body {width: 200px;padding: 10px;font-family: Arial, sans-serif;}.color-btn {width: 40px;height: 40px;margin: 5px;border: none;border-radius: 50%;cursor: pointer;}.color-grid {display: flex;flex-wrap: wrap;justify-content: center;}</style>
</head>
<body><h3>选择背景颜色</h3><div class="color-grid"><button class="color-btn" style="background-color: #ffffff"></button><button class="color-btn" style="background-color: #ffcccc"></button><button class="color-btn" style="background-color: #ccffcc"></button><button class="color-btn" style="background-color: #ccccff"></button><button class="color-btn" style="background-color: #ffffcc"></button><button class="color-btn" style="background-color: #ffccff"></button><button class="color-btn" style="background-color: #ccffff"></button><button class="color-btn" style="background-color: #000000"></button></div><script src="popup.js"></script>
</body>
</html>
3. 创建popup.js文件
// 为每个颜色按钮添加点击事件
document.querySelectorAll('.color-btn').forEach(button => {button.addEventListener('click', async () => {// 获取选中的颜色const color = button.style.backgroundColor;// 获取当前活动标签页const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });// 注入脚本到当前标签页修改背景颜色chrome.scripting.executeScript({target: { tabId: tab.id },function: setBackgroundColor, // 要执行的函数args: [color] // 传递给函数的参数});});
});// 用于设置页面背景颜色的函数
function setBackgroundColor(color) {document.body.style.backgroundColor = color;// 尝试设置所有iframe的背景色document.querySelectorAll('iframe').forEach(iframe => {try {iframe.contentDocument.body.style.backgroundColor = color;} catch (e) {// 跨域iframe无法访问，忽略错误}});
}
4. 加载和测试插件
- 打开Chrome浏览器，进入
chrome://extensions/ - 开启右上角的"开发者模式"
- 点击"加载已解压的扩展程序"
- 选择您的插件目录(
d:\project\plugin) - 插件将被加载，您可以在工具栏看到它的图标
- 点击图标，选择颜色来改变当前标签页的背景颜色
以上就是完整的Chrome插件开发过程。这个插件使用Manifest V3架构，通过scriptingAPI注入脚本到当前标签页来修改背景颜色。
四、如何调试和发布你的插件？
- 打开 Chrome 浏览器，进入
chrome://extensions/ - 开启开发者模式
- 点击“加载已解压的扩展程序”，选择项目目录
- 测试功能，观察控制台报错或日志
- 通过Chrome Web Store发布插件，填写详细信息，上传打包好的zip包
五、实战技巧：权限申请和消息通信
1. 权限申请原则
- 只申请需要的权限，避免滥用造成安全隐患
- 动态请求权限，提高用户接受率
2. 消息通信示例
popup.js 向 background.js 发送消息：
chrome.runtime.sendMessage({ action: 'getData' }, (response) => {console.log('收到后台返回数据:', response.data);
});
background.js 监听消息并响应：
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {if(request.action === 'getData') {sendResponse({ data: '这里是后台返回的信息' });}return true; // 表示异步响应
});
3. 自定义脚本注入
除了content_scripts静态声明注入，Manifest V3提供了强大的scripting API，支持动态注入脚本，灵活控制注入时机和页面范围。
chrome.scripting.executeScript({target: { tabId: tab.id },files: ['custom-inject.js']
});
这样可以基于用户行为或后台逻辑按需注入，避免插件启动时无差别注入，提高性能和安全性。如果想要拦截网站请求的响应结果，这将很有效。
六、主流功能所需要的Chrome API
在Chrome插件开发中，不同功能会依赖不同的Chrome扩展API，掌握这些API有助于快速实现功能需求。下面列举几类主流插件功能及常用API：
| 功能类型 | 相关Chrome API | 简要说明 |
|---|---|---|
| 标签页管理 | chrome.tabs | 获取、创建、更新、关闭标签页，操作页面URL和内容 |
| 脚本注入 | chrome.scripting | 动态注入JS和CSS到指定页面 |
| 存储数据 | chrome.storage | 本地存储和同步存储数据，持久保存用户配置和状态 |
| 网络请求拦截 | chrome.webRequest | 监听和修改HTTP请求和响应（除响应体之外），适合广告屏蔽、代理插件 |
| 浏览器行为控制 | chrome.browserAction / chrome.action | 控制工具栏按钮，弹窗展示，图标动态切换 |
| 消息通信 | chrome.runtime 和 chrome.tabs | 实现后台脚本、内容脚本、弹窗之间的异步消息传递 |
| 通知提示 | chrome.notifications | 显示系统通知 |
| 权限管理 | chrome.permissions | 动态请求和检查权限，提升安全性 |
| 窗口管理 | chrome.windows | 创建、管理浏览器窗口 |
| 历史记录访问 | chrome.history | 读取和管理浏览器访问历史 |
| Cookies操作 | chrome.cookies | 读取、设置和删除Cookies |
| 书签管理 | chrome.bookmarks | 操作浏览器书签 |
典型功能示例
- 广告屏蔽插件：主要用到
webRequest监听和阻断请求。 - 页面样式美化：利用
scripting动态注入CSS或JS。 - 自动填写表单：通过
tabs获取当前页面信息，配合storage保存用户数据。 - 标签页管理工具：调用
tabs和windows管理打开的网页和窗口。
七、总结
- Chrome插件开发基于简单的HTML/JS/CSS技术，门槛低，扩展性强
- 掌握Manifest V3规范，适配最新Chrome架构
- 合理设计权限和消息机制，提升用户体验和安全性
- 开发调试周期短，快速迭代上线
快动手打造你的第一个Chrome插件吧！你还有哪些插件功能想实现？欢迎留言交流。