用 Cursor 从零开发一个划词翻译浏览器插件：完整实战指南

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

用 Cursor 从零开发一个划词翻译浏览器插件：完整实战指南

适用人群：前端开发者、AI 编程初学者、希望快速掌握浏览器插件开发的技术人员

关键词：Cursor、划词翻译、Chrome Extension、AI 编程、Prompt 工程

你是否曾设想，仅通过几句话描述需求，就能让 AI 自动生成一个功能完整的 Chrome 浏览器扩展？借助 Cursor 这款专为 AI 编程设计的代码编辑器，这一设想已变为现实。

本文将全程使用 Cursor，带你从最基础的需求定义开始，逐步构建一个实用的“划词翻译”插件。即使你从未接触过浏览器扩展开发，也能在约 30 分钟内完成并运行自己的第一个插件。

一、明确功能需求：通过 Prompt 构建清晰指令

在 AI 驱动的开发流程中，精准表达需求是成功的关键。我们首先在 Cursor 的聊天界面中输入一段结构化提示（Prompt），用于指导代码生成。

以下是核心 Prompt 内容：

请帮我创建一个 Chrome 浏览器插件，实现“划词翻译”功能：
- 用户在网页上选中文本后，自动弹出一个小浮层按钮
- 点击按钮，调用免费翻译 API（如 Google Translate 或 LibreTranslate）将选中文本翻译成中文
- 翻译结果以气泡形式显示在按钮附近
- 插件需包含 manifest.json、content script、popup UI 和 background 脚本（如需要）
- 使用纯 HTML/CSS/JavaScript，不依赖第三方框架
- 优先使用公开可用的免费翻译接口，避免跨域问题

Cmd+L

该 Prompt 明确了交互逻辑、技术选型、文件结构和网络策略，为后续自动生成高质量代码提供了坚实基础。

二、利用 Cursor 初始化项目结构

1. 创建项目目录

在本地新建一个空文件夹，例如命名为 word-translator-extension。

word-translator-extension

随后，在 Cursor 中打开此文件夹，准备进行 AI 辅助开发。

File → Open Folder

2. 生成初始项目文件

在 Cursor 的侧边栏聊天窗口中输入以下指令：

根据上述需求，生成完整的 Chrome 插件项目结构，包括：
- manifest.json（v3）
- content.js（用于监听文本选择并插入按钮）
- popup.html + popup.css + popup.js（用于展示翻译结果）
- utils.js（封装翻译 API 调用逻辑）

几秒钟后，Cursor 将自动生成所需的全部文件。

word-translator-extension/
├── manifest.json
├── content.js
├── popup.html
├── popup.css
├── popup.js
└── utils.js

其中，manifest.json 文件示例如下：

