企业官网建设流程全解析

做后端久了，尤其是天天泡在 Spring Boot、MySQL、Redis 这套体系里的 Java 工程师，看到“Vue”这个词，第一反应多半是：这是前端的东西，跟我没关系。但真到了项目里你会发现，前后端分离早就成了默认架构，前端小伙伴排期排不过来的时候，后端顺手改个 Vue 页面、调个参数、修个样式，在中小团队里几乎是必修课。再加上很多人还想自己写点小工具、搞点浏览器插件来提升工作效率，那就绕不开 Vue 和浏览器扩展这套技术栈。这篇文章就是写给这类 Java 后端的，我把自己的学习路径、思维迁移方法、完整插件实战，以及踩过的坑都整理出来，希望能让你少走弯路。

我能帮你解决什么问题？简单说就是三件事：第一，搞明白 Java 后端为什么要学 Vue，学了到底有什么用；第二，用你已经熟悉的 Java 概念去理解 Vue 的核心机制，而不是去背那些前端八股文；第三，从 Vue 自然过渡到浏览器插件开发，我会用一个完整可运行的案例带你走一遍，从工程搭建到消息通信、到最终加载调试，全部讲透。适合谁看？就是那些“Java 基础还行，但一碰前端就头大”的后端工程师，或者已经会一点 Vue、想再进阶写浏览器插件的朋友。

1. Java后端为什么要碰Vue和浏览器插件

1.1 前后端分离躲不开，Vue是成本最低的入口

只要你在公司里参与过稍微有点规模的项目，一定见过这种架构：后端提供 RESTful 接口，前端用 Vue 或者 React 渲染页面，两边通过 JSON 交互。这个模式下，后端工程师写接口的时候，经常需要自测接口返回的数据结构对不对、字段够不够用。可你总不能每次都用 Postman 硬看 JSON 吧？很多团队的做法是后端把接口写好，前端联调的时候发现问题再返工。但如果后端自己会一点 Vue，就可以起一个最小可运行的前端页面，把接口数据渲染出来，提前发现字段缺失、类型不匹配、响应结构不合理这些问题。

而且大家可以回忆一下招聘 JD，现在很多公司的 Java 岗位描述里都写着“熟悉 Vue、React 等前端框架者优先”。倒不是说让你去抢前端的工作，而是说，在一个前后端分离的团队里，后端懂一点 Vue，沟通成本会低非常多。举个例子，前端跟你说“这个接口的 response 能不能改一下结构，我需要嵌套的 data 字段”，你如果完全不懂前端渲染逻辑，可能觉得对方在无理取闹；但如果你知道 Vue 的模板里如何取数据、v-for 怎么遍历、computed 是怎么依赖数据的，你就能理解前端为什么要这种结构，甚至能主动设计出更合理的数据结构。这属于“通晓对方技术栈带来的沟通红利”，很现实。

再往实际说一点，自己写内部工具、做自动化脚本、搭个人博客、开发一些线上小工具，这些场景下后端工程师如果只会 Java 写接口，那你做出来的东西就缺一个“脸面”。Vue 就是补上这块短板的最短路径。它的学习曲线相比 React 要平滑一些，模板语法接近 HTML，逻辑部分用 JavaScript/TypeScript 写，对已经有编程基础的后端来说，大概一到两周就能上手写业务页面。

1.2 浏览器插件不是玩具，是后端工程师的“杠杆”

浏览器插件在很多后端眼里是个花里胡哨的东西：不就是给浏览器加点小功能吗？其实不是。你仔细想想，浏览器是什么？是用户访问你系统的最终入口，是所有 Web 应用的“客户端运行时”。浏览器插件能做的事情，远不止去广告、抢票、脚本管理这些个人娱乐场景。在我接触过的企业项目里，浏览器插件承担过这些角色：给内部 CRM 系统增加批量填充功能、在第三方页面上自动采集数据回传后端、对接摄像头等本地硬件做页面预览、在企业 OA 里实现跨浏览器的签章和文档在线编辑。像海康威视摄像头预览、某些跨浏览器 Office 组件，本质上都是依靠浏览器插件去桥接本地能力或增强页面功能。

