Hire the author: Rohit B
In this article, we would walkthrough some of the basic concepts of how to make a chrome extension by making our own Tinder Auto Swiper.
Prerequisites
You need to have a laptop with chrome browser and the basic knowledge of Javascript.
Let’s Begin
We will start by creating a root folder and inside that root folder create another folder to store images (I am calling that folder name images, but you can call it assets or whatever you want.)
Our manifest.json file will specify the necessary metadata about our extension such as the name, version, and can also specify aspects of your extension’s functionality, such as background scripts, content scripts, and browser actions.
Inside our root folder, create manifest.json which looks like this
{
“manifest_version”: 2,
“name”: “Tinder Auto Swipe”,
“version”: “1.0.0”,
“description”: “Sit Back and start swiping”,
“icons”: {
“128”: “images/icon128.png”
},
Note: In the above code, snippet notice the icons key, our icons key can have multiple icon sizes like 128, 64, 32.
Also, the above icon which would be shown on the chrome://extensions page and not on the toolbar (where people usually see all the extensions icons).
Note: This is chrome extension page where the icon would be shown
Browser Action
From firefox docs, a browser action is a button that your extension adds to the browser’s toolbar. The button has an icon, and may optionally have a popup whose content is specified using HTML, CSS, and JavaScript.
If you supply a popup, then the popup is opened when the user clicks the button, and your JavaScript running in the popup can handle the user’s interaction with it.
In case you are interested in reading about browser action from chrome documents, click here
To add browser action, let’s first create HTML, CSS, and Js file. Instead of pasting entire HTML and CSS, I would share the links of the repo so you guys could copy-paste or review it from there.
Also, I am a massive fan of bootstrap so you would see a lot of bootstrap classes in my HTML
and
Also, create a script folder and make two files inside it (refer to github to see the structure)
1. event.js
2. content.js
Inside the parent directory,
Note 1: You can safely skip going through the app.js file since I am going to talk about it later.
Note 2: Our Scripts folder contains bootstrap file and jquery (which is required to use bootstrap), besides that it includes event.js and content.js file which you can create but leave it empty
Now, Let’s tell our chrome plugin about our browser action.
In our manifest.json file add the following
“page_action”: {
“default_Icon”: “images/icon128.png”,
“default_popup”: “index.html”,
},
Above, we are linking our index.html file and adding an icon for our popup.
Note: The icons that you’re mentioning inside page_action are shown in the toolbar while the icons that are specifying outside is shown on the chrome://extensionspage
Adding the extension into the browser.
No, we aren’t done making our chrome extension, but this might be the correct time to see our icon in the toolbar.
Yes, we are yet to add functionality.
To add your chrome extensions (these work on mac)
- Open Chrome
- Click on three dots on upper right-hand side
- More tools
- Extension
- Enable developers mode
- load unpacked plugin
- locate the parent folder containing all the files.
If everything went fine, you would be able to see your plugin added in the extensions and its icon in the toolbar
Note: The popup won’t appear just yet.
Content Script
Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, make changes to them, and pass information to their parent extension.
Chrome has fantastic documentation about content scripts here
To run our content script, we need to add something like this in our manifest.json file:
“content_scripts” : [
{
“matches”: [“https://Tinder.com/*"],
“js”: [“Scripts/content.js”]
}
],
Matches here tell where our content Script should run (on which pages)
”js”: [“Scripts/content.js”]
describes the location of our content.js file (we will review that later as well once we have a grasp of some more requisites)
Background Scripts.
Persistent Script
A persistent background page exists during the lifetime of the extension, and only one instance of it actively running in the background of the Chrome browser waiting for the user to interact with the extension.
The background page can be used to:
1. maintain state and acts as a controller for the rest of the extensions UI pages.
2. Background Page run at all time
3. consumes resources even when not required
Example: When creating a Context Menu (a context menu is one of those options which you see when you right click on a page)
Event Page or background Page
An event page is another form of a background script that is initially run, but then once it goes idle it is unloaded and is only loaded again when it is needed.
Essentially, this tells Chrome not to keep the background page loaded in memory at all the time
For example, if you want to write a function that simple console. Logs any details about your extension, such as any information saved to local storage, this function would be written in your background script.
They run only when required
Example: When we want the popup icon to highlight in specific elements of the page
Note: For our current extension, we are going to use the Event page
To run the app in the background, we need to specify it in manifest.json and then create our event.js file in scripts folder (if you haven’ already done it)
“background” : {
“scripts”: [“Scripts/event.js”],
“persistent”: false
},
Note: When persistent is false, the background page automatically unloads after 5 seconds of no activity, that is when no listeners were invoked for 5 seconds. Note, the background page is a separate hidden page which is not related to the web pages in any way.
You can also have multiple background pages if you want [From chrome docs] but for our app, we are going to have just one background page (event.js)
{
"name": "Awesome Test Extension",
...
"background": {
"scripts": [
"backgroundContextMenus.js",
"backgroundOmniBox.js",
"backgroundOauth.js"
],
"persistent": false
},
...
}
Permissions
The heading itself looks straightforward, we would need permission for where we want our extension to work i.e “https://www.tinder.com/*” and we would manage users tab
“permissions”: [ “tabs”, “https://www.tinder.com/*" ]
And that’s it, with that we are finally done setting up what all we need for the manifest.json file
Now, let’s fill our scripts with some code
Adding code in our Script tags.
Now, that we have gone over the pre-requisite, we can finally talk about how our chrome script would work.
Understanding the flow of our App
If you see the content.js file, just the first line and not the content below it, you will find the following syntax
chrome.runtime.sendMessage({swipe: "swipeit"});
This runs automatically on the matching sites and sends a message to the background script which enables the extension icon popup
The popup script runs when the icon is clicked and it sends a message to the active tab’s content script which performs the DOM operations
In-Depth walkthrough
Our content script which can access the DOM sends a message to event.js file
chrome.runtime.sendMessage({swipe: "swipeit"});
The event.js file have a listener which listens to the message
chrome.runtime.onMessage.addListener(function(request, sender, senderResponse){
if the message type here is ‘swipeit’ , it would retrieve the active tab’s info object and show the popup.html
Note: Remeber in our content_scripts in a manifest.json file, we have mentioned
“matches”: [“https://tinder.com/*"],
Once our popup is activated, we can see our extension icon to go from fade to active.
Now our popup extension has an index.html file with app.js file linked to it.
The App.js file has the following code
document.getElementById(‘right-btn’).addEventListener(“click”, function(){
var swipesV = document.getElementById(‘nswipes’).value
chrome.tabs.query({active: true, currentWindow:true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {todo: “swipeRight”, rightSwipe: swipesV})
});
});
document.getElementById(‘left-btn’).addEventListener(“click”, function(){
var swipesV = document.getElementById(‘nswipes’).value
chrome.tabs.query({active: true, currentWindow:true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {todo: “swipeLeft”, leftSwipe: swipesV})
});
});
Note: if you think the formatting sucks here, you can always check it my code on github which hopefully is better formatted
So here, we have event listeners who listen to our right and left swipe buttons when clicked for the event.
document.getElementById(‘right-btn’).addEventListener(“click”, function(){
Once the button is clicked, they get the value entered by the user
const swipesV = document.getElementById(‘nswipes’).value
Now,
chrome.tabs.query({active: true, currentWindow:true}, function(tabs) {
Here chrome.tabs.query would Get all tabs that have the specified properties, or all tabs if no properties are specified and
active: true, currentWindow:true
would retrieve the active tab’s info object.
chrome.tabs.sendMessage(tabs[0].id, {todo: “swipeRight”, rightSwipe: swipesV})
This would send a message to our content.js file and our content.js file would be listening to our message
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
Here we can get the value of swipes user entered by doing request.rightSwipe in our content script
And since content.js file would have access to our DOM, We can specify what Action we need to trigger in our DOM
Triggering Actions in our DOM using the console
To start with, we need to login (and if you haven’t already then signup) to tinder (sound’s weird and awkward right?)
Then click on the right mouse button, and click on inspect element (in mac it would be command + options + c)
Now hover your mouse towards the like button and you would see the button with the class names
click on console, and write/paste
document.getElementsByClassName(‘recsGamepad__button’)
Here, notice the class name recsGamepad__button, it’s one of the class names from those button class
Now, if you extend the above service by just typing the 0th element
document.getElementsByClassName(‘recsGamepad__button’)[0]
You can see that the rewind button would be highlighted, we need to select the 4th button which would be the 3rd element in our array
document.getElementsByClassName(‘recsGamepad__button’)[3]
and then if you perform the click action, you would see that you would have performed your first swipe using the console.
Now, we want our extension to do the same thing for a number of swipes we want a user of our extension to perform.
Implementing our Script which would trigger the DOM by itself
In our content script on message listener we just need to run a setInterval function which will run till the limit supplied by the user and swipe every profile right
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
const elem = document.getElementsByClassName("recsGamepad__button")[3]
const limit = request.rightSwipe
if (request.todo == "swipeRight") {
let i = 0
let timer = setInterval(function() {
if (limit > i) {
elem.click()
i++
} else {
clearInterval(timer)
}
}, 3000)
}
})
And that’s it. We have made our own Tinder Swiper.
Lastly Again, The entire code can be found here on GitHub
