
做 Chrome 插件从 0 到 1第一步常常不是写 manifest.json而是开发工具选型VS Code 还是别的 IDE要不要脚手架开发环境怎么搭原始文章里这个阶段是准备去豆包或者 Kimi 问清楚。现在换个更顺手的路径先打开 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_content 创建一把 Key再把 Codex 的 Base URL 填成 https://taotoken.net/api同一把 Key 就从豆包/Kimi 的网页问答切到 Codex 的本地开发问答。TaoToken 只负责鉴权和请求转发不替你做 Chrome 插件选型判断选型逻辑仍然让 Codex 按原文的 VS Code、免配置、manifest V3 方向输出清单。1. 从豆包/Kimi 的 Chrome 插件选型问答切到 Codex1.1 原文在这一步到底问什么原文标题是“资深程序员从0-1开发Chrome插件 - 01开发工具选择”它的第一阶段并不是直接写业务代码而是把开发环境定下来。这一步通常会去豆包或者 Kimi 问几个很具体的问题Chrome 插件开发用什么编辑器、要不要装 Node、需不需要 webpack、manifest V3 和 V2 有什么区别、怎么在本地加载未打包扩展、调试 popup 和 service worker 分别看哪里。这类问题在网页对话框里问好处是快坏处也明显。你问完 Kimi再想换一个模型追问可能要重新开窗口、重新贴上下文你换到另一个 AI 编程工具又得去它的官网注册、看额度、复制 Key。最后不是被 Chrome 插件本身卡住而是被“多工具、多 Key、多模型”卡住。1.2 同一把 Key 切到 Codex 的差异Codex 更适合接着这类问题往下做。它不是只给你一段泛泛的“推荐 VS Code”而是可以按你给的约束输出可执行的环境清单比如目录结构、manifest V3 字段、调试入口、最小示例文件。关键变化是你不再每个工具单独注册 Key而是先在 TaoToken 拿一把 Key再把它填进 Codex 的配置里。这里的切换不是“换一个聊天网站”而是把同一个模型问答场景搬到本地开发工具里。你在网页里问的是“Chrome 插件选什么工具”在 Codex 里问的是“按 VS Code、免配置、manifest V3 给我一套本地开发环境并解释每个文件的作用”。前者偏选型后者偏落地但底层都还是大模型问答只是入口从浏览器标签页换成了 Codex。注意Codex 只生成、解释、对照代码和配置不会直接替你打开 Chrome也不会直接操作你的本地工程。加载扩展、点击刷新、执行命令这些动作仍然由你在本地完成。2. 创建 YOUR_API_KEY在 TaoToken 官网要做的三件事2.1 注册并创建一把给 Codex 用的 Key先打开 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_content 完成注册和登录。这个过程对应原文里“去豆包或者 Kimi 准备问答环境”的那一步只不过现在不是开网页对话框而是先拿一把统一 API Key。登录后进控制台找到 API Keys 页面创建一把新 Key。创建时建议给 Key 起一个能看出用途的名字比如codex-chrome-extension。这样你后面在 Codex、模型对话、其他 AI 编程工具里都复用同一把 Key 时不会分不清哪把是哪把。复制出来的 Key 不要直接写进代码仓库先用一个临时文本或密码管理器存起来后面配置里统一写成占位符YOUR_API_KEY。如果你还没有账号直接从这里开始TaoToken 创建 Key 。这里也是你后面看模型广场、查用量、再创建新 Key 的入口。2.2 在模型广场确认模型 IDCodex 配置里必须有一个模型 ID。不要凭记忆写一个带日期后缀的名字也不要把网上看到的旧模型名直接当正式配置。正确做法是打开 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_content 的模型广场看当前列表里可用的模型 ID复制你要用的那个。原文里推荐“免配置”所以模型选择也不用搞得太复杂。先用一个你熟悉的通用模型把 Codex 通道跑通再根据 Chrome 插件问答的体验决定要不要换。模型广场的列表会变化文章里不写死某个型号配置示例里统一用YOUR_MODEL_ID占位你复制时替换成当时列表里的真实 ID。3. 在 ~/.codex/config.toml 里把 Base URL 填成 https://taotoken.net/api3.1 Codex 的最小可用配置Codex 不是用ANTHROPIC_*那套环境变量而是读~/.codex/config.toml。如果你在 Windows 上对应路径通常是%USERPROFILE%\.codex\config.toml。先确认这个文件存在没有就新建。然后写入一个自定义 provider把base_url指向 TaoToken 的接口地址model YOUR_MODEL_ID model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chat这段配置里最重要的是三个点。第一model填模型广场里复制来的 ID不要自己编。第二base_url固定写https://taotoken.net/api末尾不要加/v1。第三env_key写的是环境变量名不是 Key 本身真正的 Key 放在环境变量里。提示这里的https://taotoken.net/api是填进工具的接口 Base URL不是给人点的官网页面。注册、创建 Key、看模型列表仍然去https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_content。3.2 设置环境变量并让 Codex 读到接着设置TAOTOKEN_API_KEY。macOS 或 Linux 可以临时在终端里执行export TAOTOKEN_API_KEYYOUR_API_KEYWindows PowerShell 用$env:TAOTOKEN_API_KEYYOUR_API_KEY如果你希望每次打开终端都生效就把它写进 shell 的启动文件比如~/.zshrc或~/.bashrc。但不要把真实 Key 提交到 Git。更稳妥的做法是本地用一个只属于自己的环境变量文件或者用系统凭据管理工具。配置完成后重启终端再启动 Codex。此时 Codex 发请求时会把https://taotoken.net/api作为入口把YOUR_API_KEY放进请求头。TaoToken 负责鉴权和转发Codex 负责根据你的提示词生成 Chrome 插件开发环境清单。两者分工明确不要指望 TaoToken 替你做选型判断。4. 让 Codex 按 VS Code、免配置、manifest V3 输出环境清单4.1 给 Codex 的提示词要像需求单切到 Codex 之后不要只问“Chrome 插件开发工具选什么”。这种问法在网页对话框里也许够用但在 Codex 里太宽容易得到一篇泛泛的科普。更有效的提示词要带上原文的推荐逻辑VS Code、免配置、manifest V3并且要求它输出本地开发环境清单。可以这样写我在从 0 到 1 开发一个 Chrome 插件请按下面约束给我本地开发环境清单 1. 首选 VS Code不要推荐重型 IDE 2. 尽量免配置不引入 webpack、vite 这类构建工具 3. 必须使用 manifest V3 4. 列出需要安装的软件、VS Code 扩展、Chrome 调试入口 5. 给出最小目录结构和每个文件的作用 6. 只生成和解释代码不要直接连接或操作我的本地机器。这段提示词的作用是把原文里“问豆包/Kimi”的场景搬到 Codex 里继续。你拿到的不是一句“用 VS Code”而是一份可以照着搭的清单。4.2 Codex 应该给出的清单长什么样按上面的约束Codex 通常会给出类似下面这样的开发环境清单。你可以把它当成对照表检查它有没有跑偏。项目推荐选择说明编辑器VS Code轻量Chrome 插件项目不需要重型 IDE浏览器Chrome 稳定版用chrome://extensions加载未打包扩展运行时原生 HTML/CSS/JS免配置方案不强制 Node构建工具先不引入webpack/vite 会提高起步复杂度清单版本manifest V3manifest_version: 3调试入口Chrome 开发者工具popup、content script、service worker 分开看扩展管理开发者模式打开“加载已解压的扩展程序”这里有一个容易被忽略的点Chrome 插件的 service worker 和普通网页的 JavaScript 不一样它有独立生命周期。你在 Codex 里可以让它解释“manifest V3 的 background.service_worker 什么时候被唤醒”但验证仍然要你在本地打开扩展管理页点 service worker 链接看控制台。如果 Codex 给出的清单里出现大量构建工具、复杂脚手架、甚至要求你安装一堆全局包那就说明提示词没有把“免配置”约束住。把约束再强调一遍让它重新输出。5. 用最小 manifest V3 工程复现原文选型结论5.1 目录结构与 manifest.json环境清单确认后下一步是让 Codex 生成一个最小可加载的 manifest V3 工程。你可以在本地新建一个文件夹比如chrome-extension-demo。目录可以先保持极简chrome-extension-demo/ ├── manifest.json ├── popup.html ├── popup.js ├── content.js └── background.js然后让 Codex 按 manifest V3 生成manifest.json。一个可加载的最小版本类似{ manifest_version: 3, name: Chrome 插件选型验证, version: 0.0.1, description: 用于验证 VS Code、免配置、manifest V3 的最小工程, permissions: [activeTab, scripting], action: { default_title: 选型验证, default_popup: popup.html }, background: { service_worker: background.js }, content_scripts: [ { matches: [https://*/*], js: [content.js] } ] }这份文件能帮你验证三件事manifest V3 的action怎么写background.service_worker怎么挂content_scripts怎么注入。它不是为了做完整产品而是为了复现原文“VS Code、免配置、manifest V3”的选型结论。5.2 popup、content 与 background 的最小代码接着让 Codex 生成三个 JavaScript 文件。popup.html可以只有一个按钮!doctype html html langzh-CN head meta charsetutf-8 title选型验证/title /head body button idcheck检查当前页/button script srcpopup.js/script /body /htmlpopup.js负责在点击时向当前标签页注入一段小逻辑document.getElementById(check).addEventListener(click, async () { const [tab] await chrome.tabs.query({ active: true, currentWindow: true }); await chrome.scripting.executeScript({ target: { tabId: tab.id }, func: () { document.body.style.outline 2px solid #2f6feb; return document.title; } }); });background.js只在安装时写一条日志方便你确认 service worker 是否运行chrome.runtime.onInstalled.addListener(() { console.log(Chrome 插件选型验证已安装); });content.js更简单用来确认内容脚本有没有注入console.log(content script 已注入manifest V3 跑通);这些代码都可以让 Codex 生成或逐行解释但不要让它直接操作你的浏览器。你负责在本地保存文件然后在 Chrome 里加载。5.3 在 Chrome 里加载并调试打开 Chrome地址栏输入chrome://extensions右上角打开“开发者模式”。点击“加载已解压的扩展程序”选择chrome-extension-demo文件夹。加载成功后你会看到扩展卡片。此时重点看三个入口扩展卡片上的“错误”按钮如果有 manifest 语法错误会在这里显示。background.js对应的 service worker 链接点进去看控制台。点击扩展图标打开 popup右键“检查”看 popup 控制台。再打开任意一个https://页面按 F12 看页面控制台确认content.js的日志是否出现。如果这些都能跑通说明原文里“VS Code、免配置、manifest V3”的推荐逻辑已经被你本地复现了。Codex 在这个过程中只做生成和解释TaoToken 只负责把请求送到模型不参与 Chrome 扩展运行。6. Codex 接通道后的 401/404 与模型 ID 排障6.1 401 优先查 Key 和环境变量如果 Codex 报 401 或提示未授权先不要怀疑 Chrome 插件代码问题在通道配置。按这个顺序查YOUR_API_KEY是不是从 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_content 创建并复制完整环境变量名是否和config.toml里的env_key一致设置环境变量后有没有重启终端和 CodexKey 是否被删除、禁用或复制时带了空格。可以临时在终端里确认环境变量有没有读到echo $TAOTOKEN_API_KEYWindows PowerShellecho $env:TAOTOKEN_API_KEY如果输出为空说明环境变量没生效。如果输出是YOUR_API_KEY说明你忘了替换占位符。6.2 404、模型不可用与 TOML 语法如果报 404 或模型不可用先看base_url。正确写法是base_url https://taotoken.net/api不要写成https://taotoken.net/api/v1也不要加其他路径。然后再看model是否来自模型广场。模型 ID 写错、写了不存在的型号、或者wire_api和模型不匹配都可能让 Codex 拿到错误响应。如果 Codex 启动时直接读配置失败检查~/.codex/config.toml是否是合法 TOML。TOML 不是 JSON不要用花括号包整段配置也不要漏掉表头。改完配置后重启 Codex再问一个最简单的 Chrome 插件问题测试比如“manifest V3 的 service worker 和 V2 的 background page 有什么区别”。能正常回答再继续问完整的环境清单。7. 下一轮 Chrome 插件问答与入口7.1 验证这次切换是否真的省事跑通之后你可以做一个小验证先在 TaoToken 模型对话 里用同一把 Key 发一条消息确认模型 ID 和 Base URL 没填错再回到 Codex问“请按 VS Code、免配置、manifest V3 给我下一轮 Chrome 插件调试清单”。两次都能正常返回说明同一把 Key 已经覆盖了网页问答和本地开发问答两个场景。之后你再看 Chrome 插件开发就不会卡在“豆包问完还要不要换 Kimi”“Codex 额度是不是独立”“每个工具是不是都要注册 Key”这些重复操作上。需要新 Key 时仍然回 控制台 API Keys 创建模型列表有变化也回模型广场核对。7.2 接下来把问题丢回 Codex如果你准备长期在 Codex 里写 Chrome 插件可以打开 Coding Plan 看当前套餐是否够用。下一轮你可以直接让 Codex 解释chrome.scripting、chrome.storage、host_permissions的差异但记住它只生成和解释代码真正的加载、点击、刷新、看控制台都要你在本地完成。把报错原样贴回 Codex比让它“直接帮你操作浏览器”更稳也更容易复现原文那套从 0 到 1 的开发节奏。