零基础用 Cursor 一小时搞定 Chrome 插件:manifest.json 与 AI 编程实战 1. 零基础做 Chrome 插件为什么卡在 manifest.json 这一步很多人第一次做 Chrome 插件卡住的地方不是 JavaScript而是那个看起来只有几十行的manifest.json。它就像插件的身份证加说明书告诉 Chrome 这个插件叫什么、要什么权限、在哪些页面运行、图标点开显示什么。文件写错一个逗号Chrome 就直接拒绝加载而且报错信息往往只有一句“无法加载扩展程序”让人摸不着头脑。我这次要带你做的是一个“网页价格高亮器”插件点一下工具栏图标当前页面里所有类似¥199、$29.99、€15.50的价格数字会被加上黄色背景。它足够简单一小时内能跑通又足够完整覆盖了 manifest 配置、内容脚本注入、弹窗交互三个核心环节。适合谁完全没写过插件的前端小白、想用 AI 提效的运营和产品同学以及想快速验证一个浏览器工具想法的开发者。整个流程里Cursor 负责把自然语言翻译成代码你负责描述需求和验证结果。但有一个前提你得知道一个能跑的插件长什么样否则 AI 给你的代码你没法判断对错。所以下面我会先给出一份可直接复制的manifest.json模板再讲怎么用 Cursor 生成和修改其余文件最后在 Chrome 里加载验证。实测下来真正花时间的不是写代码而是理解每个字段的作用和排查加载报错。这里有个关键点Chrome 从 Manifest V2 迁移到 V3 之后很多网上老教程的写法已经失效。比如background.scripts在 V3 里改成了background.service_workerbrowser_action改成了action。如果你直接抄旧代码加载时就会报“Manifest version 2 is deprecated”之类的错误。所以本文所有配置都以 V3 为准你可以放心跟做。另外AI 编程工具在生成 manifest 时偶尔会混用 V2 和 V3 的字段这是新手最容易踩的坑。解决办法不是背字段而是学会用 Chrome 的报错信息反推问题。后面第五节我会把几个真实报错和对应修法列出来你遇到时直接对照即可。2. 用 TaoToken 给 Cursor 接上稳定模型manifest.json 生成不跑偏Cursor 自带的模型有时会因为网络或额度问题中断尤其是在生成多个文件、需要连续对话的时候。我试过在生成content.js正则匹配逻辑时突然断掉前面的上下文丢了只能重来。后来我把 Cursor 的模型接入切到 TaoToken 的 API 上稳定性好了很多而且可以在一个地方统一管理 Key 和模型 ID。TaoToken 是一个模型 API 聚合服务官网是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 。它的作用是让你用一个 Base URL 和 Key就能调用多种主流模型不用分别去各家申请。对做插件这种需要反复对话、改代码的场景来说省去了切换账号的麻烦。具体怎么在 Cursor 里配置打开 Cursor进入设置找到 Models 或 OpenAI API Key 相关的配置项。Cursor 允许你覆盖默认的 API 地址填入 TaoToken 的 Base URL 和你在控制台生成的 Key然后指定一个模型 ID比如claude-3-5-sonnet或gpt-4o。这样 Cursor 的对话和代码生成就会走 TaoToken 的通道。如果你还没有 Key可以去控制台创建https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 在 API Keys 页面生成一个。注意 Key 只在创建时显示一次复制保存好。模型 ID 可以参考文档里的列表https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。配置好之后你在 Cursor 里按 CmdK 或 CtrlK 呼出对话框输入需求模型就会通过 TaoToken 返回结果。这样做的好处是生成 manifest.json 这种对格式要求严格的文件时模型不会因为中途断连而输出半截 JSON修改 content.js 的正则时上下文保持完整AI 能记住你之前的要求。有一点要提醒Cursor 的配置界面版本更新较快如果找不到覆盖 API 地址的入口可以在设置里搜索 “OpenAI” 或 “Base URL”。不同版本位置略有差异但核心就是三件套Base URL 填https://taotoken.net/apiKey 填你生成的Model ID 填你选的模型。这三样填对Cursor 就能正常调用。如果你更习惯用命令行工具做辅助TaoToken 也支持 Claude Code 这类工具接入文档里有对应说明。不过对做 Chrome 插件来说Cursor 的可视化文件管理和对话式改代码已经够用没必要额外折腾。3. 可复制的 manifest.json 模板与 Cursor 提示词配置这一节是核心给你一份能直接用的manifest.json以及配套的 Cursor 提示词。先看模板你可以新建一个文件夹比如叫price-highlighter在里面创建manifest.json把下面内容粘进去{ manifest_version: 3, name: Price Highlighter, version: 1.0.0, description: 一键高亮网页中的所有价格数字方便快速比价。, permissions: [activeTab, scripting], action: { default_title: 高亮价格, default_popup: popup.html }, icons: { 16: icons/icon16.png, 48: icons/icon48.png, 128: icons/icon128.png }, content_scripts: [ { matches: [all_urls], js: [content.js], run_at: document_idle } ] }逐字段说明一下方便你理解而不是死记。manifest_version必须是 3这是 V3 的标志。name和version是插件在扩展管理页显示的名称和版本号版本号建议用1.0.0这种三段式。description是描述会显示在卡片上。permissions里activeTab让你能操作当前标签页scripting允许注入脚本。action定义了工具栏图标的行为default_popup指向点击后弹出的小窗口 HTML。icons是图标路径没有图标文件时可以先删掉这段Chrome 会用默认图标不影响功能。content_scripts是关键它让content.js自动注入到所有页面run_at设为document_idle表示页面加载完再执行避免找不到元素。注意matches里的all_urls表示所有网站。如果你只想在特定网站生效可以改成https://*.taobao.com/*这种。但测试阶段用all_urls最方便。接下来是 Cursor 提示词。打开 Cursor用 “Open Folder” 打开你刚建的price-highlighter文件夹。然后按 CmdK输入下面这段我在做一个 Chrome Manifest V3 插件文件夹里已有 manifest.json。请帮我生成三个文件popup.html、popup.js、content.js。功能是点击插件图标弹出一个小窗口窗口里有一个按钮“高亮价格”点击后向当前标签页注入逻辑把页面中所有价格数字如 ¥199、$29.99、€15.50用黄色背景高亮。content.js 里用正则匹配货币符号开头或结尾的数字要避免匹配日期和电话号码。请直接给出完整代码。回车后Cursor 会生成这几个文件。如果它生成的manifest.json和你已有的冲突以你粘贴的模板为准让 AI 只生成其余文件。生成完检查一下content.js里的正则常见写法是/(?:¥||\$|€|£)\s?\d(?:[.,]\d{1,2})?/g这个能匹配大多数价格格式。如果你想让高亮更智能比如只高亮可见区域、或者排除输入框里的数字可以继续选中content.js代码按 CmdK 追加指令“请优化正则排除 input 和 textarea 标签内的内容并且给高亮元素加一个 class 叫 price-highlight方便后续取消高亮。” AI 会基于当前代码修改不会从头重写。这里有个小技巧每次让 AI 改代码前先让它“解释一下当前代码的逻辑”确认它理解对了再改。否则它可能自作主张改掉你不想动的部分。这个习惯能省很多返工时间。4. 加载插件并验证请求看到价格被高亮才算成功文件齐了之后在 Chrome 里加载。打开 Chrome地址栏输入chrome://extensions/回车。右上角打开“开发者模式”开关。点击左上角“加载已解压的扩展程序”选择你的price-highlighter文件夹。如果一切正常插件卡片会出现在列表里名称是 Price Highlighter。如果加载时报错先别慌看卡片上的“错误”按钮点开会有具体信息。最常见的两类一是 JSON 格式错误比如多了个逗号或少了引号二是字段名写错比如把action写成browser_action。对照第三节的模板逐行检查即可。加载成功后打开一个电商页面比如京东或淘宝的搜索页。点击浏览器工具栏上的插件图标应该弹出一个小窗口里面有“高亮价格”按钮。点击按钮页面上的价格数字应该立刻变成黄色背景。如果没有反应按 F12 打开开发者工具切到 Console 面板看有没有报错。常见的是content.js没注入成功或者正则没匹配到。验证请求是否走通可以看 Cursor 那边的对话是否正常返回。如果你配置了 TaoToken可以在控制台的日志里看到调用记录。这一步的意义是确认模型通道没问题后续改代码不会中途断掉。实测下来从建文件夹到看到高亮顺利的话 20 分钟以内。剩下的时间主要花在调整正则和排查小问题上。比如有些网站价格是图片形式正则匹配不到这属于正常限制不用纠结。我们的目标是跑通流程不是做一个完美产品。如果你想让插件支持“再次点击取消高亮”可以让 Cursor 加一个 toggle 逻辑在content.js里维护一个状态变量点击时判断当前是否已高亮已高亮就移除 class。指令可以是“请给 content.js 增加切换功能第一次点击高亮第二次点击取消高亮通过给元素添加和移除 price-highlight 类实现。” 这样插件就更实用了。5. 常见报错排查401、local proxy failed、reading choices 怎么修做插件过程中报错主要分两类Chrome 加载报错和 AI 调用报错。下面列几个我实际遇到过的附上修法。第一类Chrome 加载时报 “Manifest file is missing or unreadable”。这通常是文件名不对必须是manifest.json不能是manifest.json.txt或Manifest.json。Windows 默认隐藏扩展名容易中招。在文件夹里开启“显示文件扩展名”确认一下。第二类报 “Manifest version 2 is deprecated, please migrate to version 3”。说明你的manifest_version写成了 2或者 AI 生成时混用了 V2 字段。改成 3并把browser_action改成actionbackground.scripts改成background.service_worker。第三类AI 调用报 401。这是 Key 无效或没填对。检查 TaoToken 控制台里的 Key 是否复制完整有没有多余空格。如果 Key 被删除或过期重新生成一个。Base URL 确认是https://taotoken.net/api不要多加斜杠或路径。第四类报 “local proxy failed” 或连接超时。这通常是 Base URL 填错或者本地网络环境导致请求发不出去。确认地址拼写正确不要带 UTM 参数到 API 地址里。API 地址就是https://taotoken.net/api干净的。第五类报 “reading choices” 或返回结构解析失败。这多半是模型 ID 写错了或者该模型不支持当前调用方式。去文档里核对模型 ID 的准确拼写换成明确支持的模型再试。如果用的是 Claude Code 或 Codex 这类工具注意它们的配置文件格式不同Claude Code 用 settings 配置Codex 用auth.jsonCline MCP 用单独的配置项。不管哪种核心三件套都是 Base URL、Key、Model ID缺一不可。第六类插件加载成功但点击没反应。先确认content.js是否在manifest.json的content_scripts里注册了matches是否覆盖当前网站。然后在content.js开头加一行console.log(content script loaded)重新加载插件刷新页面看 Console 有没有输出。没有输出说明脚本没注入检查matches和文件路径。第七类高亮位置错乱或把整段文字都高亮了。这是正则太宽泛。把正则收紧只匹配货币符号加数字的组合并且限制数字长度。可以让 Cursor 帮你写测试用例输入几个样本字符串验证正则是否只匹配价格。排查的核心思路是先看报错信息定位是 Chrome 侧还是 AI 侧Chrome 侧查 manifest 和文件路径AI 侧查 Base URL、Key、Model ID 三件套。大部分问题都能在这两步内解决。6. 从价格高亮到更多玩法把插件接入你的日常工作流跑通价格高亮之后你可以用同样的方法扩展更多功能。比如做一个“页面信息提取”插件点击后把当前页面的标题、URL、选中文字整理成 Markdown 复制到剪贴板。Cursor 提示词可以是“请修改 popup.js点击按钮后获取当前标签页的标题和 URL以及页面中选中的文字拼接成 Markdown 格式并复制到剪贴板。” 这类插件对做竞品分析、整理资料很实用。如果你经常需要调用模型处理页面内容可以把 TaoToken 的 API 接入插件本身。比如做一个“选中文字让 AI 解释”的插件用户在页面选中一段文字点击插件图标插件调用模型 API 返回解释显示在弹窗里。这需要你在popup.js里用fetch调用https://taotoken.net/api的对话接口把选中文字作为输入。模型对话入口可以参考https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。对于需要长期做编码和 Agent 任务的同学可以考虑 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 它在连续对话和代码生成场景下更划算。如果你用的是 Claude Code 做命令行辅助接入文档在这里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 里面有详细的配置步骤。最后说一个实用技巧把插件项目用 Git 管理起来每次让 AI 改代码前先 commit 一次。这样如果 AI 改坏了可以一键回滚不用手动撤销。这个习惯在做多个插件、反复迭代时特别有用。你不需要懂复杂的 Git 命令Cursor 内置了源代码管理面板点几下就能提交和回退。从零到一做出一个能用的 Chrome 插件核心不是写代码而是把需求描述清楚、把配置填对、把报错读懂。这三件事练熟了后面做什么工具都快。