开源免费！用Trae5分钟开发Chrome插件“掘金自动签到助手”，每天自动签到领矿石抽奖品

原文链接（点击可进交流群）：https://mp.weixin.qq.com/s/uTZ-GWeKalUhReTo-K1EZQ

项目背景

前几天又恢复在掘金平台发布文章了，一方面是想参加掘金推广Trae的一些活动，另一方面，作为程序员，掘金也是一个不错的（精准）扩大自己影响力的技术内容分享和交流平台。

也欢迎大家关注我的掘金账号：https://juejin.cn/user/739287403071614

在发布完文章后，就在掘金平台上随处逛逛，不经意间发现了一个好玩的地方——成长福利页面：

每个用户都可以在每日签到页面签到，签到后可以领取不同数量的矿石（类似于积分），并且连续签到的天数越多，能够领到的矿石也越多，到后面最多一天可领取4096个矿石。领取到的矿石可以用于抽奖，能够抽取到各种实物奖品：

虽然很多奖品价值不一定很高，但是能够薅到掘金的羊毛肯定是不会拒绝的。

现在唯一的问题就是怎么能够多多领取到矿石、增加抽奖次数了，最简单粗暴的方式肯定就是每天调一个定时闹钟、手动到签到页面签到再到抽奖页面抽奖了，但是对于有健忘症的我来说确实有点太难了，还是得上工具、每天自动执行，这就难不倒我了，可以使用RPA来实现，但是麻烦的是需要引入一些第三方的RPA软件、独立性不够高，正好最近在琢磨AI编程，何不就趁此开发一个不需要额外安装其他软件的浏览器插件，每次就只需要在浏览器中就可以自动实现签到，而不需要再打开多余的软件了，初步想法有了，说干就干！

5分钟用Trae开发一个Chrome插件

不得不说，有了AI编程，任何想法的从0到1的实现真的很快，只花了5分钟，就基本实现了我想要的核心功能。

AI编程软件有很多，Cursor、Windsurf、Trae、Cline、RooCode等都可以，这里选择字节出的更适合国人宝宝体质的Trae（The Real Al Engineer）进行开发。

1.新建项目文件夹

这里我命名为Juejin Auto Check-in Assistant，即掘金自动签到助手，并用Trae打开新建的文件夹：

2.基于想要实现的功能构造提示词，并告诉Trae进行开发

这里选择内置的Builder或者Builder with MCP智能体进行开发：

输入提示词让AI开始开发：

完整提示词如下：

我想创建一个浏览器插件“掘金自动签到助手”，实现在每天定时（例如每晚9点）在掘金的“每日签到”页面（https://juejin.cn/user/center/signin?from=sign_in_menu_bar）自动签到，签到前需先验证是否登录，处于登录状态才进行签到，并且签到后可以进入“幸运抽奖”页面进行1次单抽“单抽”抽奖。
其中，所有的操作使用puppeteer或类似的工具来模拟人的操作，减少被平台识别的概率；
每天的签到时间和是否抽奖支持在插件中自定义设置；
每天执行时，需要在设置时间的基础上增加随机时间（最长半小时）；
执行完成后，需要关闭打开的网页。

其中，签到按钮的定位为button.signedin.btn，HTML元素为<button class="signedin btn" data-v-5c13335b="">今日已签到</button>；
去抽奖按钮的定位为button.btn，HTML元素为<button class="btn" data-v-5d6861df="">去抽奖</button>；
单抽按钮的定位为div#turntable-item-0.turntable-item.lottery，HTML元素为<div data-v-7f21089c="" id="turntable-item-0" class="turntable-item lottery">...</div>。

请基于我提供的掘金的每日签到页面、签到成功页面、幸运抽奖页面和未登录页面的截图进行开发。

为了让AI更加理解页面的布局、更精准地实现功能，还上传了掘金平台签到和抽奖页面的截图：

为了让AI生成的插件可以精确匹配到页面的各个元素，手动在网页上复制各个元素的选择器和元素HTML代码，并结合到提示词中。

Trae中支持多个强大模型，每个模型的表现并不会相同，通过简单对比编程能力强大的Claude-3.7-Sonnet和刚刚推出的Gemini-2.5-Pro-Preview(0506)，最终选择了生成更稳定的Gemini-2.5-Pro，生成结果一次通过。

3.再通过几轮对话优化细节

在手动签到过程中，发现扩展程序管理页面有与掘金自动签到助手有关的错误信息：

Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
上下文
background.js
堆叠追踪

直接将错误信息复制给Trae，让其进行错误排查和修复：

这里换成Claude-3.7-Sonnet，精准地定位到错误原因，并进行快速修复，后面再刷新插件、重新手动签到就不再出现报错信息了。

AI在生成插件的过程中会自动生成icon，但是一般是无法正常显示图片的，需要自己在其他渠道设计制作并导入，这里我选择了豆包生成icon：

生成好之后，选择一个合适的图片再下载到本地，下载下来的图片默认是带豆包水印的，此时可以选择图片去水印工具先去掉水印，例如百度图片编辑https://image.baidu.com/，如下：

去掉水印后，手动修改图片尺寸、得到大小分别为128x128、48x48、16x16的3个不同尺寸的png图片。

因为Gemini生成的插件代码默认使用的icon格式为svg格式而非png格式，因此需要将代码中相关部分进行修改，如果不懂插件开发，手动修改可能会出错，此时更好的方式是让AI来修改：

