1. 从零开始的划词翻译插件为什么选 Cursor Chrome 扩展网页上遇到英文技术文档、日文商品说明、韩文评论最烦的就是复制、切标签页、粘贴到翻译网站、再切回来。一篇文章读下来光切窗口就能把思路打断十几次。我想要的其实很简单鼠标划一下翻译结果直接浮在文字旁边看完自动消失。这个需求听起来像要写不少代码但实际拆开看Chrome 扩展的划词翻译核心只有三件事监听鼠标选中事件、拿到选中的文字、调用翻译接口把结果渲染到页面上。这三件事用自然语言描述清楚Cursor 的 Agent 模式就能帮你把文件生成出来。你不需要看懂content.js里的每一行只需要会描述需求、会加载插件、会填 API 参数。这篇教程面向的是完全没有编程基础、但想快速做出一个能用的浏览器扩展的人。全程围绕四个关键词展开Cursor、Chrome 插件、manifest.json、百度翻译 API。我会把可直接复制的manifest.json配置、百度翻译 API 的接入参数、以及给 Cursor 的提示词模板都写出来你照着做20 分钟内能跑通「划词 → 浮层显示译文 → 3 秒自动关闭」的完整链路。需要提前说明的是Cursor 负责帮你生成代码百度翻译开放平台负责提供翻译能力两者缺一不可。Cursor 新用户有免费额度百度翻译 API 有免费调用量个人做小工具完全够用。下面从环境准备开始一步步来。2. 前置准备Cursor 安装、百度翻译 API 申请与项目目录2.1 安装 Cursor 并确认 Agent 模式Cursor 的安装和普通软件一样官网下载对应系统的安装包一路下一步即可。安装完成后打开你会看到一个类似 VS Code 的界面。关键在左侧或右侧的对话面板0.46 版本之前叫 Composer0.46 之后叫 Chat两者都要切到Agent 模式。Agent 模式和普通问答的区别在于它能直接在你的项目目录里创建、修改文件而不是只给你一段代码让你自己复制。新建一个空文件夹比如D:\cursor-translate或者~/cursor-translate用 Cursor 打开这个文件夹。这一步很重要因为 Agent 生成的文件会落在这个目录里后面加载插件时也是从这个目录选。2.2 申请百度翻译 API 的 APPID 和密钥打开百度翻译开放平台注册账号后进入控制台选择「通用文本翻译」创建应用。创建时会让你填应用名称和用途随便填一个「个人学习」即可。创建完成后你能看到两个关键值参数名说明示例格式APP ID应用唯一标识2024xxxxxx密钥用于签名计算AbCdEfGhIjKlMnOp接口地址通用翻译 APIhttps://fanyi-api.baidu.com/api/trans/vip/translate百度翻译 API 的调用需要做签名签名规则是APPID query salt 密钥拼接后取 MD5。这个逻辑你不需要自己写把 APPID 和密钥直接发给 Cursor让它生成对应的签名代码就行。免费版有每秒 1 次、每月一定字符量的限制个人划词翻译完全够用。注意密钥不要直接硬编码在会公开分享的代码里。自己做本地使用没问题如果要发布到 Chrome 应用商店建议改成让用户在插件设置页填写自己的密钥。2.3 理解 Chrome 扩展的最小文件结构一个能用的 Chrome 扩展Manifest V3最少需要这些文件manifest.json扩展的配置文件声明权限、入口脚本、版本号。content.js注入到网页里的脚本负责监听划词、渲染翻译浮层。background.js后台服务脚本负责调用翻译 API避免跨域问题。styles.css浮层的样式。这四个文件 Cursor 会一次性帮你生成。你只需要在提示词里说清楚「用 Manifest V3」「需要 content script 和 background service worker」「浮层要能自动关闭」。3. 可复制配置manifest.json、百度翻译参数与 Cursor 提示词模板3.1 直接可用的 manifest.json下面这份manifest.json是 Manifest V3 格式声明了activeTab、scripting、storage权限并把content.js注入到所有页面background.js作为 service worker 运行。你可以直接复制{ manifest_version: 3, name: 划词翻译助手, version: 1.0.0, description: 选中网页文字浮层显示百度翻译结果, permissions: [activeTab, scripting, storage], host_permissions: [https://fanyi-api.baidu.com/*], background: { service_worker: background.js }, content_scripts: [ { matches: [all_urls], js: [content.js], css: [styles.css], run_at: document_idle } ], action: { default_title: 划词翻译助手 } }几个容易踩坑的点host_permissions必须包含百度翻译的域名否则 background 里的 fetch 会被拦截content_scripts的matches用all_urls表示所有网站生效run_at设为document_idle让脚本在页面加载完成后再注入避免影响页面性能。3.2 百度翻译 API 的接入参数与签名逻辑百度翻译通用 API 的请求方式是 POST 到https://fanyi-api.baidu.com/api/trans/vip/translate参数如下参数是否必填说明q是要翻译的文本from是源语言auto表示自动检测to是目标语言如en、zhappid是你的 APP IDsalt是随机数sign是MD5(appid q salt 密钥)签名部分在background.js里实现。你可以把下面这段提示词直接发给 Cursor让它生成完整的 background 逻辑请在 background.js 中实现 1. 监听 content.js 发来的消息 {type: translate, text: ...} 2. 调用百度翻译 APIfrom 用 autoto 用 en 3. APPID 用 你的APPID密钥用 你的密钥 4. 签名算法MD5(appid q salt 密钥)salt 用 Date.now() 5. 把翻译结果通过 sendResponse 返回给 content.js 6. 处理错误情况返回 {error: ...}3.3 给 Cursor 的完整提示词模板第一次生成时把下面这段完整提示词发给 Cursor 的 Agent 模式帮我实现一个 Chrome 划词翻译插件要求 1. 使用 Manifest V3 2. 用户在网页上选中文字后鼠标位置附近弹出浮层显示翻译结果 3. 浮层显示后点击页面任意位置或等待 3 秒自动关闭 4. 翻译调用百度翻译 APIfromautotoen 5. 需要 content.js、background.js、styles.css、manifest.json 四个文件 6. 注意中文编码问题使用 encodeURIComponent 7. 浮层样式要简洁白底圆角阴影最大宽度 300px生成后 Cursor 会列出四个文件你点 Accept 全部接受。如果浮层位置不对或者样式不好看继续用自然语言让它改比如「浮层位置改成鼠标右下方 10px」「字体改成 14px」。4. 验证请求加载插件、划词触发与成功结果确认4.1 在 Chrome 中加载未打包扩展打开 Chrome地址栏输入chrome://extensions/右上角打开「开发者模式」。点击「加载已解压的扩展程序」选择你刚才用 Cursor 打开的那个文件夹比如D:\cursor-translate。加载成功后扩展列表里会出现「划词翻译助手」没有红色报错就说明manifest.json格式正确。如果出现「Manifest file is missing or unreadable」检查文件名是不是manifest.json而不是manifest.json.txt。如果出现「Service worker registration failed」点开「错误」按钮看具体行号通常是background.js里有语法错误把报错信息复制给 Cursor 让它修。4.2 划词触发翻译的验证动作打开任意英文网页比如一篇 MDN 的技术文档。用鼠标选中一段英文正常情况下 200 毫秒内鼠标附近会出现一个白色浮层里面显示中文译文。如果浮层没出现按 F12 打开开发者工具切到 Console 面板看有没有报错。验证 API 是否真正被调用可以在开发者工具的 Network 面板里筛选translate选中文字后应该能看到一条对fanyi-api.baidu.com的请求状态码 200Response 里有trans_result字段。如果状态码是 54003说明签名错误如果是 52001说明 APPID 或密钥不对。4.3 成功结果的判断标准一次成功的划词翻译应该满足三个条件浮层出现在鼠标附近而不是页面角落译文内容与原文语义一致3 秒后浮层自动消失点击页面其他位置也能立即关闭。如果译文显示的是[object Object]或者undefined说明 background 返回的数据结构没解析对把background.js里sendResponse的部分发给 Cursor 让它检查。5. 常见报错排查401、local proxy failed、reading choices 与 OAuth5.1 百度翻译返回 54003 签名错误这是最常见的错误。原因通常是签名拼接顺序不对或者 MD5 输出没有转成小写。百度要求sign MD5(appid q salt 密钥)注意q是原始文本不要先做 URL 编码再参与签名。正确做法是先用原始q算签名请求时再对q做encodeURIComponent。把下面这段发给 Cursor 让它修正签名计算时 q 必须用原始文本不能先 encodeURIComponent。 请求体里 q 才需要 encodeURIComponent。请检查 background.js 的签名逻辑。5.2 扩展报错 local proxy failed 或 net::ERR_FAILED这个报错通常出现在 background 的 fetch 请求上。Manifest V3 的 service worker 里发跨域请求必须在host_permissions里声明目标域名。检查你的manifest.json是否有host_permissions: [https://fanyi-api.baidu.com/*]。如果没有加上后重新加载扩展。还有一种情况是请求用了http://而不是https://Chrome 会拦截混合内容。确认接口地址是https://fanyi-api.baidu.com/api/trans/vip/translate。5.3 控制台报 Cannot read properties of undefined (reading choices)这个报错说明代码在按 OpenAI 风格的响应结构解析数据但百度翻译返回的是{trans_result: [{dst: ...}]}。这是 Cursor 生成代码时可能混淆了不同 API 的返回格式。把content.js里解析响应的部分发给 Cursor明确告诉它「百度翻译返回结构是 trans_result 数组取 dst 字段」。5.4 OAuth 相关报错与 Codex auth.json 的类比如果你在别的工具里见过OAuth token expired或者auth.json not found这类报错本质都是凭证管理问题。百度翻译用的是 APPID 密钥的静态凭证不存在 OAuth 刷新问题但如果你把密钥写错了表现和 token 失效一样——请求被拒。排查方法很简单在百度翻译控制台重新复制一次 APPID 和密钥粘贴到background.js里注意不要有多余空格。如果你同时在使用 Claude Code 或 Codex 这类编码工具它们的凭证文件通常是~/.claude/settings.json或~/.codex/auth.json。这些工具的 Base URL、Key、Model ID 三件套配置逻辑和你在百度翻译里填 APPID、密钥、接口地址是同一类事情地址对了、凭证对了、模型/接口选对了请求才能通。6. 从划词翻译到长期编码把 TaoToken 接入你的 Cursor 工作流插件跑通之后你可能会想继续用 Cursor 做更多小工具比如批量图片下载、网页数据抓取、自动填表。这时候 Cursor 的免费额度可能不够用或者你想在 Cursor 里调用不同的模型来对比效果。TaoToken 提供的就是这类模型接入能力它兼容 OpenAI 风格的接口可以配置到 Cursor、Cline、Claude Code 等工具里。配置方式不复杂。在 Cursor 的设置里找到模型配置填入 Base URL 和 API Key再选一个 Model ID。Base URL 填https://taotoken.net/apiAPI Key 在控制台的 API Keys 页面生成。如果你用的是 Claude Code配置文件通常在~/.claude/settings.json格式如下{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: 你的Key } }Codex 用户则编辑~/.codex/auth.json把 Base URL 和 Key 填进去。Cline 或 Roo Code 这类 VS Code 插件在设置里选 OpenAI CompatibleBase URL 填https://taotoken.net/apiModel ID 按你需要的填。配好之后你在 Cursor 里继续做插件、写脚本、调 API都可以走这个通道。对于长期做编码和 Agent 任务的人Coding Plan 更适合按量使用比单次购买更划算。如果你只是想先验证某个模型的效果可以直接在模型对话页面测试不用改本地配置。回到划词翻译这个插件本身它已经是一个完整可用的工具了。你可以继续让 Cursor 加功能比如支持多语言目标切换、加一个设置页让用户填自己的 APPID、把翻译历史存到chrome.storage里。每次改完回到chrome://extensions/点一下刷新按钮再回网页测试。整个过程不需要你读懂代码只需要你能描述清楚「我想要什么」和「现在哪里不对」。这就是 Cursor 做小工具最舒服的地方。