以下是谷歌浏览器插件开发与调试完整教程：
1. 创建项目文件夹
- 在电脑中新建一个文件夹，例如命名为“my-extension”，用于存放插件的所有文件。
2. 编写manifest.json文件
- 在项目文件夹中创建一个名为“manifest.json”的文件，这是插件的配置文件，必须包含以下内容：
json
{
"manifest_version": 3,
"name": "我的第一个扩展",
"version": "1.0",
"description": "一个简单的Chrome扩展示例",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"action": {
"default_popup": "popup.",
"default_icon": "icons/icon16.png"
}
}
- 确保图标文件（如icon16.png、icon48.png等）放在“icons”文件夹中。
3. 创建弹出页面
- 在项目文件夹中创建“popup.”文件，编写简单的HTML代码，例如：
<>
body { width: 200px; padding: 10px; font-family: Arial, sans-serif; }
button { background: 4285f4; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
我的扩展
<script src="popup.js">
- 创建“popup.js”文件，添加按钮点击事件：
javascript
document.getElementById('myButton').addEventListener('click', () => {
alert('你好，Chrome扩展世界!');
});
4. 加载插件到浏览器
- 打开Chrome浏览器，在地址栏输入`chrome://extensions/`，进入扩展管理页面。
- 开启“开发者模式”，点击“加载已解压的扩展程序”，选择项目文件夹。
- 此时浏览器右上角会出现插件图标，点击可查看弹出页面。
5. 开发核心功能
- 内容脚本：在`manifest.json`中添加内容脚本配置：
json
"content_scripts": [
{
"matches": ["
"],
"js": ["content.js"],
"run_at": "document_end"
}
]
- 创建`content.js`文件，例如修改网页段落颜色：
javascript
document.addEventListener('DOMContentLoaded', () => {
const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => {
p.style.color = 'blue';
});
});
- 后台脚本：在`manifest.json`中添加后台脚本配置：
json
"background": {
"service_worker": "background.js"
},
"permissions": ["storage"]
- 创建`background.js`文件，例如监听安装事件并存储数据：
javascript
chrome.runtime.onInstalled.addListener(() => {
console.log('扩展已安装');
});
chrome.storage.local.set({ key: 'value' }, () => {
console.log('数据已存储');
});
6. 调试插件
- 弹出窗口：右键点击插件图标，选择“检查”，可调试弹出页面的HTML和JS。
- 内容脚本：打开任意网页，按`F12`进入开发者工具，在Console中查看内容脚本日志。
- 后台脚本：在`chrome://extensions/`页面，点击插件下方的“背景页”链接，进入后台脚本调试界面。
7. 发布插件
- 在Chrome开发者仪表盘注册账号（需支付$5费用）。
- 打包插件文件夹为.zip文件，上传至Chrome应用商店。
- 等待审核通过后，插件即可上线。
请注意，以上内容仅供参考，具体使用时请根据实际情况进行调整。
