【More Than Coding】用 SOLO 30 分钟打造一款全能二维码生成器，并一键部署为 Edge 浏览器扩展

SOLO挑战赛专区
1

一、摘要

作为一名自由职业者，我经常需要为客户生成各种类型的二维码——名片、WiFi 连接、活动链接……每次都要打开不同的在线工具，体验参差不齐，自定义选项也有限。借助 TRAE SOLO，我从零开始，仅用 30 分钟 就完成了一款支持 8 种二维码类型、6 种点样式、Logo 嵌入、PNG/SVG 导出 的全能二维码生成器，并进一步将其打包为 Edge 浏览器扩展，真正做到了「一次生成，随时可用」。

二、背景

我是一名自由职业者，日常承接品牌设计、活动策划、小型建站等零散项目。工作中频繁涉及二维码的使用场景：

  • 活动策划：需要生成含活动链接的二维码海报

  • 名片设计：客户要求把 vCard 二维码嵌入名片

  • WiFi 分享：为咖啡厅、工作室生成 WiFi 连接码

  • 社交媒体：生成各种社交媒体主页链接码

市面上的二维码工具要么功能单一（只支持网址转码），要么广告满天飞，要么自定义选项太少。我需要一个功能全面、界面美观、离线可用的二维码生成工具，最好能直接集成到浏览器里，随用随开。

以前用在线工具，光是找合适的工具就要花 10 分钟，生成后还要截图、裁剪、调整，整个流程效率很低。

三、实践过程

第一步：需求拆解

我没有直接让 SOLO 「做一个二维码生成器」，而是把需求拆成了几个清晰的层次：

  1. 核心功能：支持多种类型的二维码内容编码（文本、网址、WiFi、vCard、邮件、电话、短信、地理位置）

  2. 样式自定义：前景色、背景色、尺寸、边距、容错级别、点样式、定位角样式

  3. 高级功能：Logo 嵌入、PNG/SVG 双格式导出、复制到剪贴板

  4. 部署方式：先做网页版，再打包为 Edge 浏览器扩展

第二步：选择技术方案

我让 SOLO 帮我评估了几种方案：

  • 纯 Python + qrcode 库：生成快，但界面不够美观

  • 前端 Canvas 手绘：灵活但开发量大

  • qr-code-styling 库 + 单 HTML 文件：:white_check_mark: 功能强大、样式丰富、零依赖部署

最终选择了第三种方案——一个 HTML 文件搞定一切，打开即用。

第三步：逐步生成

阶段一：网页版（约 15 分钟）

我给 SOLO 的核心指令：

「帮我做一个全能二维码生成器，Web 网页应用，支持文本、网址、WiFi、vCard、邮件、电话、短信、位置 8 种类型，支持自定义颜色、大小、点样式、Logo 嵌入，使用 qr-code-styling 库，深色主题，现代化 UI。」

SOLO 的执行过程非常流畅：

  1. 先确认了需求细节（类型、功能范围、实现形式）

  2. 自动引入了 qr-code-styling CDN 库

  3. 生成了完整的单文件 HTML，包含所有表单、样式和交互逻辑

  4. 内置了实时预览——输入内容的同时二维码同步更新

阶段二：Edge 扩展打包（约 15 分钟）

网页版完成后，我进一步提出：

「请把它部署到 Edge 上，做成浏览器扩展。」

SOLO 完成了以下工作：

  1. 创建了 manifest.json（Manifest V3 规范）

  2. 将页面布局从左右双栏改为上下结构（预览区 + 控制区），适配 Popup 窗口

  3. 样式和 Logo 设置改为可折叠面板，节省空间

  4. 将 qr-code-styling.js 下载到本地，实现离线使用

  5. 用 Python 生成了 16/48/128 三种尺寸的扩展图标

  6. 最终打包为 ZIP 文件，可直接加载到 Edge

第四步：踩坑与解决

问题 解决方案
Popup 窗口宽度有限，左右布局太挤 改为上下布局，二维码预览置顶
CDN 库在扩展离线时无法加载 下载 JS 文件到扩展目录本地引用
vCard 字段过多导致表单太长 精简为最常用的 6 个字段，其余隐藏
样式设置占用太多 Popup 空间 做成可折叠面板，默认收起

四、成果展示

:globe_with_meridians: 网页版

一个 HTML 文件，浏览器直接打开即可使用：

  • 8 种二维码类型：文本、网址、WiFi、vCard、邮件、电话、短信、地理位置

  • 6 种点样式：方形、圆点、圆角、超圆角、经典、经典圆角

  • 3 种定位角样式：方形、圆形、超圆角（含边框独立设置）

  • 4 档容错级别：L / M / Q / H

  • Logo 嵌入：支持上传自定义 Logo，可调节大小

  • 多格式导出：PNG 下载、SVG 下载、一键复制到剪贴板

:puzzle_piece: Edge 浏览器扩展

  • 点击工具栏图标即可弹出使用

  • 所有功能完整保留

  • 完全离线可用，无需网络

  • 深色主题 UI，与 Edge 风格融合

:inbox_tray: 下载地址

文件 说明 下载链接
qr-extension.zip Edge 浏览器扩展包（含完整源码） 点击下载