对 Java 后端来说，浏览器插件还有一个很实用的价值：它是你接触“客户端开发”的最佳跳板。你不需要像做安卓、iOS 那样去学一整套新语言和 SDK，只需要会 HTML/CSS/JavaScript，再加上一点 Vue 基础，就能做出一个真正有用的工具。比如你在排查线上问题的时候，经常要在日志平台、监控平台之间来回切换，手动复制错误信息、拼链接、找关键词，这些重复劳动完全可以写成一个浏览器插件一键搞定。换句话说，浏览器插件是后端工程师能最快把自己的想法落地成“产品”的载体之一。

还有一个容易被忽略的点：浏览器插件的开发模式，和前后端分离的 Web 开发高度相似。插件里的 popup 页面就是一个 Vue 应用，content script 负责操作页面 DOM，background service worker 负责后台逻辑和事件处理，三部分之间通过消息通信协作。你把 Vue 学明白了，浏览器插件的前端部分就解决了一大半；你把消息通信搞懂了，插件的骨架也就立起来了。对于会 Java 的人来说，理解这些概念并不难，后面我会用类比的方式给你讲透。

1.3 什么样的人最适合走这条路

不是所有人都需要学 Vue、需要写浏览器插件。我觉得下面这三类人最适合：

• 日常要自测接口、想快速搭一个前端页面的后端工程师；
• 在中小团队或创业公司，经常需要“全栈救火”的人；
• 平时喜欢写点小工具、小脚本来提升工作效率的人。

如果你属于这几种情况，那这篇文章的内容对你来说就是刚需。相反，如果你所在团队前端资源充足、分工极度明确，你只要专心写接口就行，那学 Vue 可以当作兴趣，不一定是刚需。但即使是这种环境，我仍然建议你至少弄懂 Vue 的基本概念，因为架构评审、技术方案设计的时候，你总得知道前端那边在讲什么。

2. 用Java的思维快速理解Vue

2.1 别去背八股文，把Vue当成“前端Spring”

很多后端学前端最大的障碍，不是语法，而是思维模式。Java 后端习惯了强类型、编译期检查、Spring 容器管理 Bean、方法调用式编程；而前端 JavaScript 是动态类型、事件驱动、基于 DOM 操作的响应式编程。一下子切换不过来很正常。

我的建议是：不要把 Vue 当成一门全新的语言去学，而是把它类比成你熟悉的东西。Vue 想解决的核心问题是什么？是“页面状态”和“DOM 展示”之间的同步。在 Java 里，如果你有一个对象，改了它的字段，Java 本身不会自动帮你刷新界面；但在 Vue 里，你改了数据，页面会自动更新。这个“自动更新”的机制，就是 Vue 的响应式系统。你可以把它理解为一个加强版的观察者模式：数据是 Subject，页面上的指令是 Observer，一旦数据变更，所有依赖它的视图自动收到通知并重新渲染。

这样一想，Vue 是不是就亲切多了？Spring 框架的核心是容器管理 Bean、依赖注入、AOP；Vue 的核心是响应式数据、组件树、生命周期。你不需要去死记硬背指令列表、API 文档，只需要抓住“数据驱动视图”这条主线，其他的都是在这条主线上加语法糖。

2.2 Vue核心概念与Java概念的对照表

下面这个表我建议直接收藏，是我自己从 Java 思维切到 Vue 时最有用的“翻译手册”。看完它，你至少能跟前端同事用同一个语言体系沟通了。

这张表的价值在于，你不需要逐个去背指令，而是可以带着问题去学：这个功能在 Java 里怎么做？对应的 Vue 机制是什么？比如你想在页面加载时请求后端接口，Java 里的做法是在 Controller 里写接口、在 Service 里调用，前端这边就是在 Vue 的onMounted生命周期里用 Axios 发请求。你一旦建立起这种对应的思维，学习速度会快很多。

2.3 环境搭建与第一个组件：从Maven那套切换到npm这套

