通过 Cursor 写一个 Chrome 扩展

关键词：cursor, chrome extension

背景

Cursor 是一个 AI 加持的 VS Code 类型的编辑器，在刚出的那段时间，X 上好多人都在推荐，我也尝试了下，觉得确实蛮好用。

但是因为使用次数的限制，所以没有用起来，加上公司的 gpt-4o 也很好用，就一直没有再关注了。

周末的时候，刷短视频的时候，数次刷到了关于使用 cursor 工作的内容，有的是用来写微信小程序，有的是给定一个 UI 界面让 cursor 直接写前端代码。

发现比刚出的时候，更加的强大了，于是决定用来写个小项目。我之前就有个计划，写一个 chrome 浏览器的扩展，所以正好就从这个开始了。

步骤

新建一个项目目录，然后用 cursor 打开目录，然后使用 cursor 的 composer 模式，描述下需求背景。

写一个 Chrome 插件，当我用鼠标选中文字或者代码时，判定是什么类型的，比如是 JSON 还是 sql 或者其他所有类型的代码，如果是的话，格式化一下并展示出来；同时如果发现是 golang 的堆栈错误信息，也一并给格式化一下展示出来 需要的是，我选中文本后，会在浏览器上浮动一个小的 icon，点击这个 icon 才执行 format 格式化，同时注意检查格式和代码，刚才的代码提示导入 Chrome 失败

这个是最开始使用的描述，cursor 根据我的需求开始列出了插件需要的文件结构，然后创建对应的文件和代码逻辑，最后把所有的代码应用到了项目里，创建了所有的文件。

这一版代码已经是可以运行的了，并且基本实现了业务逻辑功能，但是在浮动的 icon 这里，可能是我描述不规范，没有用规范的术语说明这个浮动的 icon 是什么， 起初这个做的很不好，我后面又花费了不小的功夫，一点点的交流沟通，最终写出了我认可的代码。

然后在此基础上，我又让 cursor 拓展了这个插件的功能，依旧是使用 composer 模式。

阅读本仓库代码，目前的仓库代码干的事儿很少，现在需要你做的是，拓展 button 点击后的功能，现在是 4 个，根据你知道的 github 上的一些项目的东西，拓展出十几个针对文本的操作，然后操作之后的数据做两个处理，一份跟现在一样复制到剪贴板，一份需要弹出一个框，然后把结果展示在里面

经过一些调试之后，现在已经可以很丝滑的在 Chrome 上运行了。

在使用 cursor 的过程中，我还订阅了 cursor pro，这样我的每个月的是高级模型的使用次数就达到了 500 次，基本可以满足我日常的需求了。

总结

整个流程花费了大概不到两个小时，包括我调试功能在内，这个效率真的是非常的高了，我之前从来没有写过 Chrome 的扩展，这次从零开始，如此的快捷高效。

之后，我会增加 cursor 在我的项目中的使用，看看在大型项目中，他是不是依然如此厉害。

最后附上我让 cursor 写的这个项目的地址，点击这里 自开发的 Chrome extension 如何安装到 Chrome 中去，点击这里