Writing Your First Userscript
You may find that sometimes you wish there was a tool that you could use on your web browser that would fix a problem or make your life a bit easier.
Writing Userscripts is a great way to do so, which requires no fees or anything.
If you want to start writing Userscripts you must learn JavaScript, there is no way around it. HTML is also very helpful to know as you need to reference HTML elements 99% of the time.
Great places to learn JavaScript and HTML is at TheNewBoston. He has many brilliant playlists to learn many languages. I 100% recommend you go there before continuing if you don't know JavaScript or HTML.
So if you know JavaScript and HTML then let's continue.
Writing Your First Script
Install List:
Tampermonkey or Greasemonkey | Chrome | Firefox | Opera
Notepad ++ (Optional)
Notepad++ is good, as it has an "intellisense" type feature (Off by default) which will give you suggestions of the available methods you can use. You can also search on Google for JavaScript functions, like "Change body colour JAVASCRIPT".
If you are creating your scripts with Notepad++, you must save the script as <namehere>.user.js. Put what ever you want want as the name, along with the must '.user'. The '.user' indicates that it is a Userscript and not a normal js file. Without it the browser will not accept or will not read it as intended.
For this tutorial, I will show you with Tampermonkey as I user Chrome.
Tampermonkey is like a developers console and script manager for Userscripts which makes it much faster to test your scripts while coding them. All you have to do is press the floppy-disk save icon at the top to reload your script, rather than having to save and drag your script into the chrome extensions window.
If you click on the Tampermonkey Icon after installing, you will get a popup like so:
Writing Userscripts is a great way to do so, which requires no fees or anything.
If you want to start writing Userscripts you must learn JavaScript, there is no way around it. HTML is also very helpful to know as you need to reference HTML elements 99% of the time.
Great places to learn JavaScript and HTML is at TheNewBoston. He has many brilliant playlists to learn many languages. I 100% recommend you go there before continuing if you don't know JavaScript or HTML.
So if you know JavaScript and HTML then let's continue.
Writing Your First Script
Install List:
Tampermonkey or Greasemonkey | Chrome | Firefox | Opera
Notepad ++ (Optional)
Notepad++ is good, as it has an "intellisense" type feature (Off by default) which will give you suggestions of the available methods you can use. You can also search on Google for JavaScript functions, like "Change body colour JAVASCRIPT".
If you are creating your scripts with Notepad++, you must save the script as <namehere>.user.js. Put what ever you want want as the name, along with the must '.user'. The '.user' indicates that it is a Userscript and not a normal js file. Without it the browser will not accept or will not read it as intended.
For this tutorial, I will show you with Tampermonkey as I user Chrome.
Tampermonkey is like a developers console and script manager for Userscripts which makes it much faster to test your scripts while coding them. All you have to do is press the floppy-disk save icon at the top to reload your script, rather than having to save and drag your script into the chrome extensions window.
If you click on the Tampermonkey Icon after installing, you will get a popup like so:
If you click on new 'Add a new script', you will be taken to this page:
Basic Userscripts consist of a "commented-out" header which looks like this:
@name - is the name of your script that will be shown in Tampermonkey/Chrome extensions list.
@namespace - is just a little note to who created it, such as the website associated with the developer.
@version - is the version of script; which is displayed in extensions list.
@description - is a brief conclusion of what your script does.
@match - is very important (Similar to @include) and specifies the pages you want your script to work on. If you wanted it to only work on Google you would do @match *.google.* The asterisks are called wildcards and indicate variables. It basicly means, work on anything before '.google' and anything that may come after, as long as 'google' is in there.
You are not limited to one @match, you can put as many as you like.
@copyright is your company name and the date.
@Author is the name of the developer who wrote it, i.e, "Dennis Ritchie".
There are many more comments you can put down (Full List Here)
Let's Make A Script
So once you have customised your header to your liking lets make a script that can re-underline the links on the Google search results.
There are many ways to do this, but one way will be doing it, will be by using a for loop.
So if you have not, you must include/match every Google variation url. The reason I don't put a wildcard after the search result url is because it can be a very long url.
@namespace - is just a little note to who created it, such as the website associated with the developer.
@version - is the version of script; which is displayed in extensions list.
@description - is a brief conclusion of what your script does.
@match - is very important (Similar to @include) and specifies the pages you want your script to work on. If you wanted it to only work on Google you would do @match *.google.* The asterisks are called wildcards and indicate variables. It basicly means, work on anything before '.google' and anything that may come after, as long as 'google' is in there.
You are not limited to one @match, you can put as many as you like.
@copyright is your company name and the date.
@Author is the name of the developer who wrote it, i.e, "Dennis Ritchie".
There are many more comments you can put down (Full List Here)
Let's Make A Script
So once you have customised your header to your liking lets make a script that can re-underline the links on the Google search results.
There are many ways to do this, but one way will be doing it, will be by using a for loop.
So if you have not, you must include/match every Google variation url. The reason I don't put a wildcard after the search result url is because it can be a very long url.
Your Userscript should work on most Google; if not all, Google search result pages.
Now that you have done this, you can now start the fun part.
We are going to have to find the class/id that the links are bound to. We can do this with the 'inspect element' or 'view source' option on the right click menu (context menu). Just hover over the top of any non-underlined search result and right click, then go inspect element or view source.
Now that you have done this, you can now start the fun part.
We are going to have to find the class/id that the links are bound to. We can do this with the 'inspect element' or 'view source' option on the right click menu (context menu). Just hover over the top of any non-underlined search result and right click, then go inspect element or view source.
You can see on the inspect element dialogue that the parent node of the link we 'inspected' has a class. In this case, It is simply "r". If you hover on this you can see the actual link highlights.
We can use this class to modify it's style. After Google updated the search results links, they simply changed the 'text-decoration' css attribute to 'none' instead of 'underline'. We can easily combat this by doing exactly the opposite.
Now lets create an array from elements with the class of "r".
Now lets create an array from elements with the class of "r".
As I said, we can use a for loop to cycle through each and every element in our array. We can do this by writing the following:
What we are doing here is creating variable "i", for example, we can use anything, like 'apple' or 'cake', but for easy quick typing, we use a single letter.
We set it's initial value of 0, then we 'do' the loop while "i" is less than element.length. Elements is an array of items because a class in HTML is a like a place where multiple elements reference to inherit there styles, unlike an ID which is independent.
So we increment 'i' with the ++ operator so we go through each one. Now we must specify what we want to do. Inside the braces { } we put elements[i] which is saying elements variable and the current loop count (inside the square brackets), then .setAttribute so we can apply a HTML attribute which will override the CSS attribute which Google supplied. We specify "style", which allows us to use CSS code to set the attribute. We then write text-decoration: underline; and this will add color: rgb(218, 128, 68);">text-decoration: underline;" to every element with the class of "r", thus 'changing' the style of each of them too.
We set it's initial value of 0, then we 'do' the loop while "i" is less than element.length. Elements is an array of items because a class in HTML is a like a place where multiple elements reference to inherit there styles, unlike an ID which is independent.
So we increment 'i' with the ++ operator so we go through each one. Now we must specify what we want to do. Inside the braces { } we put elements[i] which is saying elements variable and the current loop count (inside the square brackets), then .setAttribute so we can apply a HTML attribute which will override the CSS attribute which Google supplied. We specify "style", which allows us to use CSS code to set the attribute. We then write text-decoration: underline; and this will add color: rgb(218, 128, 68);">text-decoration: underline;" to every element with the class of "r", thus 'changing' the style of each of them too.
Author: Riccardo Geraci