Interact With Webpage Using Chrome and jQuery - Mass Follow on Twitter!
Submitted by Yorkiebar on Sunday, May 18, 2014 - 21:07.
Introduction:
This tutorial is on how to use basic jQuery knowledge and Google Chrome to manipulate a webpage.
Notes:
The webpage we will be using for this is Twitter of which we will be following a page full of users with a simple, one line jQuery command.
First:
You need to find a list of users of which have the 'Follow' button displayed next to them. I would recommend going to a Twitter user, then going to their 'Following'/'Followers' list, scroll down a bit for a few more pages to load.
Second:
Right click on the follow button and click 'Inspect Element'. As you can see, you should get something like this...
We want to select one of the classes of the HTML button element, so we will use the class;
'.js-follow-btn'
We also want to narrow down the results by scrolling up the console inspect element Chrome window and finding the containing div's class for the list of users, we get this...
So we will use the following class as well;
'.GridTimelines-items'
jQuery:
Now for the programming jQuery part.
First we use the document/page by using the dollar sign ($) symbol, then inbetween brackets we set the string(s) of the elements we want to interact with (these will be the classes we discovered earlier). Finally we want to close of the string(s) and brackets, then use dot-notation to invoke the click function. So in the end it should look something like this...
Console:
To use the above code simply click on the 'Console' tab in the Chrome 'Inspect Element' developer window and type it in followed by pressing the 'Enter' key. Chrome will then find all of the element on the current webpage which has the class '.js-follow.btn' an element of class '.GridTimelines-items' and invoke the click function (emulate a left mouse click on it), therefore following all the users on that page, at once!
- <button class="user-actions-follow-button js-follow-btn follow-button btn small small-follow-btn" type="button">
- <div class="GridTimeline-items" role="list" data-cursor="1468283911446037111">
- $('.GridTimelines-items .js-follow-btn').click();
Add new comment
- 16 views