Hello, I'm xiaowantang. Today, I'd like to share a front-end automation artifact: Automa

Introduction to Automa

It is a Chrome plug-in. Even if you can't write code, you can complete a series of automatic operations according to your own needs. With it, you can automate some repetitive tasks, take screenshots of the interface, grab website data with CSS Selector and Xpath, set Proxy and conditions, submit forms, call Webhook, and customize the time to execute tasks.

Automa installation

If you are a development enthusiast, you can open the Automa project address and clone the project source code. Project address:

https://github.com/kholid060/automa

The plug-in download address is: (if you can't open it, there is a way to get it at the end of the text)

https://chrome.google.com/webstore/detail/automa/infppggnoaenmfagbfknfkancpbljcca/

After installation, you can automate browser expansion through connection blocks. From automatically filling out forms, performing repetitive tasks, taking screenshots to capturing website data, what you want to do with this extension is up to you.

The goal of this paper

Through the Web-side automatic artifact, low code, automatically download the beautiful little sister cover of the map distribution network in batches for you to enjoy, so that you can import the data here and run through the process even if you have no programming foundation.

At the end of the article, I will inform you of the data acquisition method of the whole workflow for your reference.

Automatic search

Automatically open web site: stackoverflow

The first Trigger block can be triggered manually, by specifying a week, by specifying a date and time, and by using shortcut keys; The second NewTab block opens the Google website; For the third Forms block, locate the input box through the auxiliary tool and enter Stackoverflow; The fourth Click block, navigate to the search button and Click search

Realize the function of automatic search.

Custom data download

NewTab opens the following page to prepare for download.

https://img.keaitupian.cn/uploads/*.jpg

Note: because the website home page:

https://www.keaitupian.cn/

And img keaitupian. Cn is not the same domain name, so there will be cross domain problems, so open the picture domain name page and execute JS to download pictures.

The LoopID of LoopData is one (to be used to terminate the loop later). Use CustomData to insert Json data, such as:

[
  {
    "column": "https://img.keaitupian.cn/newupload/11/1637224362487977.jpg"
  },
  {
    "column": "https://img.keaitupian.cn/newupload/11/1636795162640425.jpg"
  }
]

The JavaScript code block executes the action of downloading pictures. The downloaded content comes from the previous loopData block. Here, it is referenced by prevBlockData, and then the download action is executed:[

](https://github.com/Kholid060/automa/wiki/Features#reference-data)

const url = automaRefData('prevBlockData', '')
//alert(url.column)
var x=new XMLHttpRequest();
//You need to open img in the previous block keaitupian. Cn website to solve cross domain problems
x.open("GET", url.column, true);
x.responseType = 'blob';
x.onload=function(e){
    var url = window.URL.createObjectURL(x.response)
    var a = document.createElement('a');
    a.href = url
    a.download = ''
    a.click()
}
x.send();

The LoopBreakpoint block is used to terminate the LoopData loop. You need to fill in the LoopID: one above

Batch download beauty cover

Workflow screenshot:

Trigger mode of Tigger is manual trigger; The loopID of LoopData is one, and the cyclic data is Numbers from 1 to 119. This data comes from the value in the button href on the last page:

The NewTab will cycle through each page, and the page input is:

https://www.keaitupian.cn/meinv/list_4_{{ loopData@one}}.html

loopData@one The item with loopID one will be obtained.

AttributeValue gets the value of img attribute src in each page

So CSSSelector is related_box a img

Select Multiple to set all class es to related_ src under the box sub tag is obtained.

Select Save Data, and the storage key name is fengmianurl, and the type is Array.

This ensures that subsequent loops can get data.

NewTab opens the img domain name page to prevent cross domain. The opening address here is:

https://img.keaitupian.cn/newupload/11/1637224362487977.jpg

The loopID of LoopData is two and the data source is DataColumns, which is the data saved in the AttributeValue block above. Each time the loop gets a key. We only saved a key: fengmianurl

Javascript code block:

function download(url) {
  var x=new XMLHttpRequest();
    //You need to open img in the previous flow keaitupian. Cn website to solve cross domain problems
    x.open("GET", url, true);
    x.responseType = 'blob';
    x.onload=function(e){
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = ''
        a.click()
    }
    x.send();
}

const datas = automaRefData('prevBlockData', '')
//The format obtained here is: https://img.keaitupian.cn/newupload/11/1637224362487977.jpg,https://img.keaitupian.cn/newupload/11/1636795162640425.jpg
for (var i=0; i<datas.fengmianurl.length; i++)
{
    var url = datas.fengmianurl[i]
    console.log(url)
    
    if (url.indexOf("https://img.keaitupian.cn") != 0) 
    {
      continue
    }
    
    download(url)
}

By:

automaRefData('prevBlockData', '')

Get the output of the previous block and assign it to data. Take the array fengmianurl from the data, traverse it, and download the image address.

LoopBreakpoint ends the loopData block with loopID two; The first CloseTab closes the img picture domain name page.

The second CloseTab loop closes each page.

The last LoopBreakpoint ends the loopData block with loopID one;

Effect achieved

Taste the downloaded Meitu

summary

Automa is still friendly to readers with zero code basis and easy to start. Using the functions provided by automa can basically meet some daily simple automation operation requirements in Web browsers. For complex front-end automation operation scenarios, JavaScript can also be added and dragged into the workflow process.

Of course, if you are a programming enthusiast, it is recommended to use the form of coding script to complete this kind of automatic operation task. However, it has to be said that some of the design ideas behind the Automa tool are worth reference in some actual working scenarios. How to play depends on you.

reference resources

https://github.com/Kholid060/automa/wiki

https://github.com/Kholid060/automa/wiki/Features#reference-data

https://github.com/Kholid060/automa/wiki/Blocks#loop-data