Java 后端学 Vue，第一步不是写代码，而是把环境装好。很多后端一听到 Node.js、npm 就头大，其实它跟 Maven 的定位是一样的：Maven 从中央仓库拉 jar 包，npm 从 npm registry 拉 JavaScript 包。装 Node.js 的时候建议直接装 LTS 版本，装完自带的 npm 就够用。

接下来创建 Vue 项目，现在推荐用 Vite，它比 Vue CLI 快得多。命令也很简单：

npm create vite@latest my-vue-app -- --template vue cd my-vue-app npm install npm run dev

跑起来之后，浏览器打开http://localhost:5173，你会看到一个默认的 Vue 页面。这一步对应的就是 Java 里用 Spring Initializr 生成一个 Spring Boot 项目，然后mvn spring-boot:run启动。流程几乎一一对应。

然后打开项目里的src/App.vue，这是根组件。一个.vue文件里面有三个部分：<template>写 HTML 结构、<script setup>写逻辑、<style>写样式。Java 后端看到这个结构可能会觉得奇怪：一个文件把 HTML、JS、CSS 全揉一起了？其实这正是组件化的体现：一个组件就是一个自包含的单元，和 Java 的一个类把字段和方法放一起是同样的道理。

比如我写一个最简单的计数器组件：

<template> <div> <p>当前计数：{{ count }}</p> <button @click="increment">点击 +1</button> </div> </template> <script setup> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } </script>

这里的ref(0)定义了一个响应式数据，count.value++改数据，页面上的{{ count }}自动更新。你在 Java 里改 POJO 字段不会有任何“自动”的事情发生，但在 Vue 里这就是核心机制。理解了这个，Vue 的语法糖就都不难了。

2.4 路由和状态管理：后端人的“熟悉配方”

再往后学，你会碰到 Vue Router 和 Pinia。这两个东西，后端一看名字可能觉得陌生，但本质非常熟悉。

Vue Router 负责 URL 和页面组件的映射。Java 后端都有经历：在 Controller 里写@GetMapping("/user/list")，方法返回数据或者页面视图。Vue Router 是同样的逻辑，只不过映射的是组件：

const routes = [ { path: '/', component: Home }, { path: '/user', component: UserList }, { path: '/user/:id', component: UserDetail } ]

这里的:id是动态路径参数，对应 Spring MVC 里的@PathVariable("id")。你在前端页面跳转时，通过<router-link>替代<a>标签来避免整页刷新，Vue Router 会拦截 URL 变更、加载对应组件。这个机制和 Spring MVC 的分发思想异曲同工。

Pinia 呢？它管理前端全局状态。你可以把它理解为 Spring 容器里一个全局单例 Service，无论哪个组件都能拿到同一个状态对象。只是它的数据是响应式的，改了之后所有用到的地方都会更新。比如用户登录信息、系统配置项、购物车数据，这些跨页面共享的数据，都可以放进 Pinia。Java 里你会写一个@Service单例类来持有全局状态，前端里的 Pinia store 干的是同一件事。

到这里，Vue 的主干知识就差不多了，你已经有能力写一个像模像样的前端页面了。那怎么继续进阶？我建议下一个目标就选浏览器插件，因为它能把你的 Vue 知识“封闭运行”在一个小项目里，而且成果非常直观。

3. 从Vue到浏览器插件：一条自然的延伸

3.1 浏览器插件到底是什么

我先用一个类比说明白：浏览器插件就像浏览器这个“操作系统”上的一个小程序。和咱们手机上的 App 一样，它有自己的入口（工具栏图标）、自己的界面（popup 页面）、自己的后台进程（background service worker），还能在网页加载时悄悄介入（content script）。

这里的“小程序”框架，就是 Chrome/Edge 等 Chromium 浏览器提供的扩展 API。你只要会 Web 开发，就能写插件。Vue 在这里的作用，是帮我们把插件的界面部分做得更舒服——不用手写一堆原生 DOM 操作，而是用组件化、响应式的方式去构建。

