企业官网建设流程全解析

1. 为什么我劝你先别急着写代码，而是先跟 Cursor 聊清楚需求

浏览器翻译插件这个东西，听起来像是个小工具，但它其实是个特别适合拿来练手 Cursor 纯对话开发的项目。原因很简单：它涉及 UI 注入、划词监听、网络请求、结果渲染这几个典型环节，麻雀虽小五脏俱全。你如果能用自然语言把它跑通，后面做更复杂的插件心里就有底了。

我先把结论放前面：零代码不是说你什么都不用管，而是说你不用手写代码，但你必须把需求说清楚、把配置贴对、把报错原样丢回去。这三件事做不好，Cursor 再强也救不了你。

先说说这个插件到底能做什么。你打开任意一个英文网页，选中一段文字，旁边弹出一个小浮层，上面显示中文翻译，下面还能顺手让模型帮你总结一下这段内容。适合谁？适合每天要读英文文档、英文论文、英文技术博客，但英语又不是母语的人。也适合那些想验证 Cursor 工程能力、想看看纯对话到底能走多远的人。

我试过用纯对话的方式从零搭这个插件，整个过程大概一小时，中间踩了几个坑，后面会一个个讲。你现在要做的第一件事，不是打开编辑器，而是打开 Cursor，新建一个空文件夹，然后在里面建一个需求.md文件。这个文件就是你跟 Cursor 之间的合同，写得越具体，后面返工越少。

需求文件里至少要写清楚这几件事：插件叫什么名字、在哪些页面上生效、用户怎么触发翻译、翻译结果展示在哪里、调用哪个模型接口、有没有总结功能、界面大概长什么样。你不用写得像产品经理那么正式，用大白话就行。比如你可以写“用户在网页上选中一段英文，松开鼠标后，在选中文字旁边出现一个小卡片，卡片上半部分是中文翻译，下半部分是一个‘总结’按钮，点了之后显示这段文字的中文摘要”。

这里有个关键点：你要明确告诉 Cursor 这个插件是 Chrome Manifest V3 的扩展。因为 V2 和 V3 的写法差别很大，尤其是 background 脚本和权限声明部分。如果你不说，Cursor 有可能给你生成 V2 的代码，加载的时候直接报错。我一开始就吃了这个亏，后面会详细讲。

另外，需求文件里最好把“不做什么”也写清楚。比如“不要弹出新标签页”“不要修改原网页的 DOM 结构”“不要自动翻译整页”。这些约束能帮 Cursor 收敛方案，避免它给你搞出一个过度复杂的实现。

写完需求文件之后，先别急着让它写代码。你可以先让它根据需求生成一个界面原型，就是一个静态的 HTML 文件，能看到浮层长什么样。这一步很重要，因为界面是你能直观看到的东西，改起来也快。如果界面不对，后面逻辑写得再好也白搭。

原型确认之后，再让它基于需求和原型生成完整的插件代码。这时候你要做一件事：把模型 API 的文档地址也喂给 Cursor。因为翻译和总结都要调模型接口，接口的请求格式、鉴权方式、返回结构，Cursor 需要知道。你不给它文档，它就可能凭记忆瞎写，跑起来就是 401 或者解析错误。

说到模型接口，这里就引出下一个问题：你用什么来提供这个接口。你可以用任何兼容 OpenAI 格式的服务，只要把 Base URL、API Key、Model ID 三样东西配对就行。下面我会以 TaoToken 为例，把配置过程完整走一遍，因为它同时支持对话模型和编码场景，后面你想把插件升级成更复杂的 Agent 也方便。

2. 把 TaoToken 接进 Cursor：Base URL、API Key、Model ID 一个都不能少

很多人卡在这一步，不是因为难，而是因为信息不全。你只填了 Key，没填 Base URL，请求就发不出去；你填了 Base URL，但 Model ID 写错了，返回就是模型不存在。所以这一节我把三件套拆开讲，你照着填就行。

先说 TaoToken 是什么。它是一个模型调用平台，提供兼容 OpenAI 格式的 API 接口，你可以用它来调用对话模型、编码模型，也可以用它来管理 API Key 和用量。官网地址是 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 地址是 https://taotoken.net/api 。注意 API 地址后面不加任何多余路径，具体端点由你的代码或工具去拼。

