如何开发一个识别二维码的Chrome插件？

话说我又写了一个小工具，一个可以读取网页上二维码信息的 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 插件。感兴趣的同学可以看看，开发一个简单的插件可能就会提高自己不少效率。

最后，希望本篇文章能对大家有所帮助。