经常有读者问我浏览器插件到底难不难学说实话它比大多数人想象中简单而且特别适合作为前端开发者的“青年大学习”——门槛低、见效快还能把 JavaScript、DOM 操作、浏览器 API 这些基本功串起来。很多人平时装别人写的扩展装得飞起等到想自己动手写一个时却连“开发者模式”都不知道在哪里打开。本文就以 Edge 浏览器为运行环境从零开发一个能真正跑起来的关键词高亮插件。通过这个实战项目你会理解 Manifest V3 的核心机制、内容脚本与背景脚本的分工、扩展调试的完整流程以及开发过程中最容易踩的坑。不管是前端入门、测试提效还是想给团队做一个内部小工具这套流程都能直接用上。1. 背景与核心概念1.1 浏览器插件到底是什么浏览器插件官方术语叫“浏览器扩展程序”本质上是一个由 HTML、CSS、JavaScript 组成的 Web 应用但它不是运行在某个网页里而是由浏览器直接托管拥有操作浏览器页面、拦截网络请求、读写本地存储等额外能力。你可以把它理解成一个“寄生在浏览器身上的小程序”浏览器给插件分配一套专门的 API例如 chrome.tabs、chrome.storage、chrome.runtime插件则通过这些 API 去修改网页、响应鼠标点击、管理标签页。微软 Edge 在 2020 年切换到了 Chromium 内核之后几乎完整兼容 Chrome 扩展体系。这意味着你在网上看到的绝大多数 Chrome 扩展教程在 Edge 上也能直接套用开发流程也一样。唯一的区别只是加载入口的名称、商店平台不同而已。对于普通用户来说插件是装来用的工具对于开发者来说插件则是把“浏览器变成自己专属工作台”的工程手段。1.2 为什么选择 Edge 作为插件开发环境Edge 和 Chrome 一样基于 Chromium但有几个很适合开发者的点系统自带不需要额外安装浏览器。扩展管理入口直观开发者模式开启方便。扩展调试有独立的“检查视图”可以直接断点调试后台脚本。Edge 插件商店支持私有分发适合公司内部工具。更重要的一点是Edge 在 Windows 上会跟随系统更新内核版本相对较新Manifest V3 支持完整。配合 VS Code 和 Edge DevTools完全可以做到“写代码—加载—调试—热更新”的无缝循环。1.3 插件的常见应用场景浏览器插件能解决的问题大致可以分为几类页面增强给网页增加快捷键、自动填充表单、自动翻页、关键词高亮。效率工具网页剪藏、稍后读、翻译助手、截图标注。开发辅助JSON 格式化、接口 Mock、本地资源替换、调试面板。自动化脚本定时检测、批量操作、数据抓取辅助。隐私与安全广告拦截、敏感信息脱敏提示。本文要做的关键词高亮插件就属于第 1 类但它覆盖了插件核心能力的完整链路弹窗 UI、本地存储、内容脚本注入、后台脚本响应。2. 环境准备与版本说明2.1 检查 Edge 版本插件开发不需要安装额外依赖但建议确认 Edge 版本不要太旧。打开 Edge在地址栏输入以下地址并回车edge://settings/help你能看到类似“Microsoft Edge 版本 xxx.x.x.x”的信息。只要不是远古版本比如 80 以下Manifest V3 都能正常工作。本文示例不依赖特定版本特性重点在通用实现思路。2.2 打开扩展管理页在 Edge 地址栏输入edge://extensions/这是 Edge 的扩展管理中心相当于 Chrome 的chrome://extensions/。这个页面会展示你已安装的所有扩展、扩展详情、开发者模式开关。如果你的 Edge 版本较新地址栏输入edge://extensions/是唯一推荐入口不要通过右键快捷方式或第三方工具强行开启扩展那样反而容易遇到安全拦截。2.3 开启开发者模式点击页面左上角的“开发人员模式”开关把它打开。开启之后页面右上角会出现三个按钮“加载解压缩的扩展”、“打包扩展”、“更新”。这是整个开发流程中必须完成的第一步。没有开启开发者模式时Edge 只允许安装微软商店里经过验证的扩展程序会自动禁用“从文件加载扩展”的能力。开启开发人员模式后浏览器地址栏下方可能会弹出一条“请停止使用开发人员模式”的提示这是浏览器的正常提醒机制不影响操作点击“仍要继续”即可。3. 插件核心概念拆解3.1 manifest.json 是插件的地基每个插件都必须有一个名为manifest.json的清单文件它位于插件的根目录。这个文件告诉浏览器你的插件叫什么名字、什么版本、需要哪些权限、由哪些文件组成。Manifest V3简称 MV3是目前 Chrome 和 Edge 扩展的主流版本。MV3 相比旧版 Manifest V2 有几个明显变化后台脚本从常驻页面改成了 Service Worker生命周期更短浏览器可以随时回收。默认禁用远程代码所有脚本必须打包进扩展。部分 API 改成了 Promise 风格更符合现代 JavaScript 习惯。一个最小可用的manifest.json只需要三行信息{ manifest_version: 3, name: 我的第一个插件, version: 1.0.0 }这时候加载进浏览器虽然实现了“插件已被识别”但它什么都做不了因为缺少页面、脚本和权限。一个完整的清单文件会在后面的实战中展开讲解。3.2 四个核心组成部分插件的能力来自四个基本组件开发中至少会遇到一个内容脚本Content Script内容脚本是注入到目标网页中执行的 JavaScript 文件。它可以读取和修改当前页面的 DOM就像你在浏览器控制台里手动执行脚本一样。内容脚本最大的特点是可以操作网页但它和网页本身的 JavaScript 是隔离的。它的变量不会直接污染页面全局页面里的 JS 也拿不到内容脚本内部定义的变量。背景脚本Background / Service Worker背景脚本负责处理全局事件比如安装扩展、点击图标、接收网络请求。在 MV3 中它一般作为 Service Worker 存在平时不常驻内存有事件触发时才被唤醒。如果你只需要在网页加载后做点 DOM 操作可以不写背景脚本但如果你需要“读取当前标签页 URL”“响应用户点击图标”“跟内容脚本通信”就需要它出场了。弹窗页面Popup点击工具栏上的扩展图标时弹出的那个小窗口就是 Popup。它本质上是一个普通 HTML 页面只是尺寸受限。通常用来做设置面板、快速操作按钮或者信息展示。选项页Options Page在扩展管理页点击“详情”里的“扩展选项”时打开的独立页面适合放复杂的设置项比如主题配置、数据管理、权限说明。这四部分可以组合使用。大部分实用插件都由“弹窗做配置 内容脚本执行页面操作 背景脚本处理全局逻辑”组成。3.3 权限系统最小权限原则插件没有默认权限。你想让插件读取某个网页的数据、修改标签页、读写本地存储都需要在manifest.json的permissions字段里声明。常见权限含义如下权限作用storage允许读写扩展的本地存储保存用户配置scripting允许动态向页面注入脚本activeTab允许临时访问当前活动标签页tabs允许读取标签页信息如 URL、标题all_urls允许在所有网站上运行属于大范围权限安全的基本原则是权限能少申请就少申请。很多新手一上来就写all_urls和tabs被商店审核拒绝还找不到原因。本文实战项目只需要storage就够了内容脚本的匹配范围由content_scripts.matches控制。4. 完整实战从零开发关键词高亮插件4.1 需求分析和项目结构这个插件要解决的问题很明确我们日常浏览技术文档、招聘页面、新闻网页时经常需要抓住几个关键词重点看但页面内容一多人工扫读很容易漏。插件会对当前页面中出现的指定关键词自动打上高亮标记。功能拆解成三步用户在弹出面板里输入关键词列表。关键词保存到浏览器本地存储。浏览器打开目标网页时内容脚本读取关键词并在页面上高亮。先创建项目目录结构如下keyword-highlighter/ ├── manifest.json ├── content.js ├── background.js ├── popup.html ├── popup.js └── icons/ ├── icon16.png ├── icon48.png └── icon128.pngicons目录下的图标文件可以让扩展在工具栏、插件管理页显示才好看。开发阶段可以先不放图标但正式发布必备。4.2 编写 manifest.json 清单文件在项目根目录创建manifest.json写入以下内容{ manifest_version: 3, name: 关键词高亮助手, version: 1.0.0, description: 在网页中自动高亮指定关键词提升阅读效率, permissions: [storage], background: { service_worker: background.js }, action: { default_popup: popup.html, default_title: 关键词高亮助手 }, content_scripts: [ { matches: [all_urls], js: [content.js], run_at: document_idle } ] }逐个解释关键字段permissions: [storage]允许插件把用户输入的关键词保存到本地存储。这里没有申请scripting权限因为内容脚本已经通过声明式方式注入不需要动态注入能力。background.service_worker注册后台脚本这里用来监听扩展安装事件。action.default_popup指定点击扩展图标时弹出的页面文件。content_scripts声明向匹配的网页注入content.js。matches使用all_urls表示所有 http/https 网页都能注入。run_at: document_idle表示等网页 DOM 加载完成后才执行脚本避免在页面结构还不完整时操作 DOM。注意manifest.json里不能出现注释实际使用时也要保证 JSON 语法合法。初学者最容易在 JSON 里多写逗号导致加载失败。4.3 编写内容脚本 content.js内容脚本是插件中最核心的业务逻辑。它的任务是读取存储中的关键词在当前页面中找到匹配的文本并高亮。实现思路如下使用TreeWalker遍历页面所有文本节点避开script、style、textarea等不需要处理的元素。根据关键词列表构建正则表达式。把命中关键词的文本节点拆开用mark标签包裹关键词。监听存储变化当用户修改关键词后重新高亮。代码如下// content.js const KEY_ATTR data-kw-highlight; function escapeRegExp(text) { return text.replace(/[.*?^${}()|[\]\\]/g, \\$); } function clearHighlights() { document.querySelectorAll(mark[${KEY_ATTR}]).forEach((mark) { const parent mark.parentNode; if (parent) { parent.replaceChild(document.createTextNode(mark.textContent), mark); parent.normalize(); } }); } function highlightKeywords(keywords) { clearHighlights(); const validKeywords keywords.map((k) k.trim()).filter(Boolean); if (validKeywords.length 0) return; const escapedKeywords validKeywords.map(escapeRegExp); const regex new RegExp((${escapedKeywords.join(|)}), gi); const walker document.createTreeWalker( document.body, NodeFilter.SHOW_TEXT, { acceptNode(node) { if (!node.parentElement) return NodeFilter.FILTER_REJECT; const tagName node.parentElement.tagName.toLowerCase(); if ([script, style, noscript, textarea, input, iframe].includes(tagName)) { return NodeFilter.FILTER_REJECT; } return NodeFilter.FILTER_ACCEPT; }, } ); const textNodes []; while (walker.nextNode()) textNodes.push(walker.currentNode); textNodes.forEach((node) { const originalText node.nodeValue || ; if (!regex.test(originalText)) return; regex.lastIndex 0; const fragment document.createDocumentFragment(); let lastIndex 0; let match; while ((match regex.exec(originalText)) ! null) { if (match.index lastIndex) { fragment.appendChild(document.createTextNode(originalText.slice(lastIndex, match.index))); } const mark document.createElement(mark); mark.textContent match[0]; mark.setAttribute(KEY_ATTR, ); mark.style.backgroundColor #ffeb3b; mark.style.color #333; mark.style.padding 0 2px; mark.style.borderRadius 2px; fragment.appendChild(mark); lastIndex match.index match[0].length; if (match.index regex.lastIndex) regex.lastIndex; } if (lastIndex originalText.length) { fragment.appendChild(document.createTextNode(originalText.slice(lastIndex))); } node.parentNode.replaceChild(fragment, node); }); } chrome.storage.local.get({ keywords: [] }, (data) { highlightKeywords(data.keywords || []); }); chrome.storage.onChanged.addListener((changes, area) { if (area local changes.keywords) { highlightKeywords(changes.keywords.newValue || []); } });代码里几个容易忽略的细节用clearHighlights先清理上次的标记再重新高亮避免重复标记累积。清理时调用parent.normalize()可以让被拆开的文本节点重新合并方便下一次遍历。使用escapeRegExp防止用户输入(、.、*等正则特殊字符时程序崩溃。处理同一关键词在一段文本中出现多次的情况时必须维护lastIndex否则拆出来的文本位置会错乱。对于mark标记的样式最好用 CSS 属性直接设置不依赖页面自身的样式表因为页面样式可能会覆盖插件样式。这个示例在大多数常规页面上都能稳定运行。需要注意如果两个关键词存在前缀包含关系比如“前端”和“前端开发”可能会产生嵌套高亮生产环境建议使用更严格的文本分析逻辑。作为入门示例这种处理方式已经足够。4.4 编写弹窗页面 popup.html 和 popup.js弹窗页面负责接收用户输入。先创建popup.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / style body { width: 280px; padding: 12px; font-family: system-ui, sans-serif; } h3 { margin: 0 0 10px; font-size: 15px; color: #333; } textarea { width: 100%; min-height: 80px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 6px; padding: 8px; font-size: 13px; resize: vertical; } button { width: 100%; margin-top: 10px; padding: 8px 0; background: #1e88e5; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; } button:hover { background: #1565c0; } #status { margin-top: 8px; font-size: 12px; color: #2e7d32; text-align: center; } /style /head body h3关键词高亮助手/h3 textarea idkeywordInput placeholder输入关键词用逗号分隔例如前端, React, 面试/textarea button idsaveBtn保存关键词/button div idstatus/div script srcpopup.js/script /body /html再创建popup.js// popup.js const input document.getElementById(keywordInput); const saveBtn document.getElementById(saveBtn); const statusEl document.getElementById(status); chrome.storage.local.get({ keywords: [] }, (data) { input.value (data.keywords || []).join(, ); }); saveBtn.addEventListener(click, () { const raw input.value.trim(); const keywords raw ? raw.split(/[,]/).map((k) k.trim()).filter(Boolean) : []; chrome.storage.local.set({ keywords }, () { statusEl.textContent 已保存当前打开的页面会自动重新高亮; setTimeout(() { statusEl.textContent ; }, 2000); }); });Popup 页面本质上是一个独立的小网页但它运行在扩展的上下文里可以直接使用chrome.storageAPI。点击保存按钮后数据写入本地存储content.js中的chrome.storage.onChanged会立即监听到变化并重新高亮整个过程不需要刷新页面。中文输入法下用户可能用中文逗号分隔关键词所以代码里用了正则/[,]/同时兼容中英文逗号。4.5 编写背景脚本 background.js背景脚本在这个项目里不是业务主力但我们必须加上它因为它是理解 MV3 生命周期的关键。创建background.js// background.js chrome.runtime.onInstalled.addListener((details) { console.log(关键词高亮助手已安装reason:, details.reason); }); chrome.runtime.onMessage.addListener((message, sender, sendResponse) { if (message message.type PING) { sendResponse({ status: ok, time: Date.now() }); } });这段代码只做了两件事记录插件安装事件提供一个简单的消息响应接口。它展示了 MV3 背景脚本的几个特点不是常驻内存而是事件驱动浏览器在需要时才启动它。生命周期非常短不要在顶层写循环计时器否则会被浏览器反复唤醒。能用内容脚本实现的功能尽量别让背景脚本去处理。在实际项目中你可能会用背景脚本来处理“点击扩展图标后切换状态”“接收内容脚本上报的数据”“调用扩展 API 操作标签页”等复杂逻辑。4.6 加载插件与运行验证现在进行加载验证。第一步打开edge://extensions/确认“开发人员模式”已开启。第二步点击“加载解压缩的扩展”按钮选择keyword-highlighter项目目录。注意必须是直接包含manifest.json的目录不能选到外层文件夹。第三步观察扩展卡片是否出现。如果manifest.json有语法错误页面顶部会显示红色错误提示。第四步随便打开一个内容较多的技术文章页面点击工具栏中的插件图标输入关键词例如“浏览器、插件、API”点击保存。回到页面你应该能看到页面上对应的关键词被黄色底色标记出来。如果修改关键词后页面没有变化不要着急可以点击扩展卡片上的刷新图标然后再刷新一次正在浏览的网页内容脚本会重新执行。5. 调试总是要做的事5.1 调试内容脚本内容脚本不像普通页面那样直接在控制台里运行但它同样支持完整的 DevTools 调试。在edge://extensions/页面找到“关键词高亮助手”卡片点击“详细信息”。在下方找到“内容脚本”区域点击“检查”按钮在一些版本中显示为“检查视图”会打开一个独立的 DevTools 窗口只显示content.js的执行环境和控制台输出。在这个控制台里可以console.log输出页面变量。可以打断点、单步执行。可以查看当前注入页面的 DOM 结构。注意内容脚本的window对象和页面主世界是不同的你在控制台手动测试document.title可能正常但访问页面自定义的全局变量时会得到undefined这是隔离机制造成的。5.2 调试 Service Worker点击“后台服务”区域的“检查”或“检查视图”可以打开 background.js 对应的调试面板。Service Worker 平时是休眠状态打开 DevTools 后会被激活方便查看日志和网络请求。如果修改了background.js需要回到扩展管理页面点击扩展卡片上的刷新按钮让它重新加载脚本。等待几秒后再测试。5.3 动态修改后的重新加载在开发过程中你可能会遇到“改了代码但页面没反应”的情况。大多数时候不是代码错了而是扩展没有重载。建议把调试流程固定成三步走修改完代码后点击扩展管理页上的刷新按钮。刷新正在测试的网页。如果涉及 popup关闭再重新点击扩展图标。养成这个习惯能避免大量无意义的排查时间。6. 常见问题与排查清单下面是开发 Edge 插件时高频遇到的问题我按“现象—原因—方案”的格式整理成表格方便收藏备查。问题现象常见原因解决思路“加载解压缩的扩展”按钮置灰开发人员模式未开启或选错了目录打开开发人员模式确认选择的是包含 manifest.json 的文件夹扩展加载后图标不出现manifest.json 语法错误、缺少 icons 文件打开扩展管理页查看错误提示逐行检查 JSON插件被 Edge 自动禁用插件来自非官方商店且开发者模式关闭开发期间保持开发人员模式正式分发到 Edge 插件商店内容脚本不执行matches规则不匹配、页面本身禁止注入检查 matches 正则换一个普通 http 页面测试修改 popup 配置后页面无变化扩展未重新加载或 content 脚本未收到存储事件点击扩展卡片刷新按钮再刷新测试页面页面被高亮后样式很乱页面样式与 mark 默认样式冲突尽量使用内联样式设置背景色避免依赖 classVue/React 项目中使用插件导致页面报错内容脚本操作了框架管理的 DOM尽量只做渲染后追加标记不要篡改框架内部结构popup 点按钮没反应popup.html 中 script 标签顺序错误、JS 引入路径不对确认 script 标签路径相对 popup.html 正确再补充两个细节问题一为什么某些网页注入不进去edge://开头或浏览器内置页面比如edge://extensions、edge://settings属于受限页面插件无法注入。这是浏览器安全限制不是代码 bug。测试时一定要用普通网站页面。问题二MV2 升级 MV3 后插件失效MV3 中background从scripts改成了service_worker而且不再允许background.persistent。如果你从网上抄了一段旧教程里面写的是background: { scripts: [background.js], persistent: false }在 MV3 下会直接加载失败。正确写法是background: { service_worker: background.js }如果代码里用了chrome.extension.getBackgroundPage()MV3 中也需要改为通过chrome.runtime.getContexts()或使用消息通信获取后台状态。7. 最佳实践与工程建议7.1 权限申请保持最小化不要一开始就申请tabs、all_urls、scripting等大权限。很多场景下activeTab就够用了用户主动点击插件图标后你才获得当前标签页的临时访问权限。如果你声明了all_urls商店审核阶段会被要求提交详细说明普通开发者没必要给自己找麻烦。能在内容脚本声明式注入解决的就不额外申请动态注入权限。7.2 内容脚本的隔离与安全内容脚本运行在“隔离世界”这是浏览器刻意设计的边界能防止插件脚本与页面脚本互相干扰。但在实际操作中仍然要遵守几个安全原则不要用innerHTML拼接高亮内容防止页面数据里包含 HTML 标签导致脚本注入。不要读取并执行页面上下文的任意代码即使对方是“可信网站”。对用户输入的关键词做正则转义避免正则语法错误或意外行为。如果内容脚本要大量操作 DOM尽量先用TreeWalker收集文本节点再统一替换避免在遍历过程中修改 DOM 结构导致循环异常。7.3 性能优化别让插件拖慢浏览器Edge 的扩展如果写得不好开销会很明显。尤其是很多扩展都在后台开了长期轮询、监听所有网页的所有请求Edge 内存占用和 CPU 占用都会被拉高。建议从这几个角度控制性能内容脚本只在需要处理的页面运行通过matches限制范围全站监听只作为最后选择。不要在内容脚本里频繁setInterval。如果要做“页面变化后重新高亮”优先用MutationObserver按需触发。保持 Service Worker 无状态。不要在里面保存大的全局数据需要时通过chrome.storage读取。对页面中成千上万个文本节点的高亮操作尽量分段执行避免一次循环卡死主线程。7.4 版本管理与发布准备插件项目虽然小也是正经工程。建议从第一天起就纳入 Git 管理。manifest.json里的version字段要遵循语义化版本规则每次修改都递增。发布到 Edge 插件商店之前准备以下材料至少 128x128 的图标文件并导出 16、24、48、128 等常用尺寸。简短的描述文字说明插件用途和所需权限。隐私说明尤其当插件涉及用户数据上传时。如果是公司内部使用不需要上架公开商店把项目打包成 zip 或 crx 分发给同事即可。但要记住关闭开发者模式后Edge 会限制未经商店验证的扩展安装内部使用时需要在扩展管理页手动开启“允许来自其他来源的扩展”不同版本面板的提示位置略有差异。7.5 常见开发闭环最后总结一套适合个人练手的开发闭环在edge://extensions/开启开发者模式。用“加载解压缩的扩展”加载项目。修改代码后回到扩展管理页点击刷新。刷新测试网页并验证行为。控制台输出和 DevTools 排查逻辑。跑通后把项目纳入 Git并在本地打好 tag 持续迭代。这套流程虽简单但足够支撑多种类型插件的开发迭代。8. 学习路线与下一步方向到这里你已经完成了一个可以实际使用的 Edge 浏览器插件。它虽然功能简单但已经把插件开发的主干全部走了一遍清单文件配置、内容脚本注入、弹窗界面、本地存储通信、后台脚本生命周期、扩展调试、常见问题排查。如果你对浏览器插件开发产生了兴趣下一步可以按这几个方向继续深入把关键词高亮升级成“网页标记 收藏夹”试试如何通过chrome.storage.sync实现跨设备同步。学习chrome.scripting动态注入实现“点击按钮后手动选择页面元素”。研究消息通信机制写一个“内容脚本采集数据、背景脚本导出 JSON”的抓取工具。阅读 Edge 插件商店的审核规范把一个练手项目完善后尝试上架。另外如果你日常开发中遇到“页面样式污染”“Vue 应用无法关闭最小化按钮”“扩展背景脚本被回收”这类怪问题很多其实是 MV3 生命周期和页面隔离机制导致的。带着这些问题再去翻一遍官方文档收获会完全不同也能更好地判断网上那些“绕过检测”“强制解锁”的偏门方案为什么不值得碰。浏览器插件是一门“做出来立刻有成就感”的实践技术。建议你拿到示例代码后不要只是把代码跑通而是试着改几个参数换一种高亮颜色、增加清除高亮按钮、把关键词改为读 API 接口——每改动一处你对插件机制的理解就会加深一层。动手实践永远是学习这类技术最快的方式。