本文参加年度征文活动「记录」赛道。

硅谷轮回

提到 AI 大模型的领军者,许多人首先想到的可能是 ChatGPT,这也使得 Claude 这一后起之秀常被忽视。然而,自从 Claude 3.7 Sonnet 发布后,我个人认为,ChatGPT 已经不再稳居领先地位了。

AI 在众多领域中展现出不同的强弱表现,这一点可能会引发一些争议。然而,在编程领域,Claude 无疑是其中的佼佼者,其能力得到了广泛认可。为了更好地理解 Claude 的卓越表现,我们不妨回顾一下其背后公司——Anthropic 的发展历程及关键时间节点。

来源于gork整理的数据

在我看来,Anthropic1 和 OpenAI2 这两家公司的关系,像极了半个世纪前的 英特尔3 和 仙童4 之间那种微妙联系。英特尔作为仙童的“衍生”公司,由仙童的几位核心成员创立,承载了当时半导体行业的创新精神和技术突破。而 Anthropic 与 OpenAI 之间也存在类似的渊源——Anthropic由前OpenAI的多位高管和研究人员创立,同样致力于推动AI领域的发展。

然而,随着近期 OpenAI 多位核心技术人员的离职,导致大量人才流失,加之 OpenAI 和 Anthropic 两家公司最近分别发布的新产品——ChatGPT-4.5 和 Claude 3.7 Sonnet,其市场竞争力引发了广泛关注。从API费用的角度来看,GPT-4.5 的 API 调用费用为每百万输入 tokens 75 美元,输出 tokens 150 美元;相比之下,Claude 3.7 Sonnet 的 API 调用费用仅为每百万输入 tokens 3 美元,输出 tokens 15 美元。换句话说,GPT-4.5 的输入和输出费用分别是 Claude 3.7 Sonnet 的 25 倍和 10 倍。

这样的定价差异不仅凸显了两家公司在商业策略上的巨大分歧,也让人对 OpenAI 的未来发展产生了疑问。尽管 OpenAI 的技术积累和品牌影响力不容小觑,但在高昂的API费用面前,其在市场竞争中的优势可能会被逐渐削弱。尤其是在Anthropic等竞争对手不断推出高性价比产品的背景下,OpenAI 面临的挑战愈发严峻。

回顾历史,OpenAI 的现状不禁让人联想到曾经的仙童公司。仙童公司在半导体行业中曾经辉煌一时,但由于内部动荡和市场竞争,最终于2016年被安森美半导体以24亿美元收购。OpenAI 是否会步入类似的轨迹,目前尚难预料,但其能否在技术创新、成本控制和市场竞争中找到平衡点,将直接决定其未来的命运。

AI编程新范式

作为一直在尝试使用 AI 编程的用户,cursor 在AI编程方面的能力和体验已经是一骑绝尘,算是彻底占领了大多数用户的心智。但其实,Cursor 编程能力的显著提升与其集成 Claude 3.5 Sonnet 模型密切相关。可以说,Cursor 编程能力的提升在很大程度上归功于集成了 Claude 3.5 Sonnet 模型。

随着小猫补光灯率先在国内掀起了AI编程的热潮,越来越多的人开始探索AI编程的可行性。然而,AI编程的实际可行性究竟如何,仍然值得深入探讨。

来源于秘塔AI

在使用 Claude 3.5 Sonnet 技术支持的 Cursor 工具后,我觉得 AI 编程是可行的,说不定会重新定义新的编程范式。AI 的进步速度之快,已经让它具备了超越普通程序员的潜力了,这种变化甚至可能比我们想象的还要迅速。

我的观点并非毫无根据。我是一名半调子的编程爱好者,虽然接触过一些后端,但尚未接触过前端领域, 也从未独立完成过任何完整的项目。面对AI对编程领域带来的变革,我毅然选择投入AI编程的探索中,并深入体验了 Cursor。

我的cursor之旅

接下来我会来谈一谈使用 cursor 开发的成果。

目前我利用 cursor 开发了两个浏览器插件:一个是浏览器新标签页插件,另一个是一个即时搜索插件。在开发过程中,cursor 展现出的卓越效率与高度智能化深深吸引了我──可以说,我现在已经离不开 cursor 了。😂

目前两个插件都已经成功上架了:

Chrome插件开发平台

图片中大家一定会好奇 Chrono Tab 这款插件为啥创建时间和最后更新时间之间的跨度会这么大,这里先留个悬念,后面上架部分我会讲讲到底是因为啥原因──说多了都是泪呀🫠。