你要做的第一件事是拿到 API Key。登录之后进入控制台，找到 API Keys 页面，新建一个 Key，复制下来。这个 Key 只显示一次，复制完再关页面。如果你用的是 Cursor，可以在 Cursor 的设置里找到 Models 或者 OpenAI API Key 的配置项，把 Key 填进去。但光填 Key 不够，你还要改 Base URL。

Cursor 默认走的是它自己的服务，你要让它走 TaoToken，就得在设置里覆盖 Base URL。具体位置在 Cursor 设置的 Models 选项卡里，找到 OpenAI API Key 那一栏，下面有一个 Override OpenAI Base URL 的输入框，填https://taotoken.net/api。注意不要加/v1，也不要加/chat/completions，这些由 Cursor 自己拼。填完之后点 Verify，如果 Key 和 Base URL 都对，它会显示验证通过。

接下来是 Model ID。你在 Cursor 里添加自定义模型的时候，需要填一个模型名称。这个名称必须和 TaoToken 支持的模型 ID 一致。比如你想用 Claude 系列的编码模型，就填对应的 ID；想用 GPT 系列的对话模型，就填对应的 ID。填错的话，请求会返回 model not found。如果你不确定有哪些可用模型，可以去模型对话页面看看当前支持的列表，地址是 https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite 。

这里有个细节：Cursor 里配置的模型和你在插件代码里调用的模型是两回事。Cursor 里的模型是用来帮你写代码的，插件代码里的模型是用来做翻译和总结的。你可以在插件代码里也用 TaoToken 的接口，这样你只需要维护一套 Key 和 Base URL。具体做法是在插件里发请求到https://taotoken.net/api/chat/completions，请求头带上Authorization: Bearer 你的Key，请求体里指定 model 和 messages。

如果你后面想把这个插件升级成更复杂的 Agent，比如让它能自动抓取页面内容、分段翻译、生成摘要，那你可以考虑用 Coding Plan，地址是 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite 。它更适合长期编码和 Agent 场景，额度和管理方式也更省心。

现在你把三件套凑齐了：Base URL 是https://taotoken.net/api，API Key 是你复制的那串，Model ID 是你选定的模型名称。接下来就是把这些东西写进插件的配置文件里。注意，API Key 不要硬编码在 content script 里，因为 content script 是注入到网页里的，用户能看到。正确做法是把请求逻辑放在 background service worker 里，content script 通过消息传递把选中的文字发给 background，background 再去调接口。这样 Key 只存在于扩展的 background 环境里，相对安全。

下面是一个 background service worker 的配置片段，你可以直接复制到background.js里，然后把YOUR_API_KEY和YOUR_MODEL_ID替换成你自己的：

