⁶

⁵

⁶

新手也能懂！30 分钟学会如何做 Chrome 插件

鱼排

2025-09-18 17:27

阅读681

鱼排

2025-09-18 17:27

阅读 681

想在浏览网页时快速定位关键信息？不用找现成工具，自己动手开发一个关键词高亮插件其实很简单。下面我们从 “准备材料” 到 “组装成品”，一步步带你实现这个实用小工具，全程只需要 4 个核心文件。

感兴趣的可以看看我刚开发Chrome标签页扩展网页体验版：NBtab新标签页

第一步：搭好插件的 “身份档案”——manifest.json

就像身份证记录个人信息，manifest.json是插件的 “官方档案”，Chrome 全靠它识别插件的功能和权限。没有这个文件，插件根本无法运行。

核心信息拆解

它主要包含 3 类关键内容，我们直接看实战配置里的重点：

基础身份：name（插件名）、version（版本号）、description（功能描述），让用户一眼知道这是个什么工具。 交互入口：action里的default_popup指定点击插件图标弹出的页面，default_icon设置插件在浏览器工具栏的图标。 权限申请：permissions声明插件需要的能力，这里activeTab是获取当前浏览的标签页，scripting是允许执行脚本 —— 这两个是实现高亮功能的关键权限，多申请没用，少了又不行。

▼
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"
  }
}

第二步：做个简单的 “控制面板”——popup.html

插件的交互全靠这个弹出窗口，我们不用做复杂设计，只要满足 “输入关键词 + 选颜色 + 触发操作” 三个核心需求就行。

界面核心元素

这个页面就像一个迷你控制面板，每个元素都有明确用途：

文本输入框（id="keyword"）：让用户输入想高亮的词，比如 “数据分析”“核心结论”。 颜色选择器（id="colorPicker"）：默认黄色，用户也能改成自己喜欢的颜色，比如用红色标重点。 两个按钮：“高亮关键词” 负责启动功能，“清除高亮” 负责恢复页面原样，避免高亮太多影响阅读。 最后引入popup.js：光有界面不行，得靠它让按钮 “动起来”。

▼
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>

第三步：写好 “高亮魔法”——content.js

这是插件的 “核心引擎”，专门负责在网页里找关键词并加上颜色。它就像一个 “网页化妆师”，悄悄修改页面内容却不影响网页本身功能。

核心逻辑拆解

它主要干两件事，而且逻辑很清晰：

高亮函数（highlightKeyword）： 1、先 “卸妆”：每次执行前清除之前的高亮（找所有带keyword-highlight类的元素，把它们还原成普通文本），避免重复标记。 2、再 “化妆”：用TreeWalker遍历网页里所有文本节点，找到包含关键词的文本后，用标签把它包起来，再给这个标签加背景色 —— 这样关键词就显眼了。

消息监听：通过chrome.runtime.onMessage听popup.js的指令，收到 “highlight” 就执行高亮，收到 “clear” 就清除高亮，相当于和控制面板实时通信。

▼
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(""); // 传入空字符串清除高亮
  }
});

第四步：打通 “控制面板” 和 “引擎”——popup.js

如果说popup.html是按钮，content.js是引擎，那popup.js就是连接两者的 “导线”，负责把用户操作转成指令发给引擎。

交互流程拆解

（1）整个过程就像 “按下开关→机器启动”：

1、当用户点击 “高亮关键词” 按钮： 2、先获取输入框里的关键词和颜色选择器的颜色值； 3、用chrome.tabs.query找到当前活跃的标签页；

再用chrome.tabs.sendMessage把 “highlight” 指令、关键词、颜色一起发给content.js，触发高亮。

（2）点击 “清除高亮” 时，流程类似，只是发的是 “clear” 指令，让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" });
  });
});

最后：凑齐 “零件”+ 测试完整文件清单一个能跑的插件，文件夹里要包含这些 “零件”，少一个都不行： manifest.json（身份档案） popup.html（控制面板界面） popup.js（控制面板逻辑） content.js（高亮引擎）

几个尺寸的图标（icon.png、icon16.png等，浏览器会根据不同场景自动选用）

3 步测试插件

1、打开 Chrome，在地址栏输入 chrome://extensions 进入插件管理页； 2、右上角开启 “开发者模式”，这时页面会出现 “加载已解压的扩展程序” 按钮； 3、点击按钮，选择你存放上述文件的文件夹 —— 搞定！现在浏览器工具栏会出现插件图标，点击就能用了。

这样一套流程走下来，你不仅有了一个能用的插件，还能搞懂每个文件的作用。如果想升级功能，比如支持多关键词高亮、记住上次的设置，也能知道该改哪个文件。