(1)从零开发 Chrome 插件：构建你的第一个插件
（2）从零开发 Chrome 插件：实现 API 登录与本地存储功能
Chrome插件开发入门：从零构建你的第一个插件
引言
Chrome插件是增强浏览器功能的强大工具，它们可以修改网页内容、添加新功能，甚至创建完整的应用程序。本文将带你从零开始，开发一个简单的"Hello World"插件，帮助你了解Chrome插件开发的基本概念和流程。
什么是Chrome插件？
Chrome插件是用HTML、CSS和JavaScript编写的小型程序，可以扩展Chrome浏览器的功能。它们可以：
- 修改网页外观和内容
- 添加工具栏按钮和菜单
- 监听浏览器事件并作出响应
- 与网站API交互
- 存储和检索数据
开发环境准备
开发Chrome插件不需要特殊的工具，只需要：
- 一个文本编辑器（如VS Code、Sublime Text等）
- Chrome浏览器
- 基本的HTML、CSS和JavaScript知识
插件基本结构
一个Chrome插件包含以下文件：
manifest.json- 插件的核心配置文件*.html和*.js- 业务文件background.js- 插件的后台脚本（可选）content.js- 注入到网页中的脚本（可选）- 图标文件 - 插件在工具栏中的图标
创建Hello World插件
让我们从一个简单的"Hello World"插件开始。这个插件将：
- 显示在监听页面的左上一个按钮
- 点击按钮改变网页的背景色
首先，创建一个目录来存放插件文件，例如hello-world-extension。
1. manifest.json
这是插件的核心配置文件，定义了插件的基本信息和权限：
json
{
"manifest_version": 3,
"name": "Floating Button Extension",
"version": "1.0",
"description": "在页面左上角显示悬浮按钮的Chrome插件",
"icons": {
"16": "icons/icon.png"
},
"permissions": ["activeTab", "scripting", "storage"],
"content_scripts": [
{
"matches": [ "https://www.csdn.com/" ],
"js": ["content.js"],
"css": ["styles.css"]
}
],
"background": {
"service_worker": "background.js"
}
}3. 按钮显示样式文件styles.css
#floating-btn {
position: fixed;
top: 20px;
left: 20px;
z-index: 9999;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
padding: 8px 12px;
font-size: 14px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
#floating-btn:hover {
background-color: #45a049;
transform: scale(1.05);
}3. content.js
注入到网页中的脚本，负责修改网页内容：
javascript
// 创建悬浮按钮
function createFloatingButton() {
const button = document.createElement('button');
button.id = 'floating-btn';
button.innerHTML = '背景色';
button.title = '点击改变背景色';
// 添加到页面
document.body.appendChild(button);
// 点击事件
button.addEventListener('click', () => {
// 随机生成背景色
const colors = ['#f0f8ff', '#faebd7', '#f5f5dc', '#ffe4c4', '#e6e6fa'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
// 修改页面背景色
document.body.style.backgroundColor = randomColor;
// 存储颜色偏好
chrome.storage.sync.set({ backgroundColor: randomColor });
});
// 加载上次保存的颜色
chrome.storage.sync.get(['backgroundColor'], (result) => {
if (result.backgroundColor) {
document.body.style.backgroundColor = result.backgroundColor;
}
});
}
// 页面加载完成后创建按钮
window.addEventListener('load', createFloatingButton);
4. 图标文件
创建三个不同尺寸的图标文件（16x16、48x48和128x128像素），并放在icons目录下。你可以使用图像编辑工具创建简单的图标，或者从网上下载免费图标。
5. 插件管理文件background
javascript
// 监听插件安装或更新事件
chrome.runtime.onInstalled.addListener(() => {
console.log('悬浮按钮插件已安装/更新');
// 设置初始状态
chrome.storage.sync.set({ backgroundColor: null });
});加载和测试插件
- 打开Chrome浏览器，访问
chrome://extensions/ - 启用右上角的"开发者模式"
- 点击"加载未打包的扩展程序"
- 选择你创建的
hello-world-extension目录
现在，打开网页 https://www.csdn.com/
核心概念解析
-
manifest.json：
manifest_version: 必须为3（Chrome目前的版本）permissions: 指定插件需要的权限，如activeTab允许访问当前激活的标签页content_scripts: 指定需要注入到网页中的脚本
-
内容脚本：
- 运行在网页上下文中的JavaScript代码
- 可以访问和修改网页DOM
- 与插件的其他部分通过消息传递进行通信
总结
完成了一个简单Chrome插件的开发过程。点击按钮效果如图：