插件效果

这里先给大家看看这两个插件的效果图,也算是给自己打一点小广告:

Chrono tab (极简时钟) 

Chrono Tab 是一款简约优雅的 Chrome 浏览器新标签页扩展。它提供了精美的时钟显示、高清壁纸背景、以及多搜索引擎支持等功能,同时完全尊重用户隐私,所有设置均保存在本地,不会上传任何数据至服务器。

Chrono Tab(极简时钟)
Chrono Tab(极简时钟)

Quick Search(即搜)

"即搜"是一款高效的快捷搜索工具。它可以在任何网页上快速唤出搜索框,支持多种搜索引擎,并提供组合搜索、自定义搜索引擎等功能。同时,它高度重视用户隐私,不收集任何用户数据,所有设置和偏好仅存储在本地设备。

Quick Search(即搜)
Quick Search(即搜)

接下来,我将详细阐述我如何使用Cursor开发这两个插件,并成功将其发布至Chrome Web Store的完整过程。

第一次尝试──新标签页插件开发

由于本人还是一名大学生,并非产品经理,代码能力也是稀烂。在安装并初步了解 Cursor 的使用方法后,我一直在积极探索适合开发的产品方向。

思考了很久,最终决定从最简单的浏览器插件入手。至于开发什么类型的浏览器插件,我反复琢磨却始终没有明确的方向——最后决定先尝试制作一个浏览器新标签页插件。

决定开发方向

在开始时,我首先向 秘塔.ai 请教了浏览器插件项目的整体框架。尽管 AI 的编程能力在不断提升,但当前的 AI 仍然存在生成“幻觉”的可能性。因此,作为指导 AI 进行编程的人,全面掌握项目的整体框架至关重要。这不仅有助于确保开发方向的准确性,还能有效规避潜在问题,推动项目朝着预期目标前进。

来源于秘塔

在简单了解浏览器基本框架后,我决定着手编写插件的完整设计文档。这一想法源于我收听了『硬地骇客』── EP88 对话 Saga:20 万字文档让 ChatGPT 开发出翻译产品,实现200%按月增长 这一期播客后的启发。

硬地骇客

由于我对产品功能及界面效果的相关术语不够熟悉,因此在这一环节我也借助了AI工具——ChatGPT和DeepSeek。我向这两个AI描述了我对插件基本功能的预期,并咨询了推荐的技术栈以及项目的基本框架。最终,我将这些信息整理汇总,形成了一份完整的设计文档。

截取一部分 Chrono Tab 设计文档的内容

随后我将该内容存储在名为chrono-tab.md的文件内。再完成插件设计文档的编写后,接下来就是完成代码的编写了。

代码编写

之前在了解 cursor 的时候,就知道.cursorrule文件至关重要,因此,在开始让 AI 编写代码之前, 我首先先添加了该文件。具体来说,我参考了cursor.directory 网站提供的内容,用 AI 将其翻译成中文内容,并进行设置。如下:

你是一名经验丰富的 Chrome 扩展开发者,精通 JavaScript/TypeScript、浏览器扩展 API 和 Web 开发。

### 代码风格与结构
- 编写清晰、模块化的 TypeScript 代码,附带类型定义
- 遵循函数式编程模式,避免使用类
- 使用描述性变量名(如`isLoading`、`hasPermission`)
- 按逻辑组织文件:popup、background、content scripts、utils
- 实现完善的错误处理和日志系统
- 使用 JSDoc 注释进行代码文档化

### 架构与最佳实践
- 严格遵循 Manifest V3 规范
- 明确划分 background、content scripts 和 popup 的职责
- 按最小权限原则配置权限
- 使用现代构建工具(webpack/vite)
- 实施版本控制和变更管理

### Chrome API 使用
- 正确使用 chrome.* API(storage、tabs、runtime 等)
- 使用 Promise 处理异步操作
- 在 Service Worker 中实现 background 脚本(MV3 要求)
- 使用 chrome.alarms 实现定时任务
- 通过 chrome.action API 管理浏览器操作
- 优雅处理离线功能

### 安全与隐私
- 实施内容安全策略(CSP)
- 安全处理用户数据
- 防范 XSS 和注入攻击
- 组件间通信加密
- 安全处理跨域请求
- 实现数据加密存储
- 遵循 `web_accessible_resources` 规范

### 性能优化
- 最小化资源占用,避免内存泄漏
- 优化 background 脚本性能
- 实现缓存机制
- 高效处理异步操作
- 监控 CPU/内存使用

