After writing the title, I found that there seemed to be some clickbait…

background

The thing is, I used to watch the imagination of some executives and open some new imagination. But as time goes by, I don’t know whether it is my own hand or robot operation, and a large number of strangers appeared in my concern list, which suddenly increased to 140+ people

Too many people have seriously disturbed my timeline, so I can only manually unfollow it. When unfollowing, it was found that Fanfor only supports a single person to unfollow, and there is no way to batch operate.

Is it only 140 in a row… You have to think about how you’re going to do it in batches.

Train of thought

Batch operation, generally completed by script, here we first observe a meal not unconcern:

  1. Each time you click unfollow, a POST request will be sent. Take a look at the main content in data:
  2. The user information and authentication are implemented in the cookie of the request.
  3. In data information, there are the following fields. From the analysis, we can see that the important information is the friend id:
    • Action: friend.remove is the name of the method used to handle contact with friends (fixed)
    • Friend: indicates the ID of a friend
    • Token: My token value (fixed)
    • Ajax: Ajax or not (fixed)
  4. So if we look at the HTML, it turns out that each person is a LI tag, and the href value of the child element a tag is the id of each person
  5. With all the key information in place, it’s time to write the script.

implementation

There are two ways to do this:

  1. One way is to use Node and shell script to traverse the friend relationship through Ajax, get the HTML and get all the ids, and then forge the remove request to remove each element in the idList.
  2. It is processed directly in the console, after retrieving DOM elements, filters them to the idList list, and then fetches remove requests for each ID.

Compared with the two methods, the first method needs to deal with user authentication, login information, and reference Ajax dependencies, etc. Considering the time cost, the second method is directly implemented:

  1. Manually enter a page number and iterate through each of the DOM<li>Tag, get all of themhrefThe values.
  2. First fetch a friend, and then copy the fetch operation of the request in the network. In this case, you can directly set the header and use the cookie attack
  3. Process the elements in idList, replacing each element according to fetch in Step 2bodyTo process the contents of.

The specific code is posted below:

/ / get idListlet nameList = [].map.call(document.getElementsByClassName('avatar'),(item)=>item.href.replace('http://fanfou.com/'.' 'Namelist. forEach(item=>{fetch()"${url}", {"credentials":"include"."headers":The ${} header information."body":`action=friend.remove&friend=${item}&token=xxx&ajax=yes`,"method":"POST"."mode":"cors"});
})
Copy the code

The tail

This method is simple, but still requires manual control of paging, you can try the first implementation to do a script test.