id: 261450f857404f43bce29b453fa21d6f
parent_id: 
item_type: 1
item_id: f1108dd9e536457fab241c6c7b85ca00
item_updated_time: 1764345629160
title_diff: "[{\"diffs\":[[1,\"两天开发了两款浏览器插件\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":12}]"
body_diff: "[{\"diffs\":[[1,\"<html>\\\r\\\n<head>\\\r\\\n  <title>两天开发了两款浏览器插件</title>\\\r\\\n  <basefont face=\\\"微软雅黑\\\" size=\\\"2\\\" />\\\r\\\n  <meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html;charset=utf-8\\\" />\\\r\\\n  <meta name=\\\"exporter-version\\\" content=\\\"YXBJ Windows/608924 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;\\\"/>\\\r\\\n  <meta name=\\\"content-class\\\" content=\\\"yinxiang.peso.superNote\\\"/>\\\r\\\n  <meta name=\\\"application-data:yinxiang.noteLayout\\\" content=\\\"{\\\"lineSpace\\\":\\\"recommend\\\",\\\"paragraphSpace\\\":\\\"recommend\\\"}\\\"/>\\\r\\\n  <style>\\\r\\\n\\tbody, td {\\\r\\\n\\t  font-family: 微软雅黑;\\\r\\\n\\t  font-size: 12pt;\\\r\\\n\\t}\\\r\\\n  </style>\\\r\\\n</head>\\\r\\\n<body>\\\r\\\n<a name=\\\"41092\\\"></a>\\\r\\\n<h1>两天开发了两款浏览器插件</h1>\\\r\\\n\\\r\\\n<div><span style=\\\"\\\"><div style=\\\"max-width: 700px;\\\"><p></p><div style=\\\"--en-blockquote: true; box-sizing: border-box; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial;\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=MzkzMTEyNTkwMw==&amp;mid=2247484517&amp;idx=1&amp;sn=2d6bdb2371e8fd1fda8cb048264483b7&amp;chksm=c382cb64af9f006100bf58ac5dfde4f5567bec06c0bc0442b5d1d8d45b1d3be67dee3c827b4d&amp;mpshare=1&amp;scene=1&amp;srcid=0429kxhRGOjiQXgdbo31eb8k&amp;sharer_shareinfo=b84b41954d56827f4749c8522efa004a&amp;sharer_shareinfo_first=b84b41954d56827f4749c8522efa004a#rd\\\"><span>http://mp.weixin.qq.com/s?__biz=MzkzMTEyNTkwMw==&amp;mid=2247484...</span></a></div></div><p></p><div style=\\\"\\\"><div><div><div><span style=\\\"\\\">原创</span><span><span style=\\\"\\\">理想是自由</span></span><span><a style=\\\"\\\"> 理想是自由 </a></span><span><em></em></span></div><div style=\\\"\\\"><div style=\\\"background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; color: rgb(0, 0, 0); word-spacing: 0em; letter-spacing: 0em; word-break: break-word; overflow-wrap: break-word; text-align: left;\\\"><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>最近暂时没在搞出海工具站的事了，忙着搞浏览器插件。接下来说说我搞的两个插件。</span></p><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>第一个插件</span></span></h2><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>事情的起因是这样的：</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>上周日在逛b站，然后突然想找很久之前看过的一个视频，忘了叫什么名字了，只记得大概内容，但是翻遍了b站的历史记录也没找到，因为b站的历史记录是有上限的，太早之前的历史记录是会被覆盖掉的。很懊恼，于是我就想，能不能我自己把这个问题解决了，比如开发一款浏览器插件，将历史记录无限的保存下来，这样的话就算再怎么早的记录我也能找到。同时还能解决视频被删除的问题，就是有些b站视频在发布后会被up主删除或者因为某些原因下架了，b站的历史记录那边就显示一片灰白，而我自己的浏览器插件则可以至少将封面图、标题等信息完整的保存下来，至少留个痕迹。</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>大家都知道，一个人的成就如何，行动力是关键。秉持着这个想法，我立马打开cursor开始vibe coding。何谓vibe coding?我的理解就是随心所欲的编程、写代码，不用管什么规则，先让AI来实现，不行的地方我来检查和修改，只要功能能跑通就行。</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>大致说一下我是怎么做的，首先我会新建一个项目目录，叫bilibili-unlimited-history，然后在里面新建一个README.md文件，里面写上我的需求：</span></p><div style=\\\"--en-blockquote: true; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgb(255, 177, 27); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; display: block; overflow-x: auto; overflow-y: auto;\\\"><p style=\\\"text-indent: 0; color: rgb(58,58,58); letter-spacing: 0; text-align: left; font-weight: normal;\\\"><span>我想实现一个浏览器插件。安装完该浏览器插件以后，点击浏览器插件图标，会打开一个新的 tab 页面。在这个页面中会加载 bilibili 账户的历史记录。这些历史记录是存在 indexdb 中的。 同时，这个插件每隔一分钟就会调用 bilibili 的历史记录 api，将历史记录保存到 indexdb 中。调用 bilibili 历史记录 api 应该是需要用户的 bilibili 的 cookie 的。 这样用户就可以将 bilibili 的历史记录无限的保存下来，不需要担心 bilibili 官方的历史记录功能会将一些很旧的历史记录删除导致用户找不到。 帮我搭建这个浏览器插件的框架。</span></p></div><div style=\\\"display: flex;\\\"><span><img src=\\\":/eb80026e7a884df98c05c70d3ecfb685\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>然后打开cursor的agent模式，引用README文件，让它开始实现。</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>很快cursor就帮我完成了，用的是原生的代码。这里说一下，用AI写浏览器插件时用原生是最适合的。因为AI它不懂一些浏览器框架，比如wxt, plasmo，你让它用框架来写，会有很多问题，很难受。而我的做法是，先让AI用原生代码帮我把基本功能实现，然后我自己搭建一个框架，比如用react、vite等等，再把原来的代码迁移过来。反正用AI来开发，能不用框架就不用。当然cusor帮我完成的是原始版本，后面我又进行了优化，比如加上全量同步和增量同步、加上无限滚动加载功能等等，总之有很多细节，基本上是优化不完的，只能先做个垃圾出来，然后慢慢优化。可以看下我的提交记录：<img src=\\\":/7757936eb85442949aac1422642b0728\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; width: auto;\\\" width=\\\"auto\\\"/></span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>说了这么多，不如看看这款插件长什么样子。</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>首先安装完以后，点击插件图标，是这样的。点击这个立即同步按钮就会将b站的历史记录获取过来存到indexeddb。<img src=\\\":/724a197eefc04ed0a96e857dab157ebb\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; width: auto;\\\" width=\\\"auto\\\"/></span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>历史记录页面是这样的：</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/060e6a28fdec44f38bd98ee0f79ec0d2\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>关于页面：</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/7bf2dc71934a4ef5976dbb9ad24b9d22\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>反馈建议这里用了一个飞书表单，方便收集建议：<img src=\\\":/2de454a61b834a9593cba2344ab9a9c5\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; width: auto;\\\" width=\\\"auto\\\"/></span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>设置页面：<img src=\\\":/f70ac3aea5fe491b91f2a6fe08969227\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; width: auto;\\\" width=\\\"auto\\\"/></span></p><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>设计</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>再说说设计这块。设计这块主要是插件的icon设计，我用的是logo.surf，还是挺简单的</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/e364e9a24ce844fa85e752d11207f987\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>初版完成以后我就立刻上架chrome应用商店了，截止目前已经有150个用户。</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/a070cd2b94f54d17accf5328f92154c9\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>推广</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>上架以后我就立刻做了推广，首先是自己的推特，然后是小红书、b站，接着去A姐那边投了稿(A姐是推特上一个专门推荐工具的博主，流量很大)。</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/8d688bb2558e4da5b82a98d2e5ab823a\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>当然A姐以及其他很多平台是不会自发帮你的产品做宣传的，是需要你自己去投稿的。投稿的邮件最好用心点写，搞一些好看的宣传图才能吸引别人的眼球，因为A姐会把你邮件里的图片直接发上去，我就是这点没做好，算是长了一点经验。</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/d8379163bc2946ed84701797db3d9251\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>未来</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>可能有些人会问，你这个插件不收费又不赚钱，图什么呢？目前来说这款插件确实是免费的，但是不代表后面不能收费。当然我目前还没想好要怎么收费，有空我会和AI讨论一下这个问题。</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/198298aef73a4e338594eac746b8cd24\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>沉浸式翻译这个插件大家知道吧？现在据说已经是严重盈利了，因为太好用了，口碑太好，用户太多了。</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/b7a84f7230704e92b7461ba590eaa759\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>简单来说，如果一个产品的用户基数大到了一定程度，那么这么大基数中总有一些用户会愿意为你付费。就类似于海王策略，找一万个妹子表白，总有一个能答应的。目前我已经收到了一些反馈。</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/ca34560214154d05858fd46fdc6a6835\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>第二个插件</span></span></h2><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>第二个插件是我昨天刚刚开发的，是在和我另一款产品的用户讨论时做出来的。用来导出小红书的搜索结果。</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/e8472c7982684eed94d86ed78c442cc1\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>也是立马花了半天vibe coding，主要时间花在了一个解决请求拦截的技术问题上，全是原生代码。最后在晚上发给了用户。</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>看看效果吧。首先是安装这个插件。安装完以后，打开小红书，输入你想搜的关键词进行搜索。插件会把搜索结果的请求的response拦截，保存在indexebdb中。<img src=\\\":/c2c5755676b049e4bb507d0b994ef866\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; width: auto;\\\" width=\\\"auto\\\"/></span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>想查看保存下来的数据，就点插件图标，会弹出popup页面，然后点查看数据</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/027cd3010bb44d8d8b278843330ecca6\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>接着就能看到保存下来的数据了。并且可以导出成csv和txt。</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/ba0c909500fc4d7cabcbc4f68ae801b7\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>csv文件:</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/606fc28959e7460cbd7c9c413f2b2ff9\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>txt文件:</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/d3fa7c8e8b434871965bf33cd8e66c3d\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>看看用户怎么说：</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/06490a983b294d219e733c81feb5838d\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><div style=\\\"display: flex;\\\"><span><img src=\\\":/de95ac57136943b49af31b2590be410a\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><div style=\\\"display: flex;\\\"><span><img src=\\\":/7af4711622064b88b6aafa40512c5c52\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>接着我来说说用户为什么有这个需求。其实主要是因为他运营了一个油管频道，就是把一些美女视频采集下来剪一下然后发布上去。视频下载方面他用的是yt-dlp，只要一个链接就可以很方便的下载链接中的视频和图片。另外yt-dlp也支持批量下载，只需要一个链接的列表。那怎么得到这个链接列表呢？那就需要用到我的插件了。上面那个txt文件导出的就是这个链接的列表。所以说我的这个插件大大的提升了他的效率。</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/ed939c78a619433bad87a7a8981b29e4\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><div style=\\\"display: flex;\\\"><span><img src=\\\":/871a19ce862446f1bc0ac32d2da217a5\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>后面还和这个用户讨论了一下自动化相关的，我准备学一下n8n。他还说如果我对油管有兴趣也可以帮我弄一个，免费的，算是交了一个朋友。</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>关于这个小红书数据采集的插件，我相信除了这个用户以外，一定还有其他不少人都需要。后面我会稍微优化一下发布到插件商店。也许用户量大了以后又能做成一个付费产品。</span></p><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>结语</span></span></h2><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>你看，做产品的好处真的很多，既能锻炼你做事的能力，又能让你长见识、发现需求，还能和人交朋友，实现利益交换。当然最重要的是赚钱。这一切的前提是你得行动起来，你得发挥出你的价值，让人看到。这同样也是我写这篇文章的目的。</span></p></div><div><span><br/></span></div></div></div><div><div><div><div style=\\\"display: flex;\\\"><a>阅读原文</a></div></div></div></div></div></div></div></span>\\\n</div></body></html>\\u0000\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":36209}]"
metadata_diff: {"new":{"id":"f1108dd9e536457fab241c6c7b85ca00","parent_id":"f67288c3a0be4374b5d532b5dcc3aabc","latitude":"0.00000000","longitude":"0.00000000","altitude":"0.0000","author":"","source_url":"","is_todo":0,"todo_due":0,"todo_completed":0,"source":"joplin-desktop","source_application":"net.cozic.joplin-desktop","application_data":"","order":1764348833039,"markup_language":2,"is_shared":0,"share_id":"","conflict_original_id":"","master_key_id":"","user_data":"","deleted_time":0},"deleted":[]}
encryption_cipher_text: 
encryption_applied: 0
updated_time: 2025-11-28T21:04:06.352Z
created_time: 2025-11-28T21:04:06.352Z
type_: 13