### UI 与用户体验
- 遵循 Material Design 设计规范
- 响应式弹窗布局
- 提供明确操作反馈
- 支持键盘导航
- 完善加载状态指示
- 适当使用动画效果

### 国际化
- 使用 chrome.i18n API 实现多语言
- 遵守 `_locales` 目录结构
- 支持 RTL 语言布局
- 处理地区格式差异

### 无障碍访问
- 添加 ARIA 标签
- 确保色彩对比度
- 支持屏幕阅读器
- 提供键盘快捷键

### 测试与调试
- 高效使用 Chrome DevTools
- 编写单元/集成测试
- 测试跨浏览器兼容性
- 监控性能指标
- 异常场景处理

### 发布维护
- 准备商店素材和截图
- 编写隐私政策
- 实现更新机制
- 处理用户反馈
- 维护项目文档

### 官方文档规范
- 参考 Chrome 扩展文档
- 跟踪 Manifest V3 变更
- 遵守商店审核指南
- 关注平台更新动态

### 输出要求
- 提供完整可运行的代码示例
- 包含必要的错误处理
- 遵循安全最佳实践
- 确保跨浏览器兼容
- 编写可维护的健壮代码

在代码编写过程中,版本管理起着至关重要的作用,因此强烈建议为正在开发的代码引入并使用版本管理工具──Git,以确保代码的可追溯性和协作效率。

我将当前文件目录初始化为一个 Git 仓库,并使用cursor为当前项目添加了专门针对浏览器插件开发的 .gitignore 文件,以忽略不必要的文件。

.gitignore文件

接下来,我只需要将.cursorrule文件和chrono-tab.md文件添加到cursor composer模式的上下文内,然后让claude 3.5 sonnet加持下的 cursor 根据当前设计文档中的要求,完成插件基本框架的搭建既可。

由于并没有预料到会创作这篇文章,我在使用cursor开发的过程中并没有截图留素材,所以这里只能提供一些git的提交记录截图。

部分git提交记录

如图中所示,cursor一次性完成了这么多个文件的输出。不过由于我看不懂前端代码,所以我也先不管代码是否存在问题,先 『 Accept 』这些文件再说。

我尝试在浏览器中测试当前的代码是否能用,结果出乎我意料之外。插件确实能正常被浏览器加载,但是界面效果十分简陋,效果也并不美观。

于是我接下来的活就是用自然语言描述需求,让cursor自己进行迭代。过程中有些功能很快就能完成,过程非常丝滑。比如添加背景图片的API──UnsplashPixabayPexels,我将这三个的API使用文档网址添加到cursor提供的Docs中。

cursor Docs设置

Composer模式下,通过 @ 命令添加这三个Docs类型的上下文,然后让 cursor根据官方文档的内容来完成调用三个API显示背景图片的功能。这个效果出奇地好,基本上一次对话就搞定了。

但是对于界面UI方面的调整,那我只能说是煎熬呀😂。我习惯美完成一个小功能或者解决一个小bug,就提交一次git记录。毕竟你不提交的话,cursor一写bug,你的代码后面就会朝着不可预期的方向狂奔。

部分Git提交记录

很多时候给出了一大堆css样式,看起来非常唬人。但是一刷新界面效果一看,写了什么鬼东西──🫠。

这时候就需要耐心的跟cursor进行沟通交流,让他调整代码。

测试,报错与修复

在这个过程中,我通常是一边让Cursor生成代码,一边在浏览器中进行测试。过程中会遇到各种问题,这些问题往往会拖慢整体进度。要想通过Cursor在短短几小时内完成一个工具的开发,对我来说并不现实。

报错的问题基本就是浏览器控制台报错和插件后台报错,我解决这些问题的方法就是复制,粘贴给cursor并让他修复。有时候能够迅速解决bug,但有的时候修复了一个bug,但产生了更多的bug🥲。

还有一种问题就是cursor根据你描述的功能写了一堆代码,结果要的功能没有出现,这种情况我特别无助和抓狂🙃。遇到这种情况,先查看浏览器控制台和插件后台,看看是否有报错,有的话按照上面的方式修复bug,没有的话,描述想要的功能和目前实际的效果,继续让cursor迭代。

遇到上面这些情况,我通常是选择 『reject』回退,重新打开一个窗口来询问或者询问ChatGPT来给出一些思路,多轮对话后基本能够解决问题。对于实在无法解决的问题,我最终选择的办法是退而求其次,暂时放弃该功能的实现,不死磕在一棵树下──我觉得这也是没有办法的办法。

