用Cursor写一个Chrome插件(一键获取Cookies)：TaoToken统一Key接入与settings.json配置骨架

1. 为什么要在 Cursor 里写这个 Chrome 插件如果你经常和运营、测试或者非技术同事打交道大概率遇到过这种场景某个后台系统需要登录态才能抓数据技术人员打开 F12切到 Application 面板在 Cookies 里翻半天找到那个关键字段复制出来贴给对方。对方拿到之后还要自己找地方存、自己拼请求头交接一次懵一次。这个流程本身不复杂但重复次数多了就很烦。更麻烦的是当这个插件还想顺带调用 AI 能力做点自动化处理时Key 往哪放、怎么配、怎么保证不把 Key 硬编码进前端代码就变成了新的问题。我试过把这套东西拆成两部分Chrome 插件负责一键读取并复制当前站点的 CookiesAI 请求部分则通过一个统一的 Key 网关来转发插件本身不接触真实密钥。这篇就聚焦在 Cursor 里从零把这个插件跑通的完整链路。你会看到manifest.json怎么写、settings.json配置骨架长什么样、TaoToken 的统一 Key 怎么接进来以及最后怎么在浏览器里验证 Cookies 读取和 AI 请求都通了。适合有基础 JS 能力、想在本地快速搭一个可用插件的开发者。核心检索词先摆出来Cursor 写 Chrome 插件、一键获取 Cookies、TaoToken 统一 Key 接入、settings.json 配置骨架。下面按可跟做的顺序展开。2. TaoToken 前置统一 Key 与配置骨架在动手写插件之前先把 Key 管理这块理清楚。插件里如果直接写死某个模型的 API Key一旦分发出去就等于泄露而且换模型、换额度都要重新打包非常不划算。更合理的做法是让插件请求一个统一的网关地址由网关去持有真实密钥并做转发。TaoToken 在这里扮演的就是这个统一入口。你只需要在它那边生成一个 Key插件里配置这个 Key 和网关地址即可。官网入口是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基地址是 https://taotoken.net/api 注意 API 地址后面不加任何 UTM 参数保持干净。具体操作上先进控制台创建 Key。控制台地址带 deep linkhttps://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 。创建完之后去 API Keys 页面复制https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。如果你后面要接 Claude Code 或者做长期编码 Agent可以看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。想先验证模型通不通用模型对话页最快https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 。接入细节看文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。拿到 Key 之后我们要在插件项目里建一个settings.json作为配置骨架。这个文件不放进打包产物而是作为本地开发时的配置模板真正的 Key 通过环境变量或者本地存储注入。骨架大概长这样{ apiBase: https://taotoken.net/api, apiKey: YOUR_TAOTOKEN_KEY, model: claude-3-5-sonnet, timeoutMs: 30000, cookieTargets: [ { name: sessionid, domain: example.com }, { name: token, domain: example.com } ], copyFormat: header }这里几个字段的作用要说明白。apiBase固定指向 TaoToken 的 API 地址不要带斜杠结尾。apiKey是占位符实际运行时从chrome.storage.local读取避免提交到仓库。model按你实际要用的模型填。cookieTargets是你要抓取的 Cookie 字段名和对应域名可以配多个。copyFormat决定复制出来的是纯值还是Cookie: xxx这种请求头格式运营同事一般更喜欢后者直接能贴。注意settings.json里绝对不要提交真实 Key。建议在.gitignore里加上这个文件仓库里只保留settings.example.json。3. 可复制配置manifest 与插件目录结构在 Cursor 里新建一个文件夹比如叫cookie-ai-helper然后让 Cursor 帮你生成基础结构。不过我更建议手动把关键文件先定下来避免生成的东西太散。目录结构如下cookie-ai-helper/ ├── manifest.json ├── popup.html ├── popup.js ├── background.js ├── settings.example.json └── icons/ └── icon128.pngmanifest.json用 V3 版本权限声明要精确不要一上来就all_urls。下面这份可以直接复制{ manifest_version: 3, name: Cookie AI Helper, version: 1.0.0, description: 一键获取当前站点 Cookies 并通过统一 Key 调用 AI, permissions: [cookies, storage, activeTab, scripting], host_permissions: [https://taotoken.net/*], action: { default_popup: popup.html, default_icon: icons/icon128.png }, background: { service_worker: background.js } }这里cookies权限是读 Cookie 必须的storage用来存 Key 和配置activeTab配合scripting用来拿当前标签页信息。host_permissions只放 TaoToken 的域名不要图省事写通配。background.js作为 service worker 负责发起 AI 请求这样 Key 不会暴露在页面上下文里。popup.html保持极简两个按钮加一个输出区!DOCTYPE html html head meta charsetutf-8 / style body { width: 320px; padding: 12px; font-family: system-ui; } button { width: 100%; margin: 6px 0; padding: 8px; cursor: pointer; } pre { background: #f5f5f5; padding: 8px; font-size: 12px; white-space: pre-wrap; } /style /head body button idgrab一键获取 Cookies/button button idask用 AI 分析/button pre idout等待操作.../pre script srcpopup.js/script /body /htmlpopup.js负责和 background 通信自己不直接碰 Keyconst out document.getElementById(out); document.getElementById(grab).addEventListener(click, async () { const [tab] await chrome.tabs.query({ active: true, currentWindow: true }); const res await chrome.runtime.sendMessage({ type: GRAB_COOKIES, url: tab.url }); out.textContent res.ok ? res.data : 失败: res.error; }); document.getElementById(ask).addEventListener(click, async () { const res await chrome.runtime.sendMessage({ type: ASK_AI, prompt: 总结当前站点登录态字段 }); out.textContent res.ok ? res.data : 失败: res.error; });background.js是核心负责读 Cookie 和调 AIasync function getSettings() { const { settings } await chrome.storage.local.get(settings); return settings || { apiBase: https://taotoken.net/api, apiKey: , model: claude-3-5-sonnet }; } async function grabCookies(url) { const u new URL(url); const cookies await chrome.cookies.getAll({ domain: u.hostname }); return cookies.map(c ${c.name}${c.value}).join(; ); } async function askAI(prompt) { const s await getSettings(); if (!s.apiKey) throw new Error(未配置 apiKey); const resp await fetch(${s.apiBase}/v1/messages, { method: POST, headers: { Content-Type: application/json, x-api-key: s.apiKey, anthropic-version: 2023-06-01 }, body: JSON.stringify({ model: s.model, max_tokens: 512, messages: [{ role: user, content: prompt }] }) }); if (!resp.ok) throw new Error(HTTP resp.status); const data await resp.json(); return data.content?.[0]?.text || JSON.stringify(data); } chrome.runtime.onMessage.addListener((msg, sender, sendResponse) { (async () { try { if (msg.type GRAB_COOKIES) { sendResponse({ ok: true, data: await grabCookies(msg.url) }); } else if (msg.type ASK_AI) { sendResponse({ ok: true, data: await askAI(msg.prompt) }); } } catch (e) { sendResponse({ ok: false, error: e.message }); } })(); return true; });这段代码里grabCookies用chrome.cookies.getAll按域名过滤拼成标准 Cookie 头格式。askAI走 TaoToken 的/v1/messages接口Key 从 storage 读不写死在代码里。onMessage里返回true是为了保持异步通道打开这个坑很多人踩过不加的话sendResponse会失效。4. 验证请求从加载插件到 AI 联通代码写完先在 Cursor 里把settings.example.json复制成settings.json填入你的 TaoToken Key。然后打开 Chrome地址栏输入chrome://extensions/右上角打开开发者模式点「加载已解压的扩展程序」选中cookie-ai-helper文件夹。加载成功后工具栏会出现插件图标。第一步验证 Cookies 读取。随便打开一个已登录的站点点插件图标点「一键获取 Cookies」。如果输出区出现sessionidxxx; tokenyyy这样的字符串说明读取链路通了。如果为空检查manifest.json里cookies权限有没有加以及当前站点是否真的设置了对应 Cookie。第二步验证 AI 请求。点「用 AI 分析」如果返回一段模型生成的文本说明 TaoToken 的 Key 和网关地址都配对了。如果报HTTP 401多半是 Key 填错或者没保存到 storage报HTTP 404检查apiBase是不是写成了带斜杠的https://taotoken.net/api/去掉末尾斜杠再试。想更直观地验证模型本身通不通可以先用模型对话页发一条消息https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 。那边能通插件这边基本就是配置问题。接入文档里对请求头和参数有更细的说明https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。在 Cursor 里调试的时候有个小技巧background 的console.log不会显示在 popup 的控制台里要去chrome://extensions/找到这个插件点「Service Worker」那一行的「检查」才能看到 background 的日志。popup 的日志则在插件弹窗上右键「检查」查看。这两个控制台分开排查问题时别搞混。5. 本篇常见错排查Cookie 读出来是空数组。最常见的原因是域名不匹配。chrome.cookies.getAll({ domain: u.hostname })里的u.hostname是当前标签页的主机名如果 Cookie 设在子域名或者父域名上就抓不到。可以改成{ url: tab.url }让 Chrome 自己匹配或者把cookieTargets里的 domain 配全。AI 请求报 CORS 错误。Chrome 插件的 background service worker 发请求不受页面 CORS 限制但前提是host_permissions里声明了目标域名。如果你把apiBase改成了别的地址记得同步改host_permissions否则请求会被拦。Key 存进去读不出来。chrome.storage.local是异步的get之后要await。另外 popup 和 background 是两个上下文popup 里存的 Keybackground 能读到但如果你在 popup 里直接chrome.storage.local.set之后立刻发消息可能有时序问题建议存完再点按钮。改了代码没生效。Chrome 插件加载后不会自动热更新每次改完manifest.json或 background 代码都要回chrome://extensions/点一下刷新按钮。popup 的 HTML/JS 改完关掉弹窗重新打开即可。复制出来的格式不对。copyFormat字段目前只是配置骨架里的占位实际复制逻辑要自己在grabCookies里根据这个字段拼。想要Cookie: xxx格式就在返回前加个前缀判断。这个字段留着是为了后面扩展别以为配了就自动生效。注意调试阶段可以把timeoutMs调小一点比如 10000这样请求卡住时能更快看到失败不用干等。6. 后续怎么接得更顺插件跑通之后如果你打算长期用它做编码辅助或者接 Agent 流程建议把 Key 管理从本地 storage 再往上提一层。比如用 Coding Plan 统一管理额度和模型切换https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。这样插件里只需要配一个入口换模型不用重新打包。另外settings.json的骨架可以继续扩展比如加上retry次数、temperature参数、多模型 fallback 列表。但记住一个原则凡是涉及密钥的字段都走 storage 注入仓库里只留 example。Cursor 生成代码很快但配置安全这块它不会替你把关得自己盯住。最后留一个实用习惯每次改完manifest.json先在 Cursor 里用 JSON 校验插件过一遍语法再去 Chrome 加载。我踩过的坑是少了一个逗号Chrome 只报「无法加载」不告诉你哪一行错来回找很费时间。校验通过再加载能省不少事。