多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

5 分钟,无代码,我用 Cursor 配 TaoToken 开发了一款爬虫软件

5 分钟,无代码,我用 Cursor 配 TaoToken 开发了一款爬虫软件 1. 为什么我劝你用 Cursor TaoToken 做爬虫插件很多人一提到写爬虫脑子里第一反应是 Python、Scrapy、Selenium接着就是装环境、配依赖、处理反爬一套流程下来还没开始抓数据人已经累了。尤其是非技术背景的朋友光是 Python 版本和 pip 源就能卡半天。我之前试过用 C# 帮朋友搞一个采集小工具结果 .NET SDK、运行时、IDE 插件来回折腾最后功能没写几行环境问题倒是一堆。后来我换了个思路既然浏览器本身就是运行环境那为什么不直接做成浏览器插件你不需要装 Node、不需要配 PythonChrome 或 Edge 打开开发者模式就能加载运行。再配合 Cursor 这种 AI 编程工具用自然语言描述需求它帮你把 HTML 解析、数据提取、CSV 导出的代码一次性生成出来。整个过程对小白非常友好5 分钟跑通第一个版本完全可行。但这里有个容易被忽略的环节Cursor 本身是编辑器它要调用大模型能力来生成代码就需要一个稳定、统一、好配置的 API 通道。如果你每个模型都去单独申请 Key、单独配 Base URL光是管理这些凭证就够头疼。我现在的做法是用 TaoToken 做统一入口一个 Key 走通所有模型调用Cursor 里只需要改一处配置。这篇就按“定位元素 → 配 TaoToken → 写插件 → 验证请求 → 排错”的顺序把可复制的骨架交给你。2. 前置准备TaoToken 统一 Key 与 Cursor 配置入口TaoToken 在这里扮演的角色是给 Cursor 提供一个兼容 OpenAI 接口规范的调用通道。你不需要在 Cursor 里为每个模型单独填不同的地址和密钥只要把 Base URL 指向 TaoToken 的 API 地址再把申请到的 Key 填进去Cursor 的对话、代码补全、Composer 生成就都能走这条通道。先做两件事。第一打开官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册并登录进入控制台。第二在控制台里找到 API Keys 管理页新建一个 Key 并复制保存。这个 Key 就是你后面填进 Cursor 的凭证不要泄露也不要提交到公开仓库。TaoToken 的 API 根地址是 https://taotoken.net/api 注意这个地址后面不加任何 UTM 参数保持干净。如果你用的是 OpenAI 兼容模式Base URL 通常填到 /v1 这一层具体以文档为准。接入文档在 https://taotoken.net/doc 里面有不同客户端和 SDK 的填写示例遇到不确定的字段可以先翻一下。提示Key 只在创建时完整显示一次建议复制到本地密码管理器。如果怀疑泄露直接在控制台删除重建旧 Key 立即失效。Cursor 这边的配置入口有两个地方需要留意。一个是模型设置里的 API Key 与 Base URL另一个是项目级的 settings.json。前者影响 Cursor 自身的 AI 对话和补全后者影响你在项目里写的调用代码。两处可以共用同一个 TaoToken Key但用途不同别混淆。3. 可复制配置settings.json 骨架与 Cursor 模型设置先给项目级的 settings.json 骨架。这个文件放在项目根目录的 .cursor 文件夹下或者直接放根目录Cursor 会读取。它的作用是告诉 Cursor 在这个项目里用哪个模型、走哪个通道。下面这份可以直接复制把 apiKey 换成你自己的{ models: [ { title: TaoToken-GPT, provider: openai, model: gpt-4o-mini, apiKey: sk-你的TaoToken密钥, baseURL: https://taotoken.net/api/v1 } ], defaultModel: TaoToken-GPT }如果你更习惯在 Cursor 图形界面里配路径是 Settings → Models → OpenAI API Key把 Key 填进去然后在 Override OpenAI Base URL 里填 https://taotoken.net/api/v1 。这样 Cursor 自带的 Chat 和 Composer 就会走 TaoToken 通道。两种方式选一种即可不要同时配导致冲突。接下来是爬虫插件本身的代码骨架。浏览器插件最小结构只需要三个文件manifest.json、popup.html、popup.js。manifest 声明权限popup 提供界面popup.js 负责抓取和导出。下面这份 manifest 适配 Manifest V3{ manifest_version: 3, name: 简易爬虫插件, version: 1.0, permissions: [activeTab, scripting], action: { default_popup: popup.html } }popup.html 里放一个输入框、一个抓取按钮、一个下载按钮!DOCTYPE html html headmeta charsetutf-8style body{width:320px;padding:12px;font-family:sans-serif} input,button{width:100%;margin:6px 0;padding:8px;box-sizing:border-box} /style/head body input idurl placeholder粘贴目标网页地址 button idcrawl开始爬取/button button iddownload下载 CSV/button pre idout/pre script srcpopup.js/script /body /htmlpopup.js 的核心逻辑是拿到当前标签页注入脚本按你提供的选择器提取标题和摘要存到内存点下载时生成 CSV。这里的选择器就是你在目标网页上右键“检查”复制出来的 class。比如标题用 .article-item-title摘要用 .article-item-descriptionlet rows []; document.getElementById(crawl).onclick async () { const [tab] await chrome.tabs.query({active:true, currentWindow:true}); const res await chrome.scripting.executeScript({ target: {tabId: tab.id}, func: () { const titles [...document.querySelectorAll(.article-item-title)].map(ee.innerText.trim()); const descs [...document.querySelectorAll(.article-item-description)].map(ee.innerText.trim()); return titles.map((t,i)({title:t, desc:descs[i]||})); } }); rows res[0].result; document.getElementById(out).innerText JSON.stringify(rows,null,2); }; document.getElementById(download).onclick () { const csv [标题,摘要, ...rows.map(r${r.title},${r.desc})].join(\n); const blob new Blob([\ufeffcsv], {type:text/csv}); const a document.createElement(a); a.href URL.createObjectURL(blob); a.download crawl.csv; a.click(); };把这三个文件放进一个文件夹打开 Chrome 扩展管理页开启开发者模式点“加载已解压的扩展程序”选中文件夹即可。整个过程不需要 npm、不需要构建工具。4. 验证请求在 Cursor 内确认 TaoToken 通道可用配置写完先别急着抓网页第一步是确认 TaoToken 通道真的通了。在 Cursor 里新建一个 test.js写一段最小调用代码用 fetch 打一次对话接口const res await fetch(https://taotoken.net/api/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer sk-你的TaoToken密钥 }, body: JSON.stringify({ model: gpt-4o-mini, messages: [{role:user, content:只回复两个字通了}] }) }); const data await res.json(); console.log(data.choices[0].message.content);在 Cursor 的终端里用 node test.js 跑一下。如果返回“通了”说明 Key、Base URL、模型名三者都对上了。如果报 401检查 Key 是否复制完整如果报 404检查 baseURL 是否漏了 /v1如果报模型不存在去接入文档里核对当前可用的模型名。通道验证通过后再回到插件里做端到端验证。打开目标网页点插件图标粘贴地址点“开始爬取”。正常情况下 popup 里会打印出 JSON 数组每条包含标题和摘要。点“下载 CSV”文件会落到下载目录用 Excel 或文本编辑器打开中文不乱码说明 BOM 头生效了。注意浏览器插件默认只能访问当前激活标签页跨域请求受同源策略限制。上面的方案用 chrome.scripting.executeScript 在页面上下文里取 DOM不涉及跨域 fetch所以最稳。如果你要抓的是接口数据而非 DOM才需要处理 CORS那是另一个话题。实测下来从新建文件夹到看到 CSV 文件熟练后确实在 5 分钟量级。真正花时间的是定位选择器因为不同网站的 class 命名不一样有的还带动态哈希。遇到这种情况在 Cursor 里把 HTML 片段贴给 Composer让它帮你写更通用的选择器比如用属性包含匹配 [class*title]。5. 本篇常见错排查选择器、权限与编码第一个高频问题爬取结果为空数组。九成是选择器写错了。网页上的 class 可能带空格或多个类名querySelectorAll(.article-item-title) 只匹配完全包含该类的元素。如果实际 class 是 article-item-title weight-bold用 .article-item-title 仍然能匹配因为类选择器是包含关系。但如果 class 是动态生成的比如 title_3xK9那就得换策略用父级结构定位或者让 Cursor 根据你贴的 HTML 生成更稳的 XPath。第二个问题点“开始爬取”没反应控制台报 Cannot access contents of the page。这是因为插件没有拿到 activeTab 或 scripting 权限或者当前页面是 chrome:// 开头的内部页不允许注入。检查 manifest 里 permissions 是否包含 activeTab 和 scripting并且确保你在普通 http/https 页面上测试。第三个问题CSV 用 Excel 打开中文乱码。这是编码问题Windows 版 Excel 默认按 GBK 解析 CSV。解决办法是在生成 Blob 时加 UTF-8 BOM也就是代码里的 \ufeff。如果已经下载了乱码文件用记事本打开另存为 UTF-8 with BOM 也能救回来。第四个问题Cursor 里 Composer 生成的代码跑不通报模块找不到。这通常是因为 Cursor 按 Node 项目生成了 import 语句但浏览器插件环境不支持 ES Module 的裸导入。你需要在提示词里明确说“这是浏览器插件不要用 npm 包用原生 DOM API”。把约束条件写进指令生成质量会高很多。第五个问题TaoToken 调用返回 429。这是触发了速率限制降低请求频率或者在控制台查看当前配额。爬虫场景下如果要对多个页面循环调用模型做解析建议加个 sleep别把通道打满。6. 后续怎么走从插件到长期编码工作流插件跑通之后你可能会想加更多功能比如翻页抓取、去重、定时任务、把结果直接推到表格。这些扩展如果靠手动改代码效率不高。更顺的做法是把 Cursor 的 Composer 当成结对程序员每次用自然语言描述增量需求让它在你现有代码上改。这时候一个稳定的模型通道就很重要因为频繁的代码生成和重构会消耗不少 token。如果你打算长期用 Cursor 做这类小工具开发或者后面要接 Agent 做自动化可以了解一下 Coding Plan地址是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。它适合需要持续调用、多项目复用的场景比每次单独管 Key 省心。日常只是想验证某个模型效果用模型对话页 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 快速试一下就行。Key 管理和新建入口在 API Keys 页 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 接入细节翻文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。最后留一个实用习惯每次改完选择器先在浏览器控制台里用 document.querySelectorAll 手动跑一遍确认能取到元素再写进插件。这个动作花 10 秒能省掉大量“为什么抓不到”的排查时间。爬虫的本质是定位数据AI 帮你写代码但定位这件事最终还是要你对页面结构有基本判断。
返回列表