想要完整地做完一个项目,上述三个步骤需要不断循环。代码开发过程中会碰到各种各样的意外,有些功能可能在一开始没有定义好,需要靠代码生成过程不断完善;有些功能在写代码的过程中发现不可行,那就得要来回推敲形成新方案;还有些功能甚至一开始并不在规划内,经过跟朋友讨论进而优化逻辑结构。多次迭代的产品开发过程才是常态。──  设计防潮箱

上架Chrome Web Store

上架谷歌商店需要注册一个谷歌开发者账号──门槛就是一个谷歌邮箱和一张能够支付外币的信用卡,普通谷歌邮箱账号绑定能够支付外币的信用卡后,支付一次性费用 5 美元就能成为谷歌开发者账号。基本的流程图如下:

图片来源于Nico

信用卡问题

对于大部分大学生来说,想要一张能支付外币的信用卡其实没有想象中的那么难。我参考了从零开始的中国大陆大学生 Visa 信用卡申请,申请后,等了大概一周时间就收到了。

具体方法就是申请 宇宙星座信用卡校园版,最后会收到两张银行卡──一张Visa,一张银联,两张卡互通。

宇宙星座信用卡校园版

原因很简单,通过率比较高,而且长得好看。注意,这张卡,除非是部分大学的学生可以享有一定额度,大部分大学是 0 额度。不过,它免年费,以及……申请的时候不会给父母打电话(不过你最好还是让父母知会一下)

下面是申请二维码,也可以点击这里的链接:大学生专属信用卡

宇宙星座信用卡校园版申请二维码

申请的过程也很简单,不过下面👇几小点需要注意一下:

  1. 如实填写信息,申请时填写的手机号需为本人实名认证且常用,银行可能通过该号码验证身份
  2. 建议选择大学所在城市,否则可能导致信用卡寄送至异地网点,在申请页面需仔细搜索并选择学校附近的工行网点(建议直接输入网点名称而非区名),避免因网点错误需跨区域领卡
  3. 领卡后需前往工行网点人工激活,避免通过客户端自主激活导致虚拟账户冲突
  4. 支付时需购汇,使用『中国工商银行』搜索『结售汇』进行购汇操作
  5. 购汇时务必选择Visa卡(非银联卡),若未显示Visa卡,需在APP中将Visa卡设为默认账户

注意:不要泄露你的信用卡账号与验证码(安全码,CVV),即使你是 0 额度。不是说所有的商户都能使用,部分商户是会禁止中国大陆境内银行发行的 Visa 卡的。

填写上架资料

对于我来说,上架 Chrono Tab 这款插件这一过程及其煎熬──直至今天还是审核阶段,未成上架😭。

Chrome插件开发平台

成功开通谷歌开发者账号后,后面需要做的就是 上传打包好的文件包──添加商品描述──根据插件内容填写隐私声明──选择发布范围

这里面的重点就是添加商品描述插件隐私权的声明。Chrono Tab 总共被退了4次。

第一次和第二次被驳回,都是因为插件涉及搜索功能,需要调用 Chrome Search API 来遵循用户的搜索设置。我仔细研究后,理解到的意思是:在新标签页中已经无法再添加切换搜索引擎的功能。但我注意到市面上仍有许多新标签页插件支持切换多种搜索引擎的功能呀。我以为是我的商品描述存在问题,于是修改了描述后重新提交,结果却再次遭到了驳回。

我从网上查找大量相关的资料,发现也有人遇到这个问题。

reddit
reddit 

我百思不得其解,跟我朋友分享了这件事情。结果我朋友的话让我醍醐灌顶。他表示你在你的插件中默认调用 Chrome Search API来尊重用户的搜索设置,然后允许用户切换搜索引擎不就行。

和朋友的聊天记录

哈哈哈,他确实是个天才😂。

我按照朋友提供的思路修改,然后快速将插件再次提交审核。结果第三次驳回的原因居然是我之前将商品描述中的搜索引擎部分描述删除了但这次忘了加回去,结果谷歌判断插件包含虚假或误导性信息,还有一个问题是插件获取了用户位置数据(插件提供天气信息,需获取用户数据),但未提供公开的隐私政策链接。谷歌要求如果获取了用户数据,需要提供公开的隐私说明。

面对这个问题,我当时的第一反应是,难道我要自己提供个官网链接吗?我抱着疑惑,决定问问看cursor怎么说。我将驳回内容贴给cursor,cursor给出了让我意料之外的答案。

