我做了一个 Chrome 二维码工具:生成、识别、扫码,一个扩展搞定

0 阅读5分钟

平时使用浏览器的时候,二维码其实是一个非常高频的东西。

比如:

  • 想把当前网页分享给手机
  • 想把一段文字快速生成二维码
  • 网页上看到二维码,想直接识别里面的内容
  • 收到一张二维码截图,想提取其中的链接
  • 电脑摄像头前放着一个二维码,想直接扫码
  • 不想为了一个二维码功能,再打开一个网站或者下载一个独立软件

所以我做了一个简单的 Chrome 扩展:

QR Code Generator & Scanner

Chrome Web Store:QR Code Generator & Scanner

目前已经发布到 Chrome Web Store。

image.png


一个扩展,同时解决二维码「生成 + 识别」

这个扩展主要做两件事情:

1. 二维码生成

可以直接输入文字生成二维码。

当然,也可以直接把当前网页 URL转换成二维码。

例如:

正在电脑上浏览一个网页,想用手机继续打开。

以前可能需要:

  1. 复制 URL
  2. 打开二维码生成网站
  3. 粘贴 URL
  4. 生成二维码
  5. 手机扫码

现在直接通过浏览器扩展即可完成。


2. 二维码识别

除了生成二维码,我更希望它解决另外一个实际问题:

电脑上看到二维码以后,怎么最快把它里面的信息拿出来?

所以加入了二维码扫描功能。

目前支持:

  • 图片二维码识别
  • 屏幕二维码识别
  • 摄像头扫码

也就是说,无论二维码来自:

网页 / 截图 / 图片 / PDF / 视频画面 / 手机屏幕 / 实体二维码

都可以尝试直接识别。


为什么选择 Rust + WASM?

这个项目里面比较有意思的一部分,其实不是二维码 UI,而是底层的二维码识别。

我没有把二维码识别请求发送到服务器,而是采用了:

Rust + WebAssembly

的方式在浏览器本地执行二维码识别。

这样做有几个好处。

本地处理

图片、截图等内容可以直接在本地进行处理。

不需要:

上传图片 → 服务器识别 → 返回结果

而是:

图片 → WASM → 二维码结果

对于二维码这种非常适合本地计算的场景,我认为这是一个更自然的架构。

Chrome Web Store 页面目前也明确标注,该扩展使用 Rust/WASM 引擎进行二维码处理。


为什么不用一个在线二维码网站?

其实网上已经有大量二维码生成和识别网站。

但浏览器扩展最大的优势就在于:

不需要离开当前页面。

例如看到一个二维码:

以前:

下载图片 → 打开网站 → 上传 → 等待识别

现在:

打开扩展 → 选择图片/屏幕 → 识别

生成二维码也是类似:

当前网页 → 扩展 → 二维码

整个流程尽可能缩短。


我比较在意的一点:隐私

二维码里面经常包含一些比较敏感的信息:

  • 登录链接
  • 邀请链接
  • 内网地址
  • Wi-Fi 信息
  • 联系方式
  • 支付相关信息
  • 临时 Token
  • 私人图片

因此我不太希望这种工具默认把用户的数据上传到服务器。

目前这个扩展采用本地处理方式,并且 Chrome Web Store 上的隐私声明显示,开发者声明不会收集或使用用户数据。

对于一个二维码工具来说,我认为:

能本地处理,就尽量本地处理。


体积也尽可能小

目前 Chrome Web Store 页面显示,扩展大小约为:

394 KiB

版本为:

1.1.1

并且目前支持 23 种语言,包括中文、英文、日文、韩文、法文、德文、西班牙文等。

我希望它最终是一个:

安装以后几乎感觉不到存在,但需要二维码的时候随手就能用的工具。


它适合哪些场景?

其实我觉得二维码工具最重要的不是“功能有多少”,而是能不能解决一些具体的小问题。

💻 开发者

开发本地 Web 项目时:

http://192.168.x.x:3000

直接生成二维码,手机扫码访问。


📱 手机与电脑之间传递链接

电脑看到一个网页:

不想再用微信给自己发链接。

直接生成二维码。

手机扫一扫即可打开。


🖼️ 识别截图

看到一张二维码截图:

不需要再打开手机扫码。

直接把图片交给扩展识别。


🎥 视频里的二维码

视频暂停以后出现二维码,也可以尝试通过屏幕识别提取内容。


📷 摄像头扫码

电脑有摄像头的话,也可以直接作为二维码扫描器使用。


一个很小,但很实用的浏览器工具

我一直比较喜欢这种“小工具”。

它不需要一个复杂的账号体系,也不需要一个后台服务,更不需要做成一个巨大的 Web App。

打开浏览器:

需要的时候点一下。

然后:

生成二维码
或
识别二维码

完成。


后续还会继续完善

目前这个项目还是一个持续迭代中的小工具。

后面可能会继续增加一些实用功能,例如:

  • 更完善的二维码识别
  • 批量图片识别
  • 更方便的截图识别
  • QR Code 历史记录
  • 自定义二维码样式
  • 更好的二维码生成参数
  • 更多编码格式
  • 更完善的快捷键操作

但整体方向不会变:

简单、快速、本地化。


如果你也经常和二维码打交道

可以试试看:

安装 QR Code Generator & Scanner

如果你觉得这个工具有用,也欢迎在 Chrome Web Store 留下反馈。

目前版本是 1.1.1,后面我也会继续根据实际使用场景迭代。


最后

这个项目背后的思路其实很简单:

能在浏览器本地完成的事情,就没必要绕一圈上传到服务器。

一个二维码:

生成它。

识别它。

扫描它。

就这么简单。

QR Code Generator & Scanner —— 一个尽可能简单的浏览器二维码工具。