const API_BASE = "https://taotoken.net/api"; const API_KEY = "YOUR_API_KEY"; const MODEL_ID = "YOUR_MODEL_ID"; async function callModel(text, task) { const systemPrompt = task === "translate" ? "你是一个翻译引擎，把用户输入的英文翻译成简体中文，只输出译文，不要解释。" : "你是一个总结助手，用简体中文总结用户输入的内容，控制在三句话以内。"; const response = await fetch(`${API_BASE}/chat/completions`, { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${API_KEY}` }, body: JSON.stringify({ model: MODEL_ID, messages: [ { role: "system", content: systemPrompt }, { role: "user", content: text } ], temperature: 0.3 }) }); if (!response.ok) { const errText = await response.text(); throw new Error(`API error ${response.status}: ${errText}`); } const data = await response.json(); return data.choices[0].message.content; } chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { if (request.action === "translate" || request.action === "summarize") { callModel(request.text, request.action) .then(result => sendResponse({ ok: true, result })) .catch(err => sendResponse({ ok: false, error: err.message })); return true; } });

这段代码里，API_BASE就是 TaoToken 的 API 地址，API_KEY和MODEL_ID就是三件套里的另外两件。注意return true这一行，它是用来保持消息通道打开的，因为callModel是异步的。如果你忘了写，content script 会收到 undefined。

manifest 文件里需要声明 background service worker 和 host 权限。下面是一个最小化的manifest.json：

{ "manifest_version": 3, "name": "划词翻译总结", "version": "1.0", "description": "选中网页文字，一键翻译并总结", "permissions": ["activeTab", "scripting"], "host_permissions": ["https://taotoken.net/*"], "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"], "css": ["content.css"] } ], "action": { "default_title": "划词翻译" } }

注意host_permissions里要加上https://taotoken.net/*，否则 background 发请求会被浏览器拦截。content_scripts的matches写成<all_urls>表示在所有页面上生效，你也可以限制成特定域名。

content script 负责监听鼠标抬起事件，拿到选中的文字，然后给 background 发消息。下面是一个简化版：

let popup = null; document.addEventListener("mouseup", (e) => { const selection = window.getSelection(); const text = selection.toString().trim(); if (!text || text.length < 2) return; const range = selection.getRangeAt(0); const rect = range.getBoundingClientRect(); showPopup(rect, text); }); function showPopup(rect, text) { if (popup) popup.remove(); popup = document.createElement("div"); popup.className = "translate-popup"; popup.style.left = `${rect.left + window.scrollX}px`; popup.style.top = `${rect.bottom + window.scrollY + 8}px`; popup.innerHTML = ` <div class="translate-result">翻译中...</div> <button class="summarize-btn">总结</button> `; document.body.appendChild(popup); chrome.runtime.sendMessage({ action: "translate", text }, (res) => { const resultEl = popup.querySelector(".translate-result"); if (res && res.ok) { resultEl.textContent = res.result; } else { resultEl.textContent = "翻译失败：" + (res ? res.error : "无响应"); } }); popup.querySelector(".summarize-btn").addEventListener("click", () => { const resultEl = popup.querySelector(".translate-result"); resultEl.textContent = "总结中..."; chrome.runtime.sendMessage({ action: "summarize", text }, (res) => { if (res && res.ok) { resultEl.textContent = res.result; } else { resultEl.textContent = "总结失败：" + (res ? res.error : "无响应"); } }); }); }

CSS 你可以让 Cursor 帮你生成，也可以自己写一个简单的浮层样式。关键是position: absolute和z-index要够高，不然会被网页内容盖住。

到这里，配置部分就齐了。你有了 manifest、background、content script，三件套也填进了 background。接下来就是加载到 Chrome 里验证。

3. 加载插件到 Chrome 并完成第一次划词翻译验证

打开 Chrome，地址栏输入chrome://extensions/，右上角打开“开发者模式”，然后点“加载已解压的扩展程序”，选择你那个包含 manifest.json 的文件夹。如果一切正常，你会看到插件卡片出现，没有红色报错。

这时候你打开任意一个英文网页，比如一篇英文技术博客，选中一段文字，松开鼠标。如果浮层出现并且显示“翻译中...”，然后变成中文，说明整条链路通了。如果浮层没出现，先看 Chrome 控制台有没有报错，再看扩展页面有没有报错。

我实测下来，第一次加载最容易出的问题是 manifest 版本写错。如果你让 Cursor 生成代码时没说清楚，它可能给你生成 Manifest V2 的写法，比如"manifest_version": 2，然后 background 用"scripts": ["background.js"]而不是"service_worker"。V2 在最新版 Chrome 里已经不支持了，加载时会直接报错。解决办法很简单：把manifest_version改成 3，把 background 改成 service_worker 形式。

第二个常见问题是 host_permissions 没加。你 background 里 fetch 的地址是https://taotoken.net/api/chat/completions，但 manifest 里只写了"permissions": ["activeTab"]，没有host_permissions。这时候请求会被 CORS 或者扩展权限拦截，控制台会报Failed to fetch或者net::ERR_BLOCKED_BY_CLIENT。加上"host_permissions": ["https://taotoken.net/*"]就好了。

第三个问题是 content script 没注入。你打开网页，选中文字没反应，F12 控制台也没有任何日志。这时候去chrome://extensions/看插件卡片，点“详细信息”，看“错误”那一栏有没有提示。常见原因是matches写错了，比如写成了"https://example.com/*"但你测试的页面不是这个域名。改成<all_urls>或者你实际测试的域名。

第四个问题是消息传递失败。你在 content script 里chrome.runtime.sendMessage，但 background 里没有return true，或者 background 报错了但你没捕获。这时候 content script 收到的res是 undefined，浮层会显示“翻译失败：无响应”。解决办法是在 background 的callModel里把错误 catch 住，然后sendResponse({ ok: false, error: err.message })，这样你就能在浮层上看到具体错误。

第五个问题是 API 返回 401。这个最直接，就是 Key 不对或者没带。检查 background 里的Authorization头是不是Bearer加你的 Key，注意 Bearer 后面有一个空格。另外检查 Key 有没有复制完整，有没有多余的空格或换行。

第六个问题是 API 返回 404。这个通常是 Base URL 拼错了。你在 background 里写的${API_BASE}/chat/completions，如果API_BASE是https://taotoken.net/api，拼出来就是https://taotoken.net/api/chat/completions，这是对的。如果你写成了https://taotoken.net/api/v1，拼出来就是https://taotoken.net/api/v1/chat/completions，可能就 404 了。所以 Base URL 不要带/v1。

第七个问题是返回结果解析失败，报Cannot read properties of undefined (reading 'choices')。这说明data.choices是 undefined，通常是接口返回了错误信息而不是正常结果。你可以在 background 里先把data打印出来看看，或者检查response.ok是否为 false。如果response.ok是 false，你应该先读response.text()而不是response.json()，因为错误响应可能不是 JSON 格式。

第八个问题是浮层位置不对。你选中文字后，浮层出现在页面左上角或者别的地方。这是因为rect的坐标是相对于视口的，你加了window.scrollX和window.scrollY之后才是相对于文档的。如果你没加，页面滚动后浮层就会错位。另外如果网页本身有 CSS transform，getBoundingClientRect的坐标可能不准，这种情况比较少见，可以先不管。

第九个问题是浮层被网页样式覆盖。你明明注入了浮层，但看不到。打开 F12，用元素选择器找到浮层，看它的 computed style，可能是z-index太低，或者被某个父元素的overflow: hidden裁掉了。解决办法是把浮层的z-index设成 2147483647，并且确保它直接挂在document.body下。

第十个问题是修改代码后没生效。你改了 background.js，但插件行为没变。这是因为 service worker 有缓存，你需要在chrome://extensions/页面点一下插件卡片上的刷新按钮，或者点“重新加载”。content script 也一样，改完之后要重新加载插件，然后刷新网页。

把这些问题一个个排掉之后，你的插件就能稳定工作了。整个过程就是“加载、运行、发现问题、看报错、丢给 Cursor、改完重新加载”的循环。Cursor 能识别你粘贴的报错文本，也能识别截图，所以遇到问题直接把控制台截图丢给它，让它告诉你改哪里。

4. 用 Cursor 纯对话迭代：从能跑到好用，只差几句提示词

插件能跑通之后，你会发现它离“好用”还有距离。比如浮层关不掉、翻译结果太长撑破页面、总结按钮点了没反应、选中文字后浮层挡住了原文。这些问题都不需要你手写代码，你只需要把现象描述给 Cursor，让它改。

我总结了几条提示词模板，你可以直接拿去用。第一条是修 bug 的：“我在 Chrome 里加载了这个插件，选中文字后浮层出现了，但点击页面其他地方浮层不消失。请修改 content.js，让浮层在点击外部区域时自动移除。”第二条是调样式的：“浮层里的翻译结果太长时，会超出屏幕右边。请修改 content.css，让浮层最大宽度 360px，超出部分自动换行，并且距离视口边缘至少 16px。”第三条是加功能的：“我想在浮层里加一个复制按钮，点击后把翻译结果复制到剪贴板，并显示‘已复制’提示两秒。”

这些提示词的特点是：说清楚现象、说清楚期望、说清楚涉及哪个文件。你不需要懂 JavaScript，你只需要把看到的问题描述清楚。Cursor 会根据你的描述去改对应的代码。

还有一个技巧：当你不知道问题出在哪的时候，可以让 Cursor 帮你加日志。比如你说“我在 background.js 里加了 console.log，但在扩展的 service worker 控制台里看不到输出，请帮我检查日志加对地方没有。”Cursor 会告诉你 service worker 的日志要在chrome://extensions/页面点击“Service Worker”链接才能看到，而不是在网页的 F12 控制台里。

另外，如果你发现翻译质量不稳定，比如有时候翻译成繁体，有时候夹杂英文，你可以在 system prompt 里加约束。比如把“你是一个翻译引擎”改成“你是一个专业的英译中翻译引擎，只输出简体中文，不要输出繁体中文，不要保留英文原文，不要添加任何解释”。这个改动只需要在 background.js 里改一行字符串，不需要动逻辑。

如果你想让插件支持更多语言，比如日文翻译成中文，你可以在 content script 里加一个语言检测，或者直接让模型自动识别。提示词可以写：“请修改 background.js，让 system prompt 支持自动识别源语言，并统一翻译成简体中文。”Cursor 会帮你把 prompt 改好。

还有一个实用功能是“翻译并替换原文”。有些人不喜欢浮层，他们希望选中文字后直接替换成中文。这个改动稍微大一点，但也可以用对话完成。你可以说：“请修改 content.js，选中文字后不显示浮层，而是直接把选中的文字替换成翻译结果，并在旁边加一个小按钮可以还原原文。”Cursor 会给你生成对应的 DOM 操作代码。

整个迭代过程不需要你理解代码细节，但你需要理解“现象”和“期望”之间的差距。你描述得越具体，Cursor 改得越准。如果你只说“不好用”，它不知道从哪里下手。如果你说“浮层在页面滚动后位置错乱”，它就知道要去改坐标计算。

最后提醒一点：每次让 Cursor 改完代码，你都要重新加载插件并刷新网页，否则改动静不会生效。这个循环看起来麻烦，但熟练之后一次改动也就十几秒。一小时里大部分时间其实花在描述问题和验证结果上，真正写代码的时间几乎为零。

如果你后面想把这个插件做成更完整的项目，比如加上历史记录、生词本、多模型切换，那你可以考虑用 Coding Plan 来管理更长的上下文和更多的调用额度。地址是 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite 。它适合这种持续迭代的场景，不用每次担心额度不够。

5. 常见报错对照表：401、local proxy failed、reading choices 怎么破

这一节我把调试过程中真实遇到的报错和解决办法列出来，你遇到类似问题可以直接对照。

第一个报错是401 Unauthorized。控制台或者浮层上显示这个，说明你的 API Key 不对。检查三件事：Key 有没有复制完整、Authorization头有没有写对、Key 有没有过期。如果你是在 Cursor 里配置模型时遇到 401，那可能是 Base URL 没覆盖，Cursor 还在走它自己的服务。去设置里确认 Override OpenAI Base URL 填的是https://taotoken.net/api。

第二个报错是local proxy failed或者Failed to fetch。这个通常出现在 background 发请求的时候。原因可能是 host_permissions 没加，或者网络环境有问题。先检查 manifest.json 里有没有"host_permissions": ["https://taotoken.net/*"]。如果有，再去chrome://extensions/看 service worker 的控制台，那里会显示更详细的错误。如果是net::ERR_BLOCKED_BY_CLIENT，说明请求被扩展权限拦截了。

第三个报错是Cannot read properties of undefined (reading 'choices')。这个说明data.choices是 undefined，接口返回的不是正常结果。你可以在 background 里把response.status和response.text()打印出来，看看实际返回了什么。常见原因是 Model ID 写错了，接口返回了{"error": {"message": "model not found"}}。这时候你去模型对话页面确认一下可用的模型 ID，地址是 https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite 。

第四个报错是OAuth相关的。如果你在 Cursor 里登录或者验证模型时看到 OAuth 错误，那通常是 Cursor 自己的账号体系问题，和 TaoToken 的 API Key 无关。你可以先在 Cursor 里退出登录再重新登录，或者检查网络是否能正常访问 Cursor 的服务。如果你只是用 TaoToken 的 API，不走 Cursor 的 OAuth，那这个错误不会影响你。

第五个报错是Manifest version 2 is deprecated。这个说明 Cursor 给你生成的 manifest.json 是 V2 的。你只需要把"manifest_version": 2改成3，然后把"background": {"scripts": ["background.js"]}改成"background": {"service_worker": "background.js"}。如果还有"browser_action"，改成"action"。

第六个报错是Could not load background script。这个通常是文件名不对，或者路径不对。检查 manifest.json 里的"service_worker"值是不是和你实际的文件名一致。比如你写的是"background.js"，但文件实际叫background.ts，那就加载不了。

第七个报错是Content script not injected。你打开网页，选中文字没反应，F12 控制台也没有任何日志。去chrome://extensions/看插件卡片的“错误”按钮，如果有错误会显示在那里。常见原因是matches写错了，或者 content script 里有语法错误导致整个脚本没执行。

第八个报错是Unchecked runtime.lastError: The message port closed before a response was received。这个说明 content script 发消息后，background 没有及时调sendResponse。检查 background 的监听函数里有没有return true，以及callModel是不是异步的。如果是异步的，必须return true才能保持通道打开。

第九个报错是Refused to load the script。这个通常是 CSP 问题，某些网站的内容安全策略会阻止扩展注入脚本。这种情况比较少见，如果遇到，可以尝试把 content script 的注入方式改成"run_at": "document_idle"，或者用chrome.scripting.executeScript动态注入。

第十个报错是API rate limit exceeded。这个说明你的调用频率太高了。你可以在 background 里加一个简单的节流，比如同一个页面 1 秒内只允许一次请求。或者去控制台看看用量，确认是不是额度用完了。

把这些报错对照表存下来，下次遇到直接搜关键词。大部分问题都不是代码逻辑问题，而是配置问题或者权限问题。你只要把报错原文复制给 Cursor，它基本都能告诉你改哪个文件哪一行。

6. 从翻译插件到更多可能：把 TaoToken 用顺手的几个建议

插件跑通之后，你可以把同样的方法用到其他小工具上。比如做一个“选中代码解释”的插件，选中一段代码，浮层显示这段代码在做什么。或者做一个“选中英文单词查词”的插件，浮层显示音标、释义、例句。这些都可以用同一套 background + content script 的结构，只需要改 system prompt 和浮层样式。

如果你想让插件更稳定，建议把 API Key 放在 background 里，不要放在 content script 里。因为 content script 是注入到网页里的，任何网页都能通过window访问到你的变量。虽然 Chrome 的隔离环境提供了一定保护，但把 Key 放在 background 是更安全的做法。

另外，建议你在 background 里加一个简单的错误处理和重试。比如请求失败时，等 1 秒再试一次，最多试两次。这样偶尔的网络抖动不会直接让用户看到“翻译失败”。代码可以让 Cursor 帮你写，你只需要说“请在 background.js 的 callModel 里加一个重试机制，失败后等 1 秒重试，最多两次”。

如果你后面想把这个插件分享给别人用，你需要把 API Key 做成用户自己填的。可以在插件的 options 页面加一个输入框，让用户填自己的 Key 和 Base URL，然后存在chrome.storage.local里。background 发请求时从 storage 里读。这个改动也可以用对话完成，提示词是“请给插件加一个 options 页面，让用户填写 API Key 和 Base URL，保存在 chrome.storage.local，background 发请求时从 storage 读取”。

最后，如果你发现自己经常需要调用模型来做各种小工具，可以多看看 TaoToken 的文档和模型列表，了解当前支持的模型和接口格式。文档地址是 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite ，API Keys 管理页面是 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 。把这两个页面收藏起来，后面配任何工具都用得上。

整个流程走下来，你会发现零代码开发的核心不是“不写代码”，而是“把写代码的活交给模型，你把需求、配置、报错这三件事管好”。需求写清楚，配置填对，报错原样丢回去，剩下的就是等它改完重新加载。一小时做出一个能用的浏览器翻译插件，真的不难。