By the way, I’ve written another gadget, a Chrome plugin that reads qr codes on web pages. Why do you want to do such a plug-in, because usually when browsing the web, often encounter the need to scan the TWO-DIMENSIONAL code, and I do not want to take out a mobile phone sweep. Pulling out my phone often interrupts my study/work routine. There are also times like scanning the KEYNOTE QR code, which is not easy to read on the phone, and I still have to send the link to my computer.


En.m.wikipedia.org (Qr code automatic recognition)

download

If you want to try it out, you can download QR Code Reader from the Chrome Web App Store. Click on the icon of the plugin to identify the QR Code on the current page.

How do you do that?

Actually very simple, Chrome has a API: Chrome. Tabs. CaptureVisibleTab, you can TAB to face to face visual area of the screen (don’t forget in the manifest. Set the appropriate permission) in json. We can then use some QR code decode library to analyze the captured images. The process is as follows:

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 ( // ... ) }Copy the code

The above code was written using React Hooks. Two-dimensional code analysis with a JS version of ZXing: ZXing – JS /library. There are many problems in this library, such as some two-dimensional codes can not be resolved and so on. But it’s enough for my own basic usage scenarios (mostly without reaching for my phone).

The complete code for the project is here: Chrome-qrcode-Reader, and I also built a chrome extension scaffolding: Chrome-extension-starter-kit to quickly develop Chrome add-ons. Interested students can see that developing a simple plug-in may improve their efficiency.

Finally, I hope this article can be helpful to you.