Chrome 插件开发详解：manifest.json、popup.html 和 content.js 的作用与实现
下面我将完整拆分 关键词高亮 Chrome 插件 的代码，并详细解释每个文件的作用和实现逻辑。
1. manifest.json - 插件配置文件
这是 Chrome 插件的核心配置文件，定义插件的基本信息、权限和资源。
json
{
"manifest_version": 3,
"name": "关键词高亮插件",
"version": "1.0",
"description": "高亮网页中的指定关键词",
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"permissions": ["activeTab", "scripting"],
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
关键字段解析
| 字段 | 作用 | 示例值 |
|---|---|---|
manifest_version | 必须为 3（Manifest V3 是最新标准） | 3 |
name | 插件名称 | "关键词高亮插件" |
version | 版本号 | "1.0" |
action.default_popup | 点击插件图标时弹出的页面 | "popup.html" |
permissions | 声明插件需要的权限： - activeTab：访问当前标签页 - scripting：执行脚本 | ["activeTab", "scripting"] |
icons | 插件图标（不同尺寸） | "icon16.png" |
2. popup.html - 插件弹出窗口界面
用户在这里输入关键词并触发高亮操作。
html
<!DOCTYPE html>
<html>
<head>
<style>
body { width: 200px; padding: 10px; }
button { margin-top: 10px; }
</style>
</head>
<body>
<input type="text" id="keyword" placeholder="输入要搜索的关键词">
<input type="color" id="colorPicker" value="#FFFF00">
<button id="highlightBtn">高亮关键词</button>
<button id="clearBtn">清除高亮</button>
<script src="popup.js"></script>
</body>
</html>
关键元素解析
| 元素 | 作用 |
|---|---|
<input id="keyword"> | 用户输入关键词 |
<input type="color" id="colorPicker"> | 选择高亮颜色（默认黄色） |
<button id="highlightBtn"> | 点击后高亮关键词 |
<button id="clearBtn"> | 点击后清除高亮 |
<script src="popup.js"> | 引入交互逻辑 |
3. content.js - 在网页中执行的高亮逻辑
核心功能：遍历网页 DOM，找到匹配关键词的文本并高亮。
javascript
// 高亮函数
function highlightKeyword(keyword, color = "yellow") {
// 清除旧的高亮
document.querySelectorAll(".keyword-highlight").forEach(el => {
el.replaceWith(el.textContent);
});
if (!keyword) return;
// 遍历所有文本节点
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_TEXT
);
while (walker.nextNode()) {
const node = walker.currentNode;
if (node.textContent.includes(keyword)) {
const span = document.createElement("span");
span.className = "keyword-highlight";
span.style.backgroundColor = color;
span.textContent = node.textContent;
node.replaceWith(span);
}
}
}
// 监听来自 popup 的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "highlight") {
highlightKeyword(request.keyword, request.color);
} else if (request.action === "clear") {
highlightKeyword(""); // 传入空字符串清除高亮
}
});
关键逻辑解析
-
highlightKeyword()- 先清除旧的高亮（避免重复）
- 使用
TreeWalker遍历网页所有文本节点 - 找到包含关键词的文本，用
<span>包裹并设置背景色
-
chrome.runtime.onMessage- 监听来自
popup.js的消息 - 根据消息类型执行高亮或清除操作
- 监听来自
4. popup.js - 弹出窗口的交互逻辑
处理用户点击事件，并向 content.js 发送消息。
javascript
document.getElementById("highlightBtn").addEventListener("click", () => {
const keyword = document.getElementById("keyword").value;
const color = document.getElementById("colorPicker").value;
// 向当前标签页发送高亮指令
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.tabs.sendMessage(tabs[0].id, {
action: "highlight",
keyword: keyword,
color: color
});
});
});
document.getElementById("clearBtn").addEventListener("click", () => {
// 发送清除指令
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.tabs.sendMessage(tabs[0].id, { action: "clear" });
});
});
关键交互流程
- 用户点击 "高亮关键词" 按钮
→popup.js获取关键词和颜色
→ 通过chrome.tabs.sendMessage发送给content.js
→content.js执行高亮 - 用户点击 "清除高亮" 按钮
→ 发送clear指令
→content.js清除所有高亮
5. 完整文件结构
highlight-keywords-extension/
├── manifest.json # 配置文件
├── popup.html # 弹出窗口界面
├── popup.js # 弹出窗口逻辑
├── content.js # 高亮核心逻辑
├── icon.png # 插件图标
└── icon16.png # 小图标（可选）
6. 如何测试这个插件？
- 打开 Chrome，访问
chrome://extensions - 开启 "开发者模式"
- 点击 "加载已解压的扩展程序" ，选择插件文件夹
总结
| 文件 | 作用 | 关键点 |
|---|---|---|
manifest.json | 插件配置 | 定义权限、弹出页面、图标 |
popup.html | 用户交互界面 | 提供输入框和按钮 |
popup.js | 处理用户点击 | 发送消息给 content.js |
content.js | 操作网页 DOM | 实现高亮/清除逻辑 |
通过这样的架构，我们实现了一个完整的 Chrome 插件，AI 可以轻松生成这些代码，开发者只需调整细节即可。