更改代码后，再将刚刚手动得到的3个尺寸的图片文件复制到项目的icon存放文件夹（我这里即为images文件夹）中，浏览器重新刷新插件即可生效。

也可以自行在线设计icon，推荐一个icon设计平台：

https://icon.kitchen/

设计好后，下载合适的格式和尺寸的文件，可以手动导入到项目中，也可以告诉Trae，让其自动调整大小、移动文件、修改配置等，更加智能和省心。

（可选）最后，如果你要把项目发给别人使用，最好有一个说明文档，让AI根据项目生成一个readme文档：

AI会生成一个比人工写好得多的README文档。

运行效果与开源地址

在浏览器扩展程序管理页面导入开发好的插件文件夹，即可开始体验：

可以看到，插件实现了立即手动签到抽奖和自动定时签到的功能，并且会显示下次的签到时间。点击打开设置可以进一步自定义设置：

设置时间时，尽量设置在自己电脑每天都会打开的时间段，来尽可能增加自动签到的执行次数。

到达设定时间后，签到抽奖任务会自动执行，会在设定起始时间的基础上＋随机延迟时间开始执行：

从此以后，就可以实现掘金签到抽奖无忧了！

GitHub开源地址：

https://github.com/donggeai/Juejin-Auto-Check-in-Assistant

一点思考

上面的这种实现方式有一个问题，因为模拟签到等操作都是基于元素定位实现的，因此如果掘金官方页面元素更新，则自动签到因为定位不到元素而会失效，需要进行针对性地更新。

在前面的开发过程中，用到了至少Claude-3.7-Sonnet和Gemini-2.5-Pro-Preview(0506)两个模型，在不同的场景下选择不同的模型会达到整体更好的效果，所以在整个开发过程中，并不一定用单一的某个模型，而是可以多个模型搭配使用，这里就采用了多个模型搭配开发的思路、大大加快了开发进程。希望Trae后期也可以加上可以根据在任务执行过程中的不同阶段智能选择不同模型的功能，在模型调用成本和实现效果之间达到一个均衡。

同时，AI编程就像开盲盒，具有很强的随机性，所以你在进行复现的时候遇到的情况可能与我并不相同，因此需要根据实际情况进行针对性地解决，而不要一味照搬、借鉴思路即可。

除此之外，如果多次开发的效果都不好，也可以创建自定义的项目规则，用来约束Chrome插件开发的规范、约束AI、减少AI自我发挥导致出错的可能。一个来自cursor.directory的不错的Chrome插件开发规则示例如下：

You are an expert Chrome extension developer, proficient in JavaScript/TypeScript, browser extension APIs, and web development.

Code Style and Structure
- Write clear, modular TypeScript code with proper type definitions
- Follow functional programming patterns; avoid classes
- Use descriptive variable names (e.g., isLoading, hasPermission)
- Structure files logically: popup, background, content scripts, utils
- Implement proper error handling and logging
- Document code with JSDoc comments

Architecture and Best Practices
- Strictly follow Manifest V3 specifications
- Divide responsibilities between background, content scripts and popup
- Configure permissions following the principle of least privilege
- Use modern build tools (webpack/vite) for development
- Implement proper version control and change management

Chrome API Usage
- Use chrome.* APIs correctly (storage, tabs, runtime, etc.)
- Handle asynchronous operations with Promises
- Use Service Worker for background scripts (MV3 requirement)
- Implement chrome.alarms for scheduled tasks
- Use chrome.action API for browser actions
- Handle offline functionality gracefully

Security and Privacy
- Implement Content Security Policy (CSP)
- Handle user data securely
- Prevent XSS and injection attacks
- Use secure messaging between components
- Handle cross-origin requests safely
- Implement secure data encryption
- Follow web_accessible_resources best practices

Performance and Optimization
- Minimize resource usage and avoid memory leaks
- Optimize background script performance
- Implement proper caching mechanisms
- Handle asynchronous operations efficiently
- Monitor and optimize CPU/memory usage

UI and User Experience
- Follow Material Design guidelines
- Implement responsive popup windows
- Provide clear user feedback
- Support keyboard navigation
- Ensure proper loading states
- Add appropriate animations

Internationalization
- Use chrome.i18n API for translations
- Follow _locales structure
- Support RTL languages
- Handle regional formats

Accessibility
- Implement ARIA labels
- Ensure sufficient color contrast
- Support screen readers
- Add keyboard shortcuts

Testing and Debugging
- Use Chrome DevTools effectively
- Write unit and integration tests
- Test cross-browser compatibility
- Monitor performance metrics
- Handle error scenarios

Publishing and Maintenance
- Prepare store listings and screenshots
- Write clear privacy policies
- Implement update mechanisms
- Handle user feedback
- Maintain documentation

Follow Official Documentation
- Refer to Chrome Extension documentation
- Stay updated with Manifest V3 changes
- Follow Chrome Web Store guidelines
- Monitor Chrome platform updates

Output Expectations
- Provide clear, working code examples
- Include necessary error handling
- Follow security best practices
- Ensure cross-browser compatibility
- Write maintainable and scalable code

正好，最新版的Trae已经支持自定义个人规则和项目规则，将上面的规则复制粘贴到Trae的当前项目的项目规则中：

这样会约束AI更加稳定可靠地进行Chrome插件开发。

在AI时代，AI编程会在很大程度上抹平普通人与开发者之间的差距，如果你有好的想法，就马上行动，利用AI编程的强大助力，让想法突破技术藩篱！