Search code examples
javascriptgoogle-chrome-extensionqr-code

QR Reader On-Screen insight

I want to develop a QR Reader extension that reads QR codes from the screen (Not the camera), like taken a screenshot of the QR an get the URL, I'm searching an reading the source code of authenticator.cc which have this feature but I can't figure it out, I just want some insight, don't want to get the problem solved, just a way to start, I'm building the extension with JS only.

Any suggestion is welcome, thank you!

Currently I read the authenticator source code, but can't figure out a way to start

Solution

  • The Authenticator extension smoothly reads and parses a QR code on a web page using the following steps:

    1. The content script injected into web page sends the QR code's position information to the extension's background page: Link

    2. The background page captures the QR area on the web page and converts the screenshot to a DataUrl and ImageData using canvas: Link

    3. The DataUrl is passed to the qrReader library for parsing: Link

    4. If the qrReader library fails to parse the data, the extension falls back to using jsQrCode: Link

    qrReader: Link

    jsQrCode: Link