AI开发浏览器扩展 – 大湾区梁工-跨境电商

Understanding Chrome Extension Structure
理解 Chrome 扩展结构

Before diving into how I built my extension, let’s understand the basic structure of a Chrome extension. This knowledge will help you make sense of the code examples later in this guide.
在深入了解我是如何构建我的扩展之前，让我们先了解 Chrome 扩展的基本结构。这些知识将帮助您理解本指南后面提供的代码示例。

A typical Chrome extension consists of:
典型的 Chrome 扩展由以下部分组成：

manifest.json: The configuration file that defines the extension’s permissions, entry points, and metadata.
manifest.json: 定义扩展权限、入口点和元数据的配置文件。
Popup Interface: HTML, CSS, and JavaScript files for the user interface that appears when you click the extension icon.
Popup Interface: 点击扩展图标时显示的用户界面的 HTML、CSS 和 JavaScript 文件。
Background Scripts: (Optional) JavaScript that runs in the background to handle events.
Background Scripts: (可选) 在后台运行的 JavaScript，用于处理事件。
Content Scripts: (Optional) JavaScript that runs in the context of web pages.
Content Scripts: (可选) 在网页上下文中运行的 JavaScript。
Icons: Various sizes of icons for the extension.
图标：扩展程序的各种尺寸图标。

Here’s a basic folder structure for a Chrome extension:
这是一个 Chrome 扩展程序的基本文件夹结构：

my-extension/
├── manifest.json
├── popup/
│   ├── popup.html
│   ├── popup.css
│   └── popup.js
├── background/
│   └── background.js (optional)
├── content/ (optional)
│   └── content.js
└── icons/
    ├── icon16.png
    ├── icon32.png
    ├── icon48.png
    └── icon128.png

For simple extensions like the one I built, you might not need background or content scripts, focusing mainly on the popup interface and core functionality.
对于像我构建的这样简单的扩展程序，你可能不需要背景或内容脚本，主要关注弹出界面和核心功能。

权限：

Manifest V3 (the latest standard) and requests only the necessary permissions:
这使用 Manifest V3（最新标准），并仅请求必要的权限：

storage: For saving assets locally
storage : 用于本地保存资源
activeTab: For accessing the current page when saving links
activeTab : 用于保存链接时访问当前页面
clipboardWrite: For copy functionality
clipboardWrite : 用于复制功能
downloads: For downloading saved images
downloads : 用于下载保存的图片

代码：

AI code : https://github.com/liangdabiao/My-Assets-Chrome-Extentions

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

https://mp.weixin.qq.com/s/uTZ-GWeKalUhReTo-K1EZQ

不得不说，有了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，精准地定位到错误原因，并进行快速修复，后面再刷新插件、重新手动签到就不再出现报错信息了。

安装插件流程：

安装遇到了问题？

1. Windows 用户请检查是否已经解压缩了下载安装包（而不是双击打开）？

2. 是否已经开启了【开发者模式】？如果没有，请参考第二步的操作。

3. 是否是将 crx 文件拖入到【扩展程序】页面？注意⚠️：不要点击【加载已解压的扩展程序】，必须要拖入 crx 文件。

4. 浏览器不允许安装 crx 文件？尝试安装 zip 文件吧！点击此处查看 zip 安装教程。

文章参考： https://learnwithhasan.com/blog/built-chrome-extension-ai/

Understanding Chrome Extension Structure理解 Chrome 扩展结构

权限：

代码：