企业官网建设流程全解析

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_worker，browser_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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，在 API Keys 页面生成一个。注意 Key 只在创建时显示一次，复制保存好。模型 ID 可以参考文档里的列表：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 。

配置好之后，你在 Cursor 里按 Cmd+K 或 Ctrl+K 呼出对话框，输入需求，模型就会通过 TaoToken 返回结果。这样做的好处是：生成 manifest.json 这种对格式要求严格的文件时，模型不会因为中途断连而输出半截 JSON；修改 content.js 的正则时，上下文保持完整，AI 能记住你之前的要求。

有一点要提醒：Cursor 的配置界面版本更新较快，如果找不到覆盖 API 地址的入口，可以在设置里搜索 “OpenAI” 或 “Base URL”。不同版本位置略有差异，但核心就是三件套：Base URL 填https://taotoken.net/api，Key 填你生成的，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文件夹。然后按 Cmd+K，输入下面这段：

我在做一个 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代码，按 Cmd+K 追加指令：“请优化正则，排除 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改成action，background.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.json，Cline 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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 。

对于需要长期做编码和 Agent 任务的同学，可以考虑 Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，它在连续对话和代码生成场景下更划算。如果你用的是 Claude Code 做命令行辅助，接入文档在这里：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，里面有详细的配置步骤。

最后说一个实用技巧：把插件项目用 Git 管理起来，每次让 AI 改代码前先 commit 一次。这样如果 AI 改坏了，可以一键回滚，不用手动撤销。这个习惯在做多个插件、反复迭代时特别有用。你不需要懂复杂的 Git 命令，Cursor 内置了源代码管理面板，点几下就能提交和回退。

从零到一做出一个能用的 Chrome 插件，核心不是写代码，而是把需求描述清楚、把配置填对、把报错读懂。这三件事练熟了，后面做什么工具都快。