How to scan QR Code using Chrome´s extension?

Ui.Vision General Discussion
1

Hi all,

I’m trying to automate the scan of a QR code using the Chrome´s Authenticator extension https://authenticator.cc/.

I’ve been able to give click in Authenticator extension and inside it using XClick and XClickRelative commands, but I don´t know how to select the QR area as shown in its guide https://authenticator.cc/docs/en/quickstart

If someone could help me, could test with this site that generates QR codes. https://www.qrcode-monkey.com/

What I need is how to do the selection shown in this video. Thanks in advance.

qr-scan

2

To automate any browser extension you need to use desktop automation mode.

Then, use XClick and XMove command to simulate the drag & drop.

Since you mention the XClick commands, I think you are already on the right path…

The below video does exactly this with the Copyfish extension. You can apply the same procedure to the authenticator:

3

Thank you Ulrich for your answer. I have the doubt how to identify the beginning and end of the area to select.

I need to select(take screenshot) a small area located where I need the XMove | Down begin and another XMove | Up with a image showing where I need to stop? Is the way it works?

If it is like this, is independent if the page is zoomed in or zoomed out?

Or could be done with x,y initial positions and x,y final positions?

Thanks in advance

4

Hi, I created a short demo macro and movie on how to automate the Authenticator browser extension.

To answer your questions:

  • Yes, XMove | ... | #down and XMove |... | #up are the solution :slight_smile:
  • Changing browser zoom often breaks image recognition. If that is a problem (= your application requires you to change browser zoom level), use text recognition (OCR) instead of images. The command for this is XMoveText. Text recognition works at any reasonable zoom level.
  • You can also use hardcoded x/y values

In my demo macro I use an image to identify the bottom right corner and simply 10,10 for the upper right corner, where I release the mouse.

Video:

Code:

{
  "Name": "get QR code",
  "CreationDate": "2024-3-19",
  "Commands": [
    {
      "Command": "XDesktopAutomation",
      "Target": "true",
      "Value": "",
      "Description": ""
    },
    {
      "Command": "XClick",
      "Target": "qr_dpi_168.png",
      "Value": "",
      "Description": "Click extension icon"
    },
    {
      "Command": "XClick",
      "Target": "veyil8_dpi_168.png",
      "Value": "",
      "Description": "icon inside extension"
    },
    {
      "Command": "XDesktopAutomation",
      "Target": "false",
      "Value": "",
      "Description": ""
    },
    {
      "Command": "XMove",
      "Target": "bottom_right_dpi_168.png",
      "Value": "#down",
      "Description": "bottom right (here: corner of green box). Start here because of grey overlay."
    },
    {
      "Command": "XMove",
      "Target": "10,10",
      "Value": "",
      "Description": "move mouse to top right corner"
    },
    {
      "Command": "XMove",
      "Target": "10,10",
      "Value": "#up",
      "Description": "mouse button UP"
    }
  ]
}
1 Like
5

Thank you ulrich for take the time to help. I marked a solved, but not sure why for me doesn´t work. I select the same bottom corner and is detected as gray or all green. Then I took a screenshot of the same bottom corner as you did, using windows snipping tool, and at the begging I try to do a scroll down since doesn´t appear the bottom part. I run and doesn´t scan the correct area but are shown some numbers and letters in yellow over the page like coordinates.

Additionally, how do you identify that the correct target to move is 10,10 twice?

6

I highly recommend to use the built-in screenshotting tool. Just select XMove command and then press the “Select” button.

I am not @admin , but I think 10,10 was used to simply get a value “Somewhere in the top left corner”. The Authenticator extension can find the QR anywhere on the page, so no need to be precise in the area selection.

7

Hi Ulrich.

I’ve actually tried several times to select the bottom right corner as you did, but when I saw the captured image, only was shown all gray or all green even I selected the white and green part at the corner. I’ll continue trying. Thanks again