Cursor 写一个网页标题重命名的浏览器插件

平时开发过程中会打开好多好多的浏览器标签页,虽然 Chrome 出了分类标签,

但用着用着会发现每个分类又多了很多标签,prd、前后端技术方案、case、ones 越点越多,到最后很难分清哪个网页有用,只能一个一个看一个一个关。

开始想得比较简单,直接搞了一个 js 的书签

js 复制代码
javascript:void(function(){document.title=prompt('新标签页名称')}())

可以用,但是有时候刷新页面或者过几天有的页面会自动刷新设置的标题就没了。

于是,Cursor 登场,直接让它写一个浏览器插件吧。虽然我不会写浏览器插件,但它一定会。

开始的时候没有完全想清楚交互,和它一次次对话,边让它开发边测试,边汲取灵感。

让它匹配域名加参数,后来又发现有 hash 又让它匹配 hash,后边又加了参数正则匹配,但此时出现了问题,尝试让它改了好多次,不管怎么跟它说,正则都加不成功了。

于是从头再来,把原有的代码全部删除,写了一个完整的说明,让它来实现:

按照文档实现一个 Chrome 插件:

实现一个浏览器插件

主要功能:匹配用户输入的网站地址,设置当前网站为用户设置的标题。 三种选择供用户选择:

  • 按域
  • 按域名+路径
  • 按域名+路径+参数

用户选择某一个选项后,按照选项含义自动填充当前输入的网站地址,再提供一个输入框供用户输入想要设置的标题。

按域名+路径+参数

第三种方式相对复杂,其中参数也可能是 hash 参数,如果有 hash 参数,key 写 hash,值通过当前网页地址进行解析。

并且将当前网页参数的解析成 key、value 的形式,value 允许用户修改,并且 value 也支持写正则,可以提供一个 checkbox 供用户选择是否使用正则。

作用

设置完成后判断用户输入的地址是否匹配当前网站,尤其注意正则,如果匹配立即修改当前网站标题。

用户刷新页面,标题依旧按照用户添加的显示。

如果当前页面命中了之前的规则,将规则展示出来,方便用户删除,并且将当前规则放到第一个。

考虑整个 ui 和交互的自然美观,不要有莫名其妙的间隔,界面上都用中文。

最重要功能

用户设置规则之后要按照规则更新当前页面标题,并且刷新页面后也要自动更新标题

把需要的一次性告诉它,这次就得到了想要的功能,但发现还是漏了一些描述,不过不涉及核心功能,接着再一次一次对话完善就可以了。

已保存的规则增加编辑功能

换一个图标,体现设置标题

有点丑,重新设计一下

不要橙色小点

第一次保存规则后要立刻生效,不需要用户刷新页面

按域名+路径+参数时候,解析出来的参数支持删除

点击删除没反应,删除不用 btn ,可以搞一个叉号就行

点击 x 符合没反应

偶尔会遇到点击保存规则后标题没更新,刷新页面好标题才更新

当我删除当前正则匹配的规则,底色是蓝色。下一个规则不是当前匹配的规则,但因为第一个删了了,它移上来底色也变成了蓝色,但我期望只有匹配当前网站的规则底色才是蓝色。

保证 button 的宽度,button 不要竖向

然后插件就开发完成了,github.com/wind-liang/...

感兴趣的同学可以直接把项目 clone 下来加载到浏览器插件就可以使用了。

对于这种比较简单的工具,Cursor 确实太方便了。前期可以跟它随便聊,让它一点点改,当理清楚之后自己想要什么,可以写一个完整的文档让 Cursor 直接来实现。

相比之前手动开发,重头再来的成本约等于 0。从零实现这个插件,Cursor 也就几分钟就搞定了。

期间如果不满足可以尝试换换模型,开始用的 claude-3.7,但好像效果差强人意,但换成了 claude-3.5 反而好了一些。

随着 Cursor 的出现,这种个性化需求的工具可能会越来越多,不再需要看网上有没有,自己开发也不再需要考虑时间成本,不需要懂开发,把需求用自然语言一描述,工具自然就出来了。

推荐阅读:

Cursor 使用经验,一个需求开发全流程

AI 杂想

一行代码没写用 ai 开发了一个链接转二维码的网站,公众号引用链接更方便

相关推荐
a别念m41 分钟前
webpack基础与进阶
前端·webpack·node.js
芭拉拉小魔仙1 小时前
【Vue3/Typescript】从零开始搭建H5移动端项目
前端·vue.js·typescript·vant
axinawang1 小时前
通过RedisCacheManager自定义缓存序列化(适用通过注解缓存数据)
前端·spring·bootstrap
前端南玖1 小时前
Vue3响应式核心:ref vs reactive深度对比
前端·javascript·vue.js
哔哩哔哩技术1 小时前
B站在KMP跨平台的业务实践之路
前端
微笑边缘的金元宝1 小时前
svg实现3环进度图,可动态调节进度数值,(vue)
前端·javascript·vue.js·svg
程序猿小D1 小时前
第28节 Node.js 文件系统
服务器·前端·javascript·vscode·node.js·编辑器·vim
Trae首席推荐官1 小时前
字节跳动技术副总裁洪定坤:TRAE 想做 AI Development
前端·人工智能·trae
小妖6661 小时前
uni-app bitmap.load() 返回 code=-100
前端·javascript·uni-app
前端与小赵1 小时前
uni-app隐藏返回按钮
前端·uni-app