1. 项目概述

上周五下午3点，我突发奇想打算开发一个能自动高亮网页中技术术语的Chrome插件。作为一个从未接触过浏览器扩展开发的前端工程师，我原本预计至少要花两天时间学习文档和调试。但这次尝试用Gemini3.5作为编程助手，从创建空文件夹到功能完整的插件在Chrome中运行，整个过程仅耗时40分钟。

这个插件的主要功能是：当用户浏览技术文档网站时，自动识别并高亮显示特定的技术术语（如"service worker"、"manifest.json"等），点击高亮术语可显示简短定义。核心实现涉及manifest配置、后台脚本通信和内容脚本注入三大模块。

2. 开发环境准备

2.1 基础工具链配置

我使用的是VS Code + Chrome DevTools组合，这是目前最顺手的开发环境配置：

# 创建项目目录结构 mkdir tech-terms-highlighter cd tech-terms-highlighter npm init -y

注意：虽然Chrome插件可以直接用纯JS开发，但初始化npm项目可以方便后续添加构建工具。我在实际开发中后来加入了Vite用于热加载，这能显著提升开发效率。

2.2 关键依赖安装

虽然核心功能不依赖第三方库，但为了更好的开发体验，我推荐安装：

npm install vite @vitejs/plugin-chrome-extension -D

这个Vite插件支持：

• 实时重载（修改代码后自动刷新插件）
• 多入口打包
• 开发/生产环境区分

3. 核心实现步骤

3.1 Manifest文件配置

manifest.json是每个Chrome插件的入口文件，我的版本如下：

{ "manifest_version": 3, "name": "Tech Terms Highlighter", "version": "1.0", "description": "自动高亮技术术语并提供解释", "background": { "service_worker": "src/background.js", "type": "module" }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["src/content.js"] } ], "permissions": ["storage"], "action": { "default_popup": "popup.html" } }

几个关键配置说明：

1. manifest_version: 必须为3（MV3是当前标准）
2. background: 使用service worker替代旧版的background page
3. content_scripts: 通过matches控制脚本注入范围
4. permissions: 声明需要的API权限

避坑提示：MV3不再支持远程代码加载，所有脚本必须本地化。这是与MV2的重要区别。

3.2 与Gemini3.5的协作过程

开发中最耗时的部分是设计术语识别算法。传统方案可能需要：

1. 构建技术术语词库
2. 实现DOM遍历和文本匹配
3. 处理性能优化

但借助Gemini3.5，我直接描述了需求："请帮我编写一个能识别网页中技术术语并高亮显示的JavaScript函数，术语包括manifest.json、service worker等内容脚本相关词汇。"

生成的方案核心逻辑如下：

// src/content.js const TECH_TERMS = { 'manifest.json': '插件配置文件，定义元数据和功能', 'service worker': '后台脚本，处理事件和网络请求', // ...其他术语 }; function highlightTerms() { const walker = document.createTreeWalker( document.body, NodeFilter.SHOW_TEXT ); while (walker.nextNode()) { const node = walker.currentNode; if (node.parentNode.nodeName === 'SCRIPT') continue; let newHTML = node.nodeValue; Object.keys(TECH_TERMS).forEach(term => { const regex = new RegExp(`\\b${term}\\b`, 'gi'); newHTML = newHTML.replace( regex, `<span class="tech-term">// src/background.js const highlightedTerms = new Map(); chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.type === 'TERM_CLICKED') { const termData = { definition: message.definition, pageUrl: sender.url, timestamp: Date.now() }; highlightedTerms.set(message.term, termData); chrome.storage.local.set({ terms: [...highlightedTerms] }); } }); chrome.runtime.onInstalled.addListener(() => { chrome.storage.local.get('terms', (data) => { if (data.terms) { data.terms.forEach(([term, data]) => { highlightedTerms.set(term, data); }); } }); });

4. 开发效率提升技巧

4.1 实时调试方案

传统插件开发最痛苦的是每次修改都要：

1. 打包插件
2. 打开chrome://extensions
3. 点击"重新加载"
4. 刷新测试页面

通过Vite配置实现热更新：

// vite.config.js import { defineConfig } from 'vite'; import chromeExtension from '@vitejs/plugin-chrome-extension'; export default defineConfig({ plugins: [chromeExtension()], build: { rollupOptions: { input: 'src/manifest.json' } } });

配合package.json脚本：

{ "scripts": { "dev": "vite", "build": "vite build" } }

现在只需：