浏览器的插件现在是 Manifest V3 时代，它在 Chrome 88 之后全面推行的版本。你也可能在网上看到 Manifest V2，那个已经逐渐被淘汰了，新写的插件建议直接用 V3。MV3 最明显的变化是后台脚本从常驻的 background page 换成了事件驱动的 service worker，还有网络请求拦截能力从同步 API 改成了声明式规则。这些东西你可以先有个印象，具体写的时候再查文档。

3.2 一个插件的“三权分立”：popup、content script、background

插件里有三种角色，理解它们的分工，整个插件架构就清晰了。

• popup：点击工具栏图标弹出的那个小面板。本质是一个 HTML 页面，可以引用 Vue、React 等框架。它适合做交互入口，比如展示信息、设置参数、点击按钮执行操作。
• content script：注入到目标网页里的脚本。它能看到和操作页面 DOM，比如高亮关键词、修改页面内容、采集页面信息。但它运行在一个相对隔离的环境里，不能直接访问页面自身的 JavaScript 变量（比如页面里的某个全局对象），只能操作 DOM。
• background service worker：插件的“后台进程”。它处理浏览器级别的全局事件，比如安装插件、点击右键菜单、监听来自 popup 或 content script 的消息。它不直接操作页面 DOM，但可以通过 API 查询标签页信息、管理存储、发起网络请求。

这三者的关系很像后端常见的分层架构：popup 是 Controller（接收用户输入，发起调度），background 是 Service（处理业务逻辑、协调资源），content script 是 DAO（直接和“数据源”也就是页面 DOM 交互）。当然这个类比不完全严谨，但足够帮你在脑子里建立坐标。

3.3 为什么用Vue来写popup

既然 popup 本质就是个 HTML 页面，那完全可以用 Vue 来写。你可以用 Vite 构建一个 Vue 应用，构建完的dist目录放到插件里当 popup 页面。这样你在 Vue 项目里学到的一切——组件化、响应式、Vue Router、Pinia——都能用在插件界面上。尤其是当你的插件面板变得复杂，比如有表单、有配置项、有数据列表展示，用 Vue 写会比原生 DOM 操作舒服非常多。

当然，用 Vue 写插件也有代价：打包体积会变大。一个简单的原生 JS 插件可能只有几 KB，用 Vue 打包出来至少有一百多 KB。但对大多数工具型插件来说，这不是什么大问题，加载速度仍然可以接受。而且你可以用按需导入、去掉不用的组件来减小体积。后端工程师选型时往往要考虑“成本”，这里也是一样：如果插件界面非常简单，一个输入框两个按钮，那用原生 JS 也行；但只要界面超过一屏、包含状态切换和交互逻辑，我建议直接用 Vue，省下的开发时间远远超过那几百 KB 的体积成本。

3.4 消息通信：插件里的RPC

popup、content script、background 之间互相传数据，这个机制是插件开发的灵魂。用 Java 后端的视角来看，每次通信都像发起一次 RPC 调用：发送方调用chrome.runtime.sendMessage()或chrome.tabs.sendMessage()，接收方注册chrome.runtime.onMessage监听器处理消息并回复响应。

一个典型的调用长这样。popup 里向当前标签页的 content script 发消息：

const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }) const response = await chrome.tabs.sendMessage(tab.id, { type: 'HIGHLIGHT', keywords: ['ERROR', 'Exception'] }) console.log(response.count) // 高亮命中的数量

content script 里监听并回复：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.type === 'HIGHLIGHT') { const count = doHighlight(message.keywords) sendResponse({ count }) } return true })

注意几点：第一，sendResponse可以是异步的，但如果你里面有异步操作，必须return true保持消息通道打开；第二，popup 和 content script 是两个不同的上下文，它们不能直接共享变量，消息是唯一的桥梁；第三，调用tabs.sendMessage时如果页面上没有注入 content script，会直接报错，这个坑我后面会详细说。

消息类型建议用一个大写字符串区分，比如'GET_PAGE_INFO'、'HIGHLIGHT'、'CLEAR_HIGHLIGHT'。这有点像你写接口时定义的 action 或 message type，一套消息协议定义清晰，插件各个部分之间的协作就不容易乱。

4. 实战：用Vue写一个“关键词高亮 + Markdown链接复制”插件

