话说我又写了一个小工具,一个可以读取网页上二维码信息的 Chrome 插件。为什么要做这样一个插件呢,因为平时在浏览网页的时候,经常会碰到需要扫描二维码的情况,而我又不想掏出手机扫一扫。掏出手机经常会打断我的学习/工作常态,还有些时候比如扫描 keynote 二维码,在手机上并不方便阅读,还是要把链接发到电脑上。
en.m.wikipedia.org (二维码自动识别)
下载
想体验一下的同学可以从 chrome web 应用商店下载:QR Code Reader,点击插件的图标就可以识别当前页面上的二维码。
怎么实现的呢?
其实很简单,Chrome 有个 API: chrome.tabs.captureVisibleTab
,可以对当面 tab 的可视区域进行截屏(别忘了在 manifest.json
里设置相应的权限)。然后我们就可以利用一些二维码 decode 库对截取下来的图片进行分析。过程如下:
const Reader = () => {
const [text, set] = useState('No QR code found!')
const read = (dataUrl) => {
// 解析二维码
const codeReader = new BrowserQRCodeReader()
codeReader.decodeFromImage(undefined, dataUrl)
.then(result => set(result.text))
.catch((err) => {
console.log(err.message) //eslint-disable-line
set('No QR code found or there are multiple QR codes!')
})
}
useEffect(() => {
chrome.tabs.captureVisibleTab(undefined, { format: 'jpeg' }, read)
}, [])
return (
// ...
)
}
上面的代码用 React Hooks
写的,不熟悉也没关系。二维码解析用的 ZXing
的一个 JS 版本:zxing-js/library。这个库还有不少问题,比如有些二维码识解析不了等等。但可以满足我个人的基本使用场景了(主要是不想掏手机哈哈)。
项目的完整代码在这里:chrome-qrcode-reader,我还搭了一个 Chrome 插件的脚手架:chrome-extension-starter-kit 用来快速开发 Chrome 插件。感兴趣的同学可以看看,开发一个简单的插件可能就会提高自己不少效率。
最后,希望本篇文章能对大家有所帮助。