1. npm run dev
2. 加载开发版插件
3. 代码修改后会自动：
   • 重新构建
   • 通知插件更新
   • 保持页面状态刷新内容脚本

4.2 Gemini3.5提示工程

经过多次尝试，我发现这些技巧能显著提升AI辅助效率：

1. 上下文限定：明确说明"这是用于Chrome插件MV3的内容脚本"
2. 错误处理：要求"添加健壮的错误处理和边界条件检查"
3. 性能提示：指定"需要考虑大文档下的性能优化"
4. 格式要求：说明"使用ES6模块语法，符合MV3规范"

例如获取更好的响应：

"作为Chrome扩展专家，请帮我编写一个符合MV3规范的service worker脚本，需要：

• 使用module类型
• 处理来自内容脚本的消息
• 将数据保存到chrome.storage.local
• 包含错误处理和类型检查"

5. 常见问题与解决方案

5.1 内容脚本不生效

现象：插件加载了但页面没有高亮效果

排查步骤：

1. 检查manifest.json中content_scripts的matches规则
2. 确认脚本文件路径正确
3. 在chrome://extensions点击"错误"按钮查看日志
4. 在DevTools中检查加载的脚本是否包含预期代码

典型解决方案：

// 错误的matches "matches": ["https://example.com"] // 正确的通配写法 "matches": ["https://*/*", "http://*/*"]

5.2 权限不足错误

现象：调用chrome API时报权限错误

解决方案：

1. 在manifest.json中添加所需权限
2. MV3必须显式声明每个使用的API
3. 敏感权限如"tabs"需要用户点击授权

{ "permissions": [ "storage", "activeTab" ], "host_permissions": [ "<all_urls>" ] }

5.3 Service Worker意外终止

现象：后台脚本间歇性停止工作

优化方案：

1. 减少全局状态依赖
2. 重要数据及时持久化到storage
3. 添加生命周期日志：

// 记录状态变化 const logState = (msg) => { chrome.storage.local.get(['debugLog'], (data) => { const logs = data.debugLog || []; logs.push(`${Date.now()}: ${msg}`); chrome.storage.local.set({ debugLog: logs.slice(-100) }); }); }; self.addEventListener('install', () => logState('SW installed')); self.addEventListener('activate', () => logState('SW activated'));

6. 进阶优化方向

6.1 术语库动态加载

初始实现将术语硬编码在代码中，更专业的做法是：

1. 通过chrome.storage.sync同步用户自定义术语
2. 从后端API动态加载最新术语定义
3. 支持按网站类型加载不同术语集

// 动态加载示例 async function loadTermDefinitions() { const resp = await fetch('https://api.example.com/terms'); const terms = await resp.json(); chrome.storage.local.set({ terms }); } // 在content script中使用 chrome.storage.local.get('terms', (data) => { if (data.terms) { highlightTerms(data.terms); } });

6.2 性能优化策略

处理大型文档时的改进方案：

1. 使用requestIdleCallback分批次处理
2. 对长文本节点进行分段处理
3. 添加防抖机制避免频繁执行

// 优化后的高亮逻辑 function debouncedHighlight() { let scheduled = false; return () => { if (!scheduled) { scheduled = true; requestIdleCallback(() => { highlightTerms(); scheduled = false; }, { timeout: 1000 }); } }; } const lazyHighlight = debouncedHighlight(); new MutationObserver(lazyHighlight).observe( document.body, { childList: true, subtree: true } );

6.3 用户自定义配置

通过options页面增加配置项：

1. 在manifest.json声明options页面

{ "options_page": "options.html" }

2. 实现配置界面

<!-- options.html --> <form id="config-form"> <label> <input type="checkbox" name="autoHighlight"> 自动高亮新内容 </label> <button type="submit">保存</button> </form>

3. 同步配置到content script

// options.js document.getElementById('config-form').addEventListener('submit', (e) => { e.preventDefault(); const formData = new FormData(e.target); chrome.storage.sync.set({ autoHighlight: formData.get('autoHighlight') === 'on' }); });

这次开发经历让我深刻体会到，在AI辅助下，原型开发效率可以提升一个数量级。关键是要：

1. 明确划分AI和开发者的职责边界
2. 建立高效的验证和迭代流程
3. 保持对生成代码的质量控制

最终的插件代码已开源在GitHub，包含完整的Vite配置和开发脚本，可以作为Chrome插件开发的入门模板。对于想要尝试AI辅助开发的同行，我的建议是：从明确的小功能点开始，逐步构建对AI生成代码的鉴别和调整能力，最终形成人机协作的高效工作流。