新做的 QR 码生成与识别 Chrome 扩展

最近两周研究了一下 QR 码（二维码的一种）的技术和生态，同时做了一个 QR 码生成与识别 Chrome 扩展。QR 码是将信息（文本、链接、字节）编码为易于识别的图像，有国际标准，然后可以方便地在各种设备之间“隔空”且无需网络的条件下传递信息。比如手机之间可以通过扫码交换信息，手机可以扫电脑上的 QR 码，反过来用笔记本的摄像头也可以扫手机上的 QR 码。

由于在国内移动端的使用非常普及，以至于现在在桌面端网页上也大量出现 QR 码。很多时候我并不想掏出手机扫电脑上的 QR 码，但是又想知道里面的内容是什么，这种情况下要是能直接在桌面网页里识别 QR 码就很方便了。这也是我实现这个扩展的动机之一。

做之前，试用了一些已有的 QR 码生成与解码的扩展，还挺多的。基本功能都有，不过感觉功能上都不同程度地少了一点。另外就是索取权限的问题，大部分扩展基本都需要这个“超级权限”：

“读取和更改您在访问的网站上的所有数据 (Read and change all your data on the websites you visit) ”

其实，生成 QR 码是完全不需要这个权限的，但是从图片中扫码就比较麻烦。要扫码就需要读取图片本身的内容，而这受浏览器同源策略的限制，只有同源的或者开启了 CORS 的图片才能读取。所以很多扩展就索取了这个“超级权限”，绕开同源策略的限制。但这个权限太大了，用着不放心，用户都不喜欢。所以我在实现这个扩展的时候，没有使用这个“超级权限”，而是将索取权限最小化（实现起来还挺麻烦的）。效果就是在很多网站上扫码可以不需要请求任何权限（同源或启用了 CORS ），比如在电脑上打开的一篇微信文章，需要的时候最多只会请求图片本身所在域名的权限。所以各位可以放心使用。

安装地址： https://chrome.google.com/webstore/detail/qr-code/cbimgpnbgalffiohilfglgkkhpegpjlo

以下为 Chrome Web Store 上的完整介绍。

轻松为网址、链接、文本生成 QR 码，同时支持右键菜单、本地文件和摄像头扫码。
核心功能：生成 QR 码与识别 QR 码。所有功能完全在浏览器本地实现，不会将任何数据发送到服务器。

1. 在页面中，通过右键菜单你可以：
• 选择含有 QR 码的图片扫码
• 生成当前页面链接的 QR 码
• 生成鼠标选中文本的 QR 码
• 生成页面上各种链接的 QR 码
• 生成页面上图片、视频或音频资源链接的 QR 码

2. 点击扩展图标会自动生成当前页面链接的 QR 码，方便在手机上扫描查看。也可自行修改输入，然后生成 QR 码并下载。

3. 在独立的 QR 码生成页面中，可以设置 QR 码的边缘大小、整体大小和纠错级别，并支持 png 或 svg 格式下载。

4. 在独立的 QR 码扫码页面中，可以通过图片 URL、本地文件或摄像头识别 QR 码。

hanguokai

2020-03-09 16:00:43 +08:00

@licoycn 微信的小程序码显然已经不是 QR 码了，这个扩展只支持 QR 码。

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html
https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html

从微信官方文档上看，小程序码是将小程序的 id 和 path 信息(URI)编码为图形，支持小程序码（推荐）和标准的 QR 码（不推荐）。我个人的理解是，因为所有 QR 码都长的一样，缺少品牌辨识度，所以微信自己设计了一种在外观上与 QR 码有明显区别的新的二维码，这样有助于提升品牌。不过小程序码目前只有微信客户端能识别，生成也需要微信后台参与（并有一定限制）。而 QR 码有国际标准、无专利费，所以生成和识别的客户端有很多。