4.1 需求与功能设计

光讲理论没意思，我们直接做一个能跑的插件。我选的场景非常贴合后端日常：排查线上问题时，经常要在日志平台、监控页面、接口返回页里找关键字。如果页面上有成百上千行日志，人眼找ERROR、Exception、timeout这些词简直是折磨。所以我做的插件功能有两个：

• 在任意网页上，输入几个关键词后一键高亮所有匹配文本，方便快速定位；
• 把当前页面的标题和 URL 一键复制成 Markdown 链接格式[标题](URL)，写 bug 反馈、技术文档的时候特别好用。

插件界面（popup）用 Vue 3 写，content script 负责扫描 DOM 并高亮关键词，background 增加一个右键菜单：选中文本后可以直接“高亮选中文本”。这样三个核心组件全部用上，还覆盖了消息通信、右键菜单、剪贴板操作这些经典场景。

4.2 工程结构设计与构建方案

整个工程我选择用 Vite + Vue 3，原因前面说过：开发体验好，构建产物可以直接作为插件目录加载。项目结构如下：

tab-copy/ ├── index.html # popup 页面入口 ├── package.json ├── vite.config.js ├── public/ │ ├── manifest.json # 插件清单，插件的“pom.xml” │ └── js/ │ ├── background.js # 后台 service worker │ └── content.js # 内容脚本，注入到页面 └── src/ ├── main.js # 创建 Vue 应用实例 └── App.vue # popup 主界面组件

这里有个关键设计：Vite 默认把根目录的index.html作为入口，构建后输出到dist。而manifest.json和background.js、content.js这些不需要经过 Vue 打包的资源，就放在public目录，Vite 构建时会把public下的文件原样复制到dist。这样最终dist目录就同时包含了 Vue 构建出的 popup 页面和手写的插件脚本，把dist当作插件目录加载即可。

开发流程上，我习惯先npm run build，然后去浏览器扩展管理页加载dist目录，改完代码重新 build，回扩展页点一下刷新按钮。如果你想要边改边看 popup 的实际效果，也可以先npm run dev在浏览器调试 Vue 界面，但插件 API 在普通页面里不可用，需要 mock 数据，所以简单项目我一般直接构建后看效果。

4.3 写manifest.json：插件的pom.xml

manifest.json是插件的配置文件，相当于 Maven 的pom.xml，声明了插件的名字、版本、权限、要加载哪些脚本。MV3 的最小配置如下：

{ "manifest_version": 3, "name": "DevHighlight", "version": "1.0.0", "description": "页面关键词高亮 + 一键复制 Markdown 链接", "permissions": ["activeTab", "scripting", "contextMenus"], "action": { "default_popup": "index.html", "default_title": "DevHighlight" }, "background": { "service_worker": "js/background.js" }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["js/content.js"], "run_at": "document_idle" } ] }

逐项解释一下：

• manifest_version必须是 3。
• action.default_popup指定点击工具栏图标后打开的页面，这里就是 Vue 构建出的index.html。
• background.service_worker指向后台脚本路径。
• content_scripts声明哪些页面需要注入脚本，<all_urls>表示所有 http/https 页面都注入，run_at: document_idle表示页面加载完成后注入，避免太早操作 DOM 时报空。
• permissions里声明了要使用的权限：activeTab允许读取当前标签页标题和 URL，scripting允许动态注入脚本，contextMenus允许创建右键菜单。

后端同学看到这里应该很熟悉：这不就是“权限认证”吗？你代码里想用某个 API，就得先在配置里声明权限，不然浏览器不会给你。

4.4 用Vue写popup页面

popup 页面的核心功能有三个：展示当前页面标题、输入关键词并触发高亮、复制 Markdown 链接。我用src/App.vue来实现。

