本教程适合有基本HTML、CSS、JavaScript知识的开发者。我们将从最简单的插件开始， 逐步介绍Chrome插件开发的核心概念和实践技巧。
Chrome插件基础概念
Chrome插件（Chrome Extension）是运行在Chrome浏览器中的小程序， 可以增强浏览器功能、修改网页内容、与外部服务交互等。 插件使用Web技术（HTML、CSS、JavaScript）开发，具有丰富的API支持。
插件的主要组成部分：
Manifest文件
插件的配置文件，定义基本信息和权限
Background Scripts
后台运行的脚本，处理事件和逻辑
Content Scripts
注入到网页中的脚本，可操作DOM
Popup/Options页面
用户界面，提供交互功能
创建第一个插件
让我们从一个简单的"Hello World"插件开始。首先创建一个文件夹，然后添加以下文件：
1. 创建manifest.json文件
这是插件的核心配置文件
{
"manifest_version": 3,
"name": "我的第一个插件",
"version": "1.0",
"description": "一个简单的Chrome插件示例",
"permissions": ["activeTab"],
"action": {
"default_popup": "popup.html",
"default_title": "点击我"
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}2. 创建popup.html文件
插件的弹出界面
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 300px;
padding: 20px;
font-family: Arial, sans-serif;
}
button {
background: #4285f4;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Hello World!</h2>
<p>这是我的第一个Chrome插件</p>
<button id="clickMe">点击我</button>
<script src="popup.js"></script>
</body>
</html>3. 创建popup.js文件
处理用户交互的JavaScript代码
document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('clickMe');
button.addEventListener('click', function() {
// 获取当前活动标签页
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
// 在当前页面执行脚本
chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
function: showAlert
});
});
});
});
function showAlert() {
alert('Hello from Chrome Extension!');
}安装和测试插件
- 1打开Chrome浏览器，访问
chrome://extensions/ - 2启用右上角的"开发者模式"
- 3点击"加载已解压的扩展程序"
- 4选择包含插件文件的文件夹
- 5插件安装成功后，工具栏会出现插件图标
Manifest V3 重要概念
Chrome插件目前使用Manifest V3版本，相比V2有重要变化：
Service Workers
替代了Background Pages，提供更好的性能和安全性。 用于处理事件和后台任务。
Action API
统一了Browser Action和Page Action， 简化了工具栏按钮的配置。
Host Permissions
网站访问权限从permissions移到host_permissions， 提供更精细的权限控制。
Scripting API
新的脚本注入API，替代了tabs.executeScript， 提供更安全的代码执行方式。
常用API介绍
chrome.tabs API
操作浏览器标签页
// 获取当前活动标签页
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
console.log(tabs[0]);
});
// 创建新标签页
chrome.tabs.create({url: 'https://example.com'});
// 更新标签页URL
chrome.tabs.update(tabId, {url: 'https://newurl.com'});chrome.storage API
存储插件数据
// 存储数据
chrome.storage.sync.set({key: 'value'}, () => {
console.log('数据已保存');
});
// 读取数据
chrome.storage.sync.get(['key'], (result) => {
console.log('读取到的值:', result.key);
});开发技巧：使用Chrome DevTools调试插件。 右键点击插件图标选择"检查弹出内容"可以调试popup页面， 在chrome://extensions/页面点击"背景页"可以调试Service Worker。
发布插件
开发完成后，可以将插件发布到Chrome Web Store：
- 1注册Chrome Web Store开发者账号（需要支付5美元注册费）
- 2准备插件图标、截图、描述等资料
- 3将插件文件打包成ZIP格式
- 4在开发者控制台上传并提交审核
学习资源推荐
- • Chrome Extensions官方文档：developer.chrome.com/docs/extensions/
- • Chrome Extension Samples：github.com/GoogleChrome/chrome-extensions-samples
- • Manifest V3迁移指南：developer.chrome.com/docs/extensions/migrating/
- • Chrome DevTools Extensions：developer.chrome.com/docs/devtools/