# 谷歌浏览器插件开发详细教程
## 目录
1. [插件概述](#插件概述)
2. [开发环境配置](#开发环境配置)
3. [插件基本结构](#插件基本结构)
4. [核心组件详解](#核心组件详解)
5. [常用API](#常用api)
6. [实战案例](#实战案例)
7. [调试与发布](#调试与发布)
---
## 1. 插件概述
### 1.1 什么是Chrome扩展程序
Chrome扩展程序是基于Web技术（HTML、CSS、JavaScript）构建的小程序，用于增强Chrome浏览器的功能。
### 1.2 扩展程序类型
- **浏览器操作扩展**：在工具栏添加图标
- **页面操作扩展**：针对特定页面生效
- **内容脚本扩展**：修改网页内容
- **开发工具扩展**：扩展开发者工具
- **主题扩展**：改变浏览器外观
### 1.3 扩展程序限制
- 无法访问浏览器核心功能
- 遵循同源策略
- 需要明确的权限声明
---
## 2. 开发环境配置
### 2.1 必要工具
- **Chrome浏览器**：72+版本
- **代码编辑器**：VS Code、Sublime等
- **基础前端知识**：HTML、CSS、JavaScript
### 2.2 开发模式开启
1. 打开Chrome浏览器
2. 访问 `chrome://extensions/`
3. 开启右上角"开发者模式"
---
## 3. 插件基本结构
### 3.1 最小化结构
```
my-extension/
├── manifest.json # 配置文件
├── icon.png # 扩展图标
├── popup.html # 弹出页面
└── popup.js # 弹出页面脚本
```
### 3.2 manifest.json 详解
```json
{
"manifest_version": 3,
"name": "我的扩展程序",
"version": "1.0.0",
"description": "扩展程序描述",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"action": {
"default_popup": "popup.html",
"default_title": "点击查看详情",
"default_icon": {
"16": "icons/icon16.png",
"32": "icons/icon32.png"
}
},
"permissions": [
"activeTab",
"storage",
"scripting"
],
"host_permissions": [
"https://*.example.com/*"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["https://*.example.com/*"],
"js": ["content.js"],
"css": ["content.css"]
}
],
"web_accessible_resources": [{
"resources": ["injected.js"],
"matches": [""]
}]
}
```
---
## 4. 核心组件详解
### 4.1 后台脚本 (Background Script)
**Manifest V3 使用 Service Worker**
```javascript
// background.js
chrome.runtime.onInstalled.addListener(() => {
console.log('扩展已安装');
});
// 监听消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === 'getData') {
sendResponse({ data: '处理后的数据' });
}
return true; // 保持消息通道开放
});
// 监听浏览器标签页更新
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === 'complete') {
// 页面加载完成
}
});
```
### 4.2 内容脚本 (Content Script)
```javascript
// content.js
// 直接注入到网页上下文中
// 修改页面内容
document.body.style.backgroundColor = '#f0f0f0';
// 监听来自popup或background的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === 'extractText') {
const text = document.body.innerText;
sendResponse({ text: text.substring(0, 100) });
}
});
// 向页面注入自定义脚本
const script = document.createElement('script');
script.src = chrome.runtime.getURL('injected.js');
document.head.appendChild(script);
```
### 4.3 弹出页面 (Popup)
```html
我的扩展
```
```javascript
// popup.js
document.getElementById('actionBtn').addEventListener('click', async () => {
// 获取当前标签页
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
// 发送消息给内容脚本
const response = await chrome.tabs.sendMessage(tab.id, {
action: 'getPageInfo'
});
document.getElementById('result').textContent =
`页面标题: ${response.title}`;
});
// 使用存储API
chrome.storage.local.set({ key: 'value' }, () => {
console.log('数据已保存');
});
chrome.storage.local.get(['key'], (result) => {
console.log('读取的数据:', result.key);
});
```
---
## 5. 常用API
### 5.1 消息传递
```javascript
// 发送消息
chrome.runtime.sendMessage(
{ action: 'doSomething', data: 'some data' },
response => console.log('响应:', response)
);
// 标签页内通信
chrome.tabs.sendMessage(tabId, message, callback);
```
### 5.2 存储API
```javascript
// 本地存储
chrome.storage.local.set({ key: 'value' });
chrome.storage.local.get(['key'], result => {});
// 同步存储（跨设备同步）
chrome.storage.sync.set({ settings: { theme: 'dark' } });
// 监听存储变化
chrome.storage.onChanged.addListener((changes, area) => {
for (let key in changes) {
console.log(`${key} 从 ${changes[key].oldValue} 变为 ${changes[key].newValue}`);
}
});
```
### 5.3 标签页API
```javascript
// 查询标签页
chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
const currentTab = tabs[0];
});
// 创建新标签页
chrome.tabs.create({ url: 'https://example.com' });
// 更新标签页
chrome.tabs.update(tabId, { active: true });
// 执行脚本
chrome.scripting.executeScript({
target: { tabId: tabId },
func: () => {
// 在页面中执行的代码
}
});
```
### 5.4 通知API
```javascript
chrome.notifications.create('id', {
type: 'basic',
iconUrl: 'icon.png',
title: '通知标题',
message: '通知内容'
});
```
---
## 6. 实战案例
### 案例1：网页内容提取器
**manifest.json**
```json
{
"manifest_version": 3,
"name": "网页内容提取器",
"version": "1.0",
"permissions": ["activeTab", "scripting"],
"action": {
"default_popup": "popup.html"
}
}
```
**popup.html**
```html
内容提取
```
**popup.js**
```javascript
document.getElementById('extract').addEventListener('click', async () => {
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
const results = await chrome.scripting.executeScript({
target: { tabId: tab.id },
func: () => {
// 提取页面所有链接
const links = Array.from(document.querySelectorAll('a'))
.map(a => ({
text: a.textContent.trim(),
href: a.href
}))
.filter(link => link.text && link.href);
return {
title: document.title,
links: links.slice(0, 10) // 前10个链接
};
}
});
const output = document.getElementById('output');
output.innerHTML = `
${results[0].result.title}
${results[0].result.links.map(link =>
`- ${link.text}
`
).join('')}
`;
});
```
### 案例2：自定义右键菜单
**background.js**
```javascript
// 创建右键菜单
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: "searchGoogle",
title: "使用Google搜索 '%s'",
contexts: ["selection"]
});
chrome.contextMenus.create({
id: "saveNote",
title: "保存选中文本",
contexts: ["selection"]
});
});
// 处理菜单点击
chrome.contextMenus.onClicked.addListener((info, tab) => {
switch (info.menuItemId) {
case "searchGoogle":
const query = encodeURIComponent(info.selectionText);
chrome.tabs.create({
url: `https://www.google.com/search?q=${query}`
});
break;
case "saveNote":
chrome.storage.local.get(['notes'], (result) => {
const notes = result.notes || [];
notes.push({
text: info.selectionText,
url: tab.url,
timestamp: new Date().toISOString()
});
chrome.storage.local.set({ notes });
});
break;
}
});
```
---
## 7. 调试与发布
### 7.1 调试技巧
1. **弹出页面调试**：右键点击扩展图标 → "检查弹出内容"
2. **后台脚本调试**：进入扩展管理页面 → 点击"service worker"链接
3. **内容脚本调试**：在网页开发者工具 → Sources → Content scripts
4. **网络请求查看**：开发者工具 → Network → 筛选扩展请求
### 7.2 控制台日志
```javascript
// 不同组件的日志查看位置
console.log('Background:', message); // 后台脚本控制台
console.log('Content:', data); // 网页控制台
console.log('Popup:', info); // 弹出页面控制台
```
### 7.3 发布到Chrome网上应用店
1. **准备工作**
- 准备各种尺寸的图标（16x16, 48x48, 128x128, 512x512）
- 创建应用商店列表截图（1280x800或640x400）
- 撰写详细描述和宣传图
2. **打包扩展**
- 打开 `chrome://extensions/`
- 点击"打包扩展程序"
- 生成.crx文件和.pem私钥文件
3. **提交审核**
- 访问[Chrome开发者仪表板](https://chrome.google.com/webstore/devconsole/)
- 支付一次性注册费$5
- 上传ZIP包并填写信息
- 等待审核（通常需要几天）
### 7.4 常见问题解决
1. **权限被拒绝**
- 检查manifest.json中的permissions
- 确保host_permissions正确配置
2. **消息传递失败**
- 检查组件是否已正确加载
- 使用try-catch捕获错误
3. **存储数据丢失**
- 使用chrome.storage替代localStorage
- 重要数据定期备份
4. **性能优化**
- 内容脚本使用延迟加载
- 避免频繁的storage操作
- 及时清理事件监听器
---
## 附录：实用资源
### 官方文档
- [Chrome扩展开发文档](https://developer.chrome.com/docs/extensions/)
- [Manifest V3迁移指南](https://developer.chrome.com/docs/extensions/mv3/intro/)
- [API参考手册](https://developer.chrome.com/docs/extensions/reference/)
### 开发工具
- [Chrome扩展样板](https://github.com/GoogleChrome/chrome-extensions-samples)
- [扩展开发工具](https://chrome.google.com/webstore/detail/chrome-extension-source-v/jifpbeccnghkjeaalbbjmodiffmgedin)
- [CRX Viewer](https://chrome.google.com/webstore/detail/chrome-extension-source-v/jifpbeccnghkjeaalbbjmodiffmgedin)
### 学习建议
1. 从简单示例开始，逐步增加复杂度
2. 充分理解Manifest V3的变化
3. 注意安全性，避免恶意代码注入
4. 考虑用户隐私，最小化权限请求
5. 测试不同网站和场景的兼容性
---
**提示**：开发过程中，经常访问 `chrome://extensions/` 页面进行加载、重载和调试。使用`console.log()`进行调试是最高效的方式之一。祝您开发顺利！