cursor的回答

看到cursor给出的结果之后,我确信这就是正确的解决方案。于是,我让cursor编写一个关于插件的隐私政策说明页面,然后将文件上传到一个新建的公开GitHub仓库,并使用GitHub Pages功能实现了静态部署

Chrono Tab 隐私政策

我完成这些步骤后,还是重复之前的提交流程。出乎我意料之外的事情又发生了,插件又被打回了😭。

原因竟然出在新标签页中的天气功能无法正常运行,这让我感到有些绝望。经过仔细询问Cursor后发现,根本原因在于所使用的高德天气API并不支持国外IP访问,这直接导致了功能的无法使用。

我咬咬牙,最终决定移除获取天气信息相关的代码。并让cursor仔细检查当前插件代码,评估当前插件通过 Chrome Web Store的可能性,然后才将插件提交审核。

你现在是一名chrome Web store的审核员,你将对当前的插件进行检查审核,最终给出当前插件通过审核的可能性。 @Codebase 
cursor回复

经过一番“九九八十一难”的折腾,总算迎来了审核通过的好消息!果然是皇天不负有心人,能坚持到现在也是不容易呀🥳。

搜索插件二次实践

第一次使用cursor成功开发浏览器插件的经历,带给我的正反馈一直在持续。我决心开发继续开发第二款插件,当然,这时候还缺少一个思路或灵感。

某天我在多个网页来回切换搜索内容的时候,突发奇想,做一个能在任意页面通过快捷键唤出搜索框进行搜索的插件,是不是可以呢?

我按捺住内心的喜悦,果断决定立即投入插件的开发工作。过程我就不细讲了,反正就是有了第一次开发插件经验后,第二个插件的开发进度很快,差不多花了6一周的时间,就完成了插件从零到上架的过程,插件的上架也一帆风顺,不再像第一次那样一波三折了。

对于许多人而言,这样的速度或许算不上特别快,但对曾经的我来说,这是一段难以想象的经历。在此,衷心感谢AI为我这样一位普通人提供了如此独特而非凡的尝试机会。

我知道这两个插件并不完美,也许存在很多不足和缺陷。在这里,我更多的是希望分享一种体验,探索一种可能。

个人感悟

回顾这两个插件的开发经历,我总结出了一些个人的浅薄之见:

  • 在使用cursor开发产品之前,一定要对产品做好功能和界面的规划和设计。你需要决定产品最后的走向,你要做的,就是保证过程不偏航。
  • 使用cursor开发产品过程中,我们应该将任务拆分成多个小问题来解决,没完成一个问题,就提交一次git,新开一个窗口,避免上下文过长。
  • 对于cursor多次无法解决的问题,不要局限于cursor,可以从身边或者互联网中找答案。但要学会平衡,不死磕一个问题,不在一棵树下吊死。
  • 不要特别在意一些细节,使用cursor开发需要速战速决,应该尽早做出产品demo或原型,持续的正反馈才能驱使你继续进行下去。
  • 产品开发完成后,不妨学习相关的语法,看看cursor编写的代码,“一个人可以走得很快,但一群人可以走得更远。”
图片来源于Pixabay

在编程的历史长河中,每一次技术的革新都伴随着工具的升级。从最初的打孔卡到现代的集成开发环境(IDE),每一代工具的出现都让程序员能够更高效地解决问题。而如今,像Cursor这样的工具正在成为下一个改变游戏规则的存在。

我想,cursor的出现和进步并不会取代程序员,而是为程序员添加一件更便捷,更趁手的工具,很可能也会重新定义新的编程范式。

写在最后

每一段旅程都有终点,正如天下没有不散的筵席。

我是一个不善言辞的人,总觉得脑海中浮现的句子到了嘴边就变得支离破碎。或许是因为担心表达不够准确,又或许是害怕自己的言辞无法传达真正的情感。于是,许多想说的话最终都被我压在了心底,变成了一种无声的遗憾。

于是我决定换一种方式,用文字代替语言。或许文字能够更好地承载我的情感,也能让我有更多的时间去组织思绪,将那些原本支离破碎的想法拼凑完整。每一个字、每一句话,都是我内心深处最真实的流露。尽管它们无法代替面对面的交流,但我相信,它们同样可以传递我未曾说出口的那些话语。

未来,我会继续用文字记录我的点滴,用它们去诉说那些未曾被听见的声音。因为我相信,即便言语有所局限,但文字却可以跨越时间与空间,触及到人心的深处。