Userscripts Guide for Beginners

You know what browser extensions are. Providing you the ability to enhance you web experience in any way. Each browser have different type of extensions and extension of one browser can't usually be installed on another browser unless the developer make a separate version for that browser too.

Think of USERSCRIPTS as a universal extension that works on every modern browser. It is just a piece of code that is injected into the browser to perform almost the same way as an extension does. Userscripts are usually less resource hungry than a full fledged extension. So I prefer userscript over extension, in case if I have found both doing the same thing.

Moreover you can make userscripts yourself and this isn't that hard as compared to making a browser extension. You just need the basic knowledge of java script and you are good to go. Here I will show you how you can install and use the userscripts.

Alright! Lets Begin.

With extension

>> Install the extension depending on the browser you are using. This will allow you to install, manage, edit and remove the userscripts easily.

• Chrome users:       Tampermonkey
• Firefox users:        Greasemonkey
• Opera users:         ViolentMonkey
• IE users:                Trixie
• Safari users:          Greasekit
• Maxthon users:     Violentmonkey

>> Options and interface maybe different but the procedure to install will remain same.

>> Goto any userscript site and find what you are looking for. You can start with userscripts-mirror.org or greasyfork.org to find quality scripts.

>> When you reach the script page on either of the site, you will see an Install button.

>> A dialog box will appear asking you to confirm the installation. Click on OK or whatever appears in your browser.

>> You can mange the userscripts with the extension button on the browser. Here is what Tampermonkey options look like.

Without extension

In some browser you can install the script directly without any extension. 

>> In Chrome, when you click on the install button something like this will appear at the bottom.

>> When you click on continue you will know that you are unable to add the scripts

>> Just click on show in folder option in the bottom

>> You will see your userscipt.js file.

>> Drag this file and drop it into the the chrome extension menu.    ( Menu --> Setting --> Extensions )

>> Click on Add to confirm.

>> You will see your userscript installed.

>> As mentioned earlier, you wont be able to edit the script if you choose this method. If you are planning to add more userscripts in the future or like to edit/create the scripts yourself then installing the extensions mentioned above is highly recommended.

Structure of userscripts

If you have the basic knowledge of programming then you can easily understand what the code does. Here is a sample of userscript.

// ==UserScript==
// @name            Styler
// @namespace   Sarmad Khan
// @version         0.1
// @include   http*://mail.google.com/*
// @exclude   http*://o2tvseries.com/*
// @require         http://jquery.min.js
// ==/UserScript==
______The code below will be executed______
$(document).ready(function(){
   alert("Hello World");
});

• Include:  On what page this script should run
• Exclude: On what page this script shouldn't run
• Require: External sources needed for this script to work properly

Create or add your own userscripts

You can also add the userscripts you have made. Click on the add new userscript button from the option window as shown above. You will see the basic structure already prepared for you. Make changes to it as required.

• If you want to run the script on every website then add

// @include    http://*
// @include    https://*

• If you want to run the script on a specific website (the whole site)

// @include    http*://www.yoursiteurl.com/*

• If you want to run the script on a specific page then add the complete address

// @include    http*://www.yoursiteurl.com/link/group/page.html

If you still have questions, then let me know

      This is why people come here

Userscripts tutorial

Manage userscripts

Install userscript without plugin

Userscript site

How to use userscripts

Find userscript

Userstyle tutorial

Manage userstyles

Install userstyle without plugin

Userstyle site 

How to use userstyles 

Find userstyles