:warning: 下载链接有效期为 24 小时，如过期请联系作者获取最新链接。

:file_folder: 项目结构

Plain Text

1
2
3
4
5
6
7
8

qr-extension/
├── manifest.json          # Manifest V3 配置
├── popup.html             # 扩展弹出页面
├── qr-code-styling.js     # 二维码生成库（本地）
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

:open_book: 配置教程：如何安装 Edge 浏览器扩展

以下教程适用于 Microsoft Edge 浏览器（Chromium 内核版本）。Chrome 用户操作步骤基本一致。

方法一：加载解压缩的扩展（推荐，最简单）

这是最快捷的方式，适合个人使用：

第 1 步：解压扩展包

将下载的 qr-extension.zip 解压到电脑上的任意文件夹，例如：

Plain Text

1

D:\tools\qr-extension\

解压后确认文件夹内包含以下文件：

Plain Text

1
2
3
4
5
6
7
8

qr-extension/
├── manifest.json
├── popup.html
├── qr-code-styling.js
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

第 2 步：打开 Edge 扩展管理页

在 Edge 浏览器地址栏中输入以下地址并回车：

Plain Text

1

edge://extensions/

或者通过菜单进入：点击右上角 ··· → 扩展 → 管理扩展

第 3 步：开启开发者模式

在扩展管理页面的左侧边栏或右下角，找到 「开发人员模式」 开关，将其打开。

:warning: 开启后页面会出现一个安全提示，这是正常的，因为我们加载的是本地开发的扩展。

第 4 步：加载扩展

  1. 点击页面顶部出现的 「加载解压缩的扩展」 按钮

  2. 在弹出的文件选择器中，选择刚才解压的 qr-extension 文件夹

  3. 点击 「选择文件夹」

第 5 步：验证安装成功

  • 扩展管理页面中应该出现「全能二维码生成器」卡片

  • Edge 浏览器工具栏会出现二维码图标（紫色圆角方块 + “Q”）

  • 如果工具栏没有显示图标，点击工具栏的 「拼图」 图标，找到「全能二维码生成器」，点击 :pushpin: 固定 按钮

第 6 步：开始使用

点击工具栏中的二维码图标，弹出窗口即可使用！

方法二：网页版直接使用（无需安装）

如果你不想安装扩展，也可以直接使用网页版：

  1. 双击打开 qr-generator.html 文件

  2. 浏览器会自动打开二维码生成器页面

  3. 所有功能与扩展版完全一致

:light_bulb: 网页版需要联网加载 qr-code-styling 库，扩展版则完全离线可用。

常见问题

Q：加载扩展时提示「清单文件缺失或不可读」？

请确认你选择的是 qr-extension 文件夹本身，而不是它的上级目录。文件夹内必须包含 manifest.json 文件。

Q：工具栏找不到扩展图标？

点击 Edge 工具栏的「拼图」图标，在扩展列表中找到「全能二维码生成器」，点击右侧的 ··· 菜单，选择「固定到工具栏」。

Q：更新扩展怎么办？

由于是本地加载的扩展，更新方式很简单：

  1. 用新版文件替换 qr-extension 文件夹中的对应文件

  2. 回到 edge://extensions/ 页面

  3. 找到「全能二维码生成器」，点击 :counterclockwise_arrows_button: 刷新 按钮

Q：能发布到 Edge 扩展商店吗？

可以，但需要注册 Microsoft 开发者账号（一次性费用约 19 美元），并通过商店审核。对于个人使用来说，方法一已经完全足够。

Q：Chrome 浏览器能用吗？

完全可以！操作步骤相同，只是地址栏输入 chrome://extensions/ 即可。

五、效果与总结

提效数据

维度 之前 现在
找工具 + 生成二维码 10-15 分钟 0 分钟（工具栏一键打开）
自定义样式 大多数工具不支持 全部可调
多类型支持 需要切换不同工具 一个工具搞定 8 种类型
离线使用 不可能 :white_check_mark: 完全离线
部署为扩展 需要前端开发能力 SOLO 自动完成

SOLO 在整个流程中做了什么

  1. 需求分析：帮我梳理了功能边界和技术选型

  2. 代码生成：一次性生成了完整的单文件应用（HTML + CSS + JS）

  3. UI 设计：深色主题、现代化布局、响应式适配

  4. 扩展打包：自动完成 Manifest V3 配置、布局适配、图标生成、ZIP 打包

  5. 问题排查：在浏览器中自动测试验证，确保功能正常

我的思考

作为一个非专业开发者，以前想要一个趁手的工具，要么花钱买，要么花几天学编程。SOLO 最大的价值在于——它把「想法」到「产品」的距离缩短到了分钟级别。

整个过程中，我做的最重要的事情不是写代码，而是把需求想清楚、拆明白。只要你能描述清楚想要什么，SOLO 就能帮你实现。这让我意识到，未来的核心竞争力不是「会不会写代码」，而是「能不能定义好问题」。

从一个模糊的想法到一款可用的浏览器扩展，总共只用了 30 分钟。这在以前是不可想象的。

本项目使用 TRAE SOLO 完成，从需求分析到最终部署，全程 AI 辅助开发。