两天开发了两款浏览器插件

最近暂时没在搞出海工具站的事了，忙着搞浏览器插件。接下来说说我搞的两个插件。

第一个插件

事情的起因是这样的：

上周日在逛b站，然后突然想找很久之前看过的一个视频，忘了叫什么名字了，只记得大概内容，但是翻遍了b站的历史记录也没找到，因为b站的历史记录是有上限的，太早之前的历史记录是会被覆盖掉的。很懊恼，于是我就想，能不能我自己把这个问题解决了，比如开发一款浏览器插件，将历史记录无限的保存下来，这样的话就算再怎么早的记录我也能找到。同时还能解决视频被删除的问题，就是有些b站视频在发布后会被up主删除或者因为某些原因下架了，b站的历史记录那边就显示一片灰白，而我自己的浏览器插件则可以至少将封面图、标题等信息完整的保存下来，至少留个痕迹。

大家都知道，一个人的成就如何，行动力是关键。秉持着这个想法，我立马打开cursor开始vibe coding。何谓vibe coding?我的理解就是随心所欲的编程、写代码，不用管什么规则，先让AI来实现，不行的地方我来检查和修改，只要功能能跑通就行。

大致说一下我是怎么做的，首先我会新建一个项目目录，叫bilibili-unlimited-history，然后在里面新建一个README.md文件，里面写上我的需求：

我想实现一个浏览器插件。安装完该浏览器插件以后，点击浏览器插件图标，会打开一个新的 tab 页面。在这个页面中会加载 bilibili 账户的历史记录。这些历史记录是存在 indexdb 中的。 同时，这个插件每隔一分钟就会调用 bilibili 的历史记录 api，将历史记录保存到 indexdb 中。调用 bilibili 历史记录 api 应该是需要用户的 bilibili 的 cookie 的。 这样用户就可以将 bilibili 的历史记录无限的保存下来，不需要担心 bilibili 官方的历史记录功能会将一些很旧的历史记录删除导致用户找不到。 帮我搭建这个浏览器插件的框架。

然后打开cursor的agent模式，引用README文件，让它开始实现。

很快cursor就帮我完成了，用的是原生的代码。这里说一下，用AI写浏览器插件时用原生是最适合的。因为AI它不懂一些浏览器框架，比如wxt, plasmo，你让它用框架来写，会有很多问题，很难受。而我的做法是，先让AI用原生代码帮我把基本功能实现，然后我自己搭建一个框架，比如用react、vite等等，再把原来的代码迁移过来。反正用AI来开发，能不用框架就不用。当然cusor帮我完成的是原始版本，后面我又进行了优化，比如加上全量同步和增量同步、加上无限滚动加载功能等等，总之有很多细节，基本上是优化不完的，只能先做个垃圾出来，然后慢慢优化。可以看下我的提交记录：

说了这么多，不如看看这款插件长什么样子。

首先安装完以后，点击插件图标，是这样的。点击这个立即同步按钮就会将b站的历史记录获取过来存到indexeddb。

历史记录页面是这样的：

关于页面：

反馈建议这里用了一个飞书表单，方便收集建议：

设置页面：

设计

再说说设计这块。设计这块主要是插件的icon设计，我用的是logo.surf，还是挺简单的

初版完成以后我就立刻上架chrome应用商店了，截止目前已经有150个用户。

推广

上架以后我就立刻做了推广，首先是自己的推特，然后是小红书、b站，接着去A姐那边投了稿(A姐是推特上一个专门推荐工具的博主，流量很大)。

当然A姐以及其他很多平台是不会自发帮你的产品做宣传的，是需要你自己去投稿的。投稿的邮件最好用心点写，搞一些好看的宣传图才能吸引别人的眼球，因为A姐会把你邮件里的图片直接发上去，我就是这点没做好，算是长了一点经验。

未来

可能有些人会问，你这个插件不收费又不赚钱，图什么呢？目前来说这款插件确实是免费的，但是不代表后面不能收费。当然我目前还没想好要怎么收费，有空我会和AI讨论一下这个问题。

沉浸式翻译这个插件大家知道吧？现在据说已经是严重盈利了，因为太好用了，口碑太好，用户太多了。

简单来说，如果一个产品的用户基数大到了一定程度，那么这么大基数中总有一些用户会愿意为你付费。就类似于海王策略，找一万个妹子表白，总有一个能答应的。目前我已经收到了一些反馈。

第二个插件

第二个插件是我昨天刚刚开发的，是在和我另一款产品的用户讨论时做出来的。用来导出小红书的搜索结果。

也是立马花了半天vibe coding，主要时间花在了一个解决请求拦截的技术问题上，全是原生代码。最后在晚上发给了用户。

看看效果吧。首先是安装这个插件。安装完以后，打开小红书，输入你想搜的关键词进行搜索。插件会把搜索结果的请求的response拦截，保存在indexebdb中。

想查看保存下来的数据，就点插件图标，会弹出popup页面，然后点查看数据

接着就能看到保存下来的数据了。并且可以导出成csv和txt。

csv文件:

txt文件:

看看用户怎么说：

接着我来说说用户为什么有这个需求。其实主要是因为他运营了一个油管频道，就是把一些美女视频采集下来剪一下然后发布上去。视频下载方面他用的是yt-dlp，只要一个链接就可以很方便的下载链接中的视频和图片。另外yt-dlp也支持批量下载，只需要一个链接的列表。那怎么得到这个链接列表呢？那就需要用到我的插件了。上面那个txt文件导出的就是这个链接的列表。所以说我的这个插件大大的提升了他的效率。

后面还和这个用户讨论了一下自动化相关的，我准备学一下n8n。他还说如果我对油管有兴趣也可以帮我弄一个，免费的，算是交了一个朋友。

关于这个小红书数据采集的插件，我相信除了这个用户以外，一定还有其他不少人都需要。后面我会稍微优化一下发布到插件商店。也许用户量大了以后又能做成一个付费产品。

结语

你看，做产品的好处真的很多，既能锻炼你做事的能力，又能让你长见识、发现需求，还能和人交朋友，实现利益交换。当然最重要的是赚钱。这一切的前提是你得行动起来，你得发挥出你的价值，让人看到。这同样也是我写这篇文章的目的。