最近在写文章，有个场景是我要在登录多个账号，需要每一个都可以记录自己的登录状态。
- 本来是用安装多个多个浏览器，一个浏览器登录一个账号，管理不方便。
- 后来换成指纹浏览器，但是最近它这样了。
于是自己用Cursor写一个简单的类似指纹浏览器功能。
- 实现基本的指纹功能：修改浏览器的User-Agent参数
- 可以创建多个浏览器的实例
- 每一个浏览器的存储的用户信息都是独立的
- 可以管理每一个浏览器的打开和停止
- 可以安装到电脑上
- 安装文件和源码放在文章末尾，需要的可以自取。
最终效果如下：
下面说一下我用Cusor开发的过程
能力要求：
- 这个项目对于纯新手不太适合，因为涉及到很多开发的知识，而且调试难度比较大。
- 开过过程中还有可能出现一些AI决策不了的问题，需要自己判断合适的解决方案。
- 对于新手，这个解题思路可以当作一个参考。
- 对于有开发经验的人，可以当作上手知道。
技术方案：
- 使用Electron开发桌面端
- Puppeteer控制浏览器
- React+webpack实现界面功能，
- 通过Electron的ipcMain实现前端和服务端的通信
为什么这样选，因为熟悉，这些东西我平时都用过，出现问题知道怎么改。
可能也有更好的方案，不过暂时没必要花很大精力去研究，先做一个工具，解决目前的难题。
这次全部使用Cursor的Composer功能进行开发调试。
项目需求分析
说清楚要做一个什么东西，需要什么功能。
我需要开发一个 Electron 应用，可以同时管理多个浏览器实例，包括启动、停止、配置管理等功能。
设置淘宝镜像
通过npmrc设置淘宝镜像地址
npm资源地址国内访问受限，这一步是为了加快资源下载速度。
让AI检查一遍项目代码
检查一遍项目代码
这一步的目的是检查项目配置以及代码逻辑，让AI先检查修复一遍。规避一些漏洞。
运行时错误修复
把错误日志复制到Composer对话框，然后直接输入fix。让AI修复问题。
第一版页面效果
可以看到效果不太好。
修改页面配置参数
新建浏览器实例页面，配置只保留名称，其余参数不要，程序自动设置
最终效果：
增加一些浏览器状态的管理
增加浏览器实例状态管理的功能：启动、运行、关闭状态。
执行完之后，发现AI只写了界面的功能，node端并没有实现。需要完善一下。
检查状态管理功能是否完整
开发环境代码自动更新
怎么改造项目让 electron 核心代码变动时，自动更新。先想一想方案
使用electron-reloader方案
增加将electron打包成可执行文件的配置
增加将electron打包成可执行文件的配置
最后，给项目写一个文档
熟悉项目 ，写一份readme文档
写在最后，这只是一个基本的流程，开发过程中还会遇到很多小问题，大家可以把AI当作老师、助手，遇到不会的问题，都可以用Chat模式询问学习，遇到不熟悉的内容，让AI帮你介绍。
对于新手，做完这个项目还是挺有难度，大家可以参考源码直接学习，或者在源码的基础上，再次迭代。
源码和安装包免费开放，大家可以公众号后台回复【指纹浏览器】获取。
⭐往期干货：
【cursor教程2】给0代码基础小白的Cursor使用教程
周一上班，天塌了，Cursor加强限制，无法使用，解决方法来了
END
我是柒崽，7年前端开发，分享前端干货，职场经验，实用AI技巧。