<template> <div class="popup"> <h3>DevHighlight</h3> <label>关键词（逗号分隔）</label> <textarea v-model="keywords" rows="3" placeholder="ERROR,Exception,timeout"></textarea> <div class="actions"> <button @click="handleHighlight">高亮</button> <button @click="handleClear">清除</button> </div> <hr /> <p class="page-title">{{ pageTitle || '未获取到页面信息' }}</p> <button @click="copyMarkdownLink">复制 Markdown 链接</button> </div> </template> <script setup> import { ref, onMounted } from 'vue' const keywords = ref('') const pageTitle = ref('') const pageUrl = ref('') async function getActiveTab() { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }) return tab } onMounted(async () => { try { const tab = await getActiveTab() pageTitle.value = tab.title || '' pageUrl.value = tab.url || '' // 向 content script 请求更多页面信息，拿不到也没关系 const resp = await chrome.tabs.sendMessage(tab.id, { type: 'GET_PAGE_INFO' }) if (resp) { pageTitle.value = resp.title || pageTitle.value pageUrl.value = resp.url || pageUrl.value } } catch (e) { console.warn('无法获取页面信息：', e.message) } }) async function handleHighlight() { const list = keywords.value .split(/[,，]/) .map((s) => s.trim()) .filter(Boolean) if (!list.length) return const tab = await getActiveTab() try { const resp = await chrome.tabs.sendMessage(tab.id, { type: 'HIGHLIGHT', keywords: list }) alert(`高亮完成，命中 ${resp?.count || 0} 处`) } catch (e) { alert('无法在当前页面执行高亮，请确认此页面允许注入脚本') } } async function handleClear() { const tab = await getActiveTab() try { await chrome.tabs.sendMessage(tab.id, { type: 'CLEAR_HIGHLIGHT' }) } catch (e) { console.warn(e) } } async function copyMarkdownLink() { const text = `[${pageTitle.value}](${pageUrl.value})` try { await navigator.clipboard.writeText(text) alert('已复制 Markdown 链接') } catch (e) { alert('复制失败，请手动复制') } } </script> <style scoped> .popup { width: 280px; padding: 12px; font-family: system-ui, sans-serif; } .actions { display: flex; gap: 8px; margin-top: 8px; } .page-title { font-size: 13px; color: #666; word-break: break-all; } button { cursor: pointer; padding: 6px 12px; } </style>

注意几个细节：

• chrome.tabs.query({ active: true, currentWindow: true })是获取当前标签的固定写法。这里的 active 指的是当前激活标签，currentWindow 指的是当前浏览器窗口，防止在多个窗口时拿到别的窗口的标签。
• popup 打开时会自动获得焦点，所以navigator.clipboard.writeText在 popup 里调用通常没问题。如果你是点击按钮后复制，并且复制的是已经存在于页面上的文本，基本都能成功。
• chrome.tabs.sendMessage可能抛异常，比如当前页面是 chrome:// 开头的内部页面，或者页面没加载完导致 content script 不存在，所以调用时一定要 try-catch。

4.5 写content script：扫描DOM并高亮关键词

content script 是直接在网页里运行的脚本，负责扫描文本节点、找到关键词并包裹一层高亮span。这是整个插件里最“危险”的操作，因为直接操作 DOM 可能会破坏页面的原有结构。安全做法是用 TreeWalker 遍历文本节点，只针对纯文本节点做处理，不碰带子元素的节点。

// public/js/content.js (function () { function clearHighlights() { document.querySelectorAll('span[data-dev-highlight]').forEach((span) => { const textNode = document.createTextNode(span.textContent) span.replaceWith(textNode) }) } function highlightKeywords(keywords) { clearHighlights() const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT) const textNodes = [] while (walker.nextNode()) { textNodes.push(walker.currentNode) } let hitCount = 0 textNodes.forEach((node) => { const text = node.nodeValue if (!text || !text.trim()) return for (const kw of keywords) { if (!kw) continue if (text.toLowerCase().includes(kw.toLowerCase())) { hitCount++ const span = document.createElement('span') span.setAttribute('data-dev-highlight', '1') span.style.backgroundColor = '#ffe066' span.style.borderBottom = '2px solid #ff9800' span.style.borderRadius = '2px' span.style.padding = '0 1px' span.textContent = text node.parentNode.replaceChild(span, node) break } } }) return hitCount } chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.type === 'GET_PAGE_INFO') { const meta = document.querySelector('meta[name="description"]') sendResponse({ title: document.title, url: location.href, metaDescription: meta ? meta.content : '' }) } else if (message.type === 'HIGHLIGHT') { const count = highlightKeywords(message.keywords || []) sendResponse({ count }) } else if (message.type === 'CLEAR_HIGHLIGHT') { clearHighlights() sendResponse({ ok: true }) } return true }) })()

这段代码有几个关键点：

• document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT)会深度遍历 body 下所有文本节点，但不会进入<script>、<style>等标签内部？其实 TreeWalker 默认会遍历所有节点，不过因为设置了SHOW_TEXT，它返回的只有文本节点。为了安全，可以再加上过滤条件跳过 script/style 标签，但这个简单版本已经够用。
• 高亮前先clearHighlights()，避免多次点击高亮时叠加出大量嵌套 span。
• 加>// public/js/background.js chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.create({ id: 'highlight-selection', title: '高亮选中文本', contexts: ['selection'] }) }) chrome.contextMenus.onClicked.addListener((info, tab) => { if (info.menuItemId === 'highlight-selection' && tab?.id != null) { chrome.tabs .sendMessage(tab.id, { type: 'HIGHLIGHT', keywords: [info.selectionText.trim()] }) .catch(() => { console.warn('当前页面不支持注入高亮脚本') }) } })

  MV3 里 service worker 会被浏览器随时回收，所以你不要依赖全局变量保存状态，要用chrome.storage持久化。这个例子里我们没有复杂状态，所以右键菜单创建一次就行，onInstalled回调里创建是最常见的做法。

  4.7 构建、加载、调试全流程

  工程写完，执行构建：

  npm run build

  这里有一个非常重要的坑：Vite 默认构建出的index.html里引用静态资源的路径是绝对路径/assets/index-xxxx.js。我们的插件是直接从本地文件系统加载的，绝对路径会指向本地磁盘根目录，导致资源加载不到、popup 白屏。解决办法是在vite.config.js里设置base: './'，让构建产物改用相对路径。

  import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], base: './' })

  改完再打包，dist目录结构大致是这样的：

  dist/ ├── index.html ├── assets/ │ ├── index-xxxx.js │ └── index-xxxx.css ├── manifest.json └── js/ ├── background.js └── content.js

  然后打开浏览器，进入扩展管理页面（Chrome 是chrome://extensions，Edge 是edge://extensions），打开右上角的“开发者模式”，点击“加载已解压的扩展程序”，选择dist目录。插件就装上了。接下来随便打开一个包含日志的网页，点工具栏里的插件图标，输入ERROR,Exception，点击高亮，你会看到页面里所有匹配的关键词都被黄色底纹标出来了。再试试一键复制 Markdown 链接，然后到任意 Markdown 编辑器里粘贴，就能看到[页面标题](https://...)格式的链接。

  调试时记住三个入口：

  • popup 界面上右键 -> 检查，会打开 popup 的 DevTools，可以看 Vue 组件状态和 console；
  • 普通网页上右键 -> 检查，打开的是网页的 DevTools，里面能看到 content script 的输出；
  • 扩展管理页里，点到插件卡片上的“service worker”链接，可以打开后台脚本的调试窗口。

  5. 踩坑记录与排查速查表

  5.1 常见问题与解决方案

  我把自己实际开发中遇到的高频问题整理成了一张表，建议你遇到问题先对着查。

  现象	原因	解决办法
  popup 打开是白屏	Vite 构建路径是绝对路径	vite.config.js设置base: './'后重新 build
  点击高亮提示“无法在当前页面执行”	当前页面是 chrome:// 内部页或扩展商店，禁止注入脚本	try-catch 捕获，并提示用户切换到普通网页
  修改 content.js 后刷新页面但插件行为没变化	content script 被浏览器缓存，或插件未重新加载	扩展管理页点刷新按钮，刷新插件后再刷新网页
  chrome.tabs.sendMessage报 “Receiving end does not exist”	页面没有注入 content script	确认 manifest 的 content_scripts 覆盖配置，或页面刚打开还没注入成功就发消息
  剪