Adding Custom Links To Google Search Webpage
When I was creating a script for to be able to change Google's background colour or to set it as a image, I started adding custom links and thought this would be a good thing to create tutorial for.
First off, you will need to know JavaScript, HTML and possibly CSS. If you aren't familiar with them, there are many great resources on YouTube you can learn from.
You will also need to know about UserScripts. If you have never used UserScripts before, then I recommend that you watch my tutorial on writing your first user script.
First off, you will need to know JavaScript, HTML and possibly CSS. If you aren't familiar with them, there are many great resources on YouTube you can learn from.
You will also need to know about UserScripts. If you have never used UserScripts before, then I recommend that you watch my tutorial on writing your first user script.
Boring
↓
That's better!
I will be using TamperMonkey, so if you have that then follow along.
First, lets open TamperMonkey and click 'Add a new script...'.
First, lets open TamperMonkey and click 'Add a new script...'.
Next, you will need to write these UserScript tags:
Most of these are self explanatory but ones I will mention are the include and icon64.
By including *.google.* we are making the UserScript only run on pages that are anything (dot) google and google (dot) anything. So in simple terms we can type www. or http://www. and it will still work and it will still run on .com/.co.uk/.anything and even if there is a forward slash it will still run
icon64 will give the script a 64px by 64px icon. I use a URL courtesy of iconarchive.com to get that icon.
Now we will create a function that will remove the original links from Google:
By including *.google.* we are making the UserScript only run on pages that are anything (dot) google and google (dot) anything. So in simple terms we can type www. or http://www. and it will still work and it will still run on .com/.co.uk/.anything and even if there is a forward slash it will still run
icon64 will give the script a 64px by 64px icon. I use a URL courtesy of iconarchive.com to get that icon.
Now we will create a function that will remove the original links from Google:
We can call it 'RemoveOld' and specify a parameter 'par' which will mean parent node. Then we create a variable and set it to document.getElementById and use the parameter we gave the function. This will pass the string we call the function with into this variable.
Now we use a for loop to cycle through each child node of our parent (cNode). Normally we would create the variable 'i' and set it to 0 and use cNode.childNodes.length but for some odd reason it won't work it this case. So I set it to 1 and run the loop while 'i' is less than 4 which removes all three of the original links and increment 'i' by 1 by using the ++ operator.
Then we remove each of the childs by removing the each child in the array of the same index of the current value of 'i'.
After you have done that, we will create a function that insert our own links
Now we use a for loop to cycle through each child node of our parent (cNode). Normally we would create the variable 'i' and set it to 0 and use cNode.childNodes.length but for some odd reason it won't work it this case. So I set it to 1 and run the loop while 'i' is less than 4 which removes all three of the original links and increment 'i' by 1 by using the ++ operator.
Then we remove each of the childs by removing the each child in the array of the same index of the current value of 'i'.
After you have done that, we will create a function that insert our own links
We will need to create 5 parameters for this function, id for our link, className for our link to get it's style from, parentNode for which we append the child from, textNode which will be the link text and link which will be the site our link will go to when we click it.
Create two local variables, one for the parent node and one for the button or anchor link in this case.
Then set our 'parent node' variable (_sfbp) to the element which has the id of the parameter 'parentNode' that we will call the function with.
Before we do anything we need to check if that element even exists. You can do this by checking if it is not equal to 'undefined'. If it isn't, then that means it exists. So if it does, let's set our button variable to a new element of 'a' (anchor) which is a link in html.
Now let's give it and class attribute and set it to the className parameter the function will be called with. Do this also with the ID.
As we want to see text on the link we set the innerHTML to the 'textNode' parameter and set the href to the 'link' parameter.
Then use the parent and append our link as a child.
Run the function we created to remove the original Google links to get rid of the links before we add our own.
Create two local variables, one for the parent node and one for the button or anchor link in this case.
Then set our 'parent node' variable (_sfbp) to the element which has the id of the parameter 'parentNode' that we will call the function with.
Before we do anything we need to check if that element even exists. You can do this by checking if it is not equal to 'undefined'. If it isn't, then that means it exists. So if it does, let's set our button variable to a new element of 'a' (anchor) which is a link in html.
Now let's give it and class attribute and set it to the className parameter the function will be called with. Do this also with the ID.
As we want to see text on the link we set the innerHTML to the 'textNode' parameter and set the href to the 'link' parameter.
Then use the parent and append our link as a child.
Run the function we created to remove the original Google links to get rid of the links before we add our own.
For each link we want to add we run the 'createCustomLink' function with the necessary parameters.
You can see, I add 6 links by calling the function 6 times with different values for the parameters.
In the first call I use the '_he' as the class I want my link to get it's style from because If I use '_gd', there is a big gap on the left. After that though, I can use the '_gd' class for the rest of the calls.
A reminder of the parameters
In the first call I use the '_he' as the class I want my link to get it's style from because If I use '_gd', there is a big gap on the left. After that though, I can use the '_gd' class for the rest of the calls.
A reminder of the parameters
So in the end, when you load Google you should have something like this
Download tutorial script.
Author: Riccardo Geraci