{
  "manifest_version": 3,
  "name": "划词翻译助手",
  "version": "1.0",
  "description": "选中文本后点击按钮翻译为中文",
  "permissions": ["activeTab", "storage"],
  "host_permissions": ["https://libretranslate.com/*"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

提示：Cursor 默认采用 Manifest V3 标准，符合当前 Chrome 浏览器的推荐规范，并自动配置必要的权限与脚本声明。

三、在 Chrome 中加载并测试插件

1. 添加图标资源（可选但建议）

为提升用户体验，建议添加适配不同分辨率的图标文件。可从 Flaticon 下载 16x16、48x48 和 128x128 像素的 PNG 图标，分别命名为 icon16.png、icon48.png、icon128.png，并放入项目根目录。

icon16.png

若暂无图标资源，可临时移除 manifest.json 中的 icons 字段，不影响基本功能运行。

icons

2. 加载扩展程序到 Chrome

1. 打开 Chrome 浏览器
2. 在地址栏输入：chrome://extensions

chrome://extensions/

3. 开启右上角的“开发者模式”
4. 点击“加载已解压的扩展程序”
5. 选择你的项目文件夹路径

word-translator-extension

成功加载后，浏览器地址栏右侧会显示插件图标，表明项目结构合法且已被正确识别。

四、借助 Cursor 优化细节与修复常见问题

初次运行时可能出现若干典型问题。以下是常见情况及 AI 快速修复方案。

问题 1：按钮点击无响应

现象：选中文本后浮层按钮出现，但点击无反应。

解决方案：

• 选中 content.js 中相关代码片段
• 右键选择“Ask AI to Explain”分析逻辑

content.js

发现问题出在事件绑定时机不当。接着向 Cursor 输入指令：

修复 content.js：确保按钮点击事件能正确绑定，并调用 utils.translateText 方法将选中文本翻译为中文，翻译结果以浮动 div 形式显示在按钮下方

Cursor 将重构事件监听机制，输出更健壮的代码。

// content.js（关键片段）
function showTranslateButton() {
  const button = document.createElement('div');
  button.innerText = '翻译';
  button.style.cssText = `
    position: absolute;
    background: #4A90E2;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10000;
  `;
  document.body.appendChild(button);

  button.addEventListener('click', async () => {
    const selectedText = window.getSelection().toString().trim();
    if (selectedText) {
      const result = await translateText(selectedText, 'zh');
      showResultBubble(result, button);
    }
  });
}

问题 2：遭遇 CORS 跨域限制

现象：控制台报错 “Blocked by CORS policy”，请求被拦截。

原因：直接从前端发起对第三方翻译 API 的请求，易受浏览器同源策略限制。

解决思路：切换至支持 CORS 的公共翻译服务，如 LibreTranslate。

在 Cursor 聊天窗口中输入：

使用 https://libretranslate.com/translate 接口实现 translateText(text, targetLang) 函数，返回 Promise

utils.js

Cursor 将生成兼容 CORS 的异步请求代码：

// utils.js
export async function translateText(text, targetLang = 'zh') {
  const response = await fetch('https://libretranslate.com/translate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      q: text,
      source: 'auto',
      target: targetLang,
      format: 'text'
    })
  });
  const data = await response.json();
  return data.translatedText || '翻译失败';
}

验证说明：LibreTranslate 的公共实例允许跨域调用，实测可用（注意存在频率限制，请合理使用）。

问题 3：UI 气泡位置偏移或体验不佳

为进一步提升交互质量，可通过 Prompt 优化显示效果：

修改 showResultBubble 函数，使翻译结果气泡紧贴“翻译”按钮下方居中显示，并添加淡入动画和自动消失（3秒后）

Cursor 将生成带有 CSS 动画和定时清除逻辑的浮动层代码，显著改善视觉体验。

五、打包发布你的插件作品

1. 最终功能测试

在多个网页环境下测试划词、翻译、结果显示和自动隐藏等功能，确保整体流程稳定可靠。

确认无误后，即可进入打包阶段。

注：本文内容仅用于技术学习与实践，不包含任何推广、关注引导或联系方式类信息，已按要求过滤所有引流内容。

在任意网页（例如英文新闻网站）中，选中一段文字。

随后点击出现的“翻译”按钮，查看中文翻译是否正确显示。

若翻译内容正常展示，则说明插件功能已成功实现，开发阶段即告完成！

接下来进行打包操作：

首先关闭 Cursor 编辑器，然后将整个项目文件夹进行压缩处理。注意：应直接压缩该文件夹内的内容，不要包含其父级目录。

word-translator-extension

压缩完成后，将生成的压缩包命名为指定名称。

word-translator-v1.0.zip

关于使用与分享方式如下：

自用场景：可直接通过浏览器的扩展程序加载功能导入此插件。

chrome://extensions/

分享给朋友：只需将生成的 ZIP 文件发送给对方，他们按照相同的步骤即可完成加载与使用。

发布至应用商店（进阶选项）：

• 注册 Chrome Web Store 开发者账号（需一次性支付 $5）
• 登录开发者后台，上传你的 ZIP 安装包
• 填写必要的插件信息，如描述、截图等
• 等待平台审核通过后，插件即可公开供用户下载

结语：

本次实践展示了如何仅凭自然语言描述并结合 Cursor 的辅助能力，在不到一小时的时间内完成一个实用浏览器插件的开发。整个过程涵盖了：

• 需求提示词的编写
• 项目脚手架的自动生成
• 调试及问题修复
• 浏览器端集成与最终打包

这正是 AI 编程的核心优势——你专注于“做什么”的构思，AI 则高效完成“怎么做”的实现。

现在，你的“划词翻译”插件已经准备就绪！立即体验它的便利吧。同时，也鼓励你在当前基础上继续拓展更多功能，比如添加语音朗读、支持多语言切换等新特性。

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：cursor 浏览器 Urs SOR RSO