Writing our first script for Greasemonkey

Greasemonkey is an extension for Mozilla Firefox, and some other browsers based on the Gecko engine, which allows the user to add JavaScript to any page. The JS file itself must be formatted accordingly.

What is the user, for example, me , or you need to add JS to the pages of any sites? This is a wonderful opportunity to control the appearance of the page and its functionality. Naturally there are limitations that the JS language itself imposes. However, he has very, very many opportunities.

As a rule, most of the scripts for Greasemonkey closely “friends” with CSS. So it turns out that this post somewhat overlaps with the topic of User-CSS - however, I did not put up with this aspect in the title of the topic.
')
Let's write a couple of very simple scripts for Greasemonkey, well, take as a sacrifice for our experiments, of course, habrahabr.

First I would like to clarify one detail - below I consider writing the simplest scripts for Greasemonkey, and not the basics of working with this extension. It is understood that you already use / use Greasemonkey and have no problems with mutual understanding.

First, we will analyze how the script should be designed so that Greasemonkey would understand and accept it as a native one.

For example, we have a script that on every page, except habrahabr.ru and my blog absolvo.ru, will output an alert “Hello World!”

Its code is extremely simple (you can install the script from this page ):

// ---------- ----------------------------------------------
//
// ==UserScript==
// @name Hello World
// @namespace absolvo.ru
// @version 0.01
// @source absolvo.ru
// @description "hello word" , !
// @include *
// @exclude http://*.habrahabr.ru/*
// @exclude habrahabr.ru*
// @exclude absolvo.ru*
// ==/UserScript==

alert ('Hello world!');

Consider in detail:

If you put two slashes "//" in front of the line, then the line will be considered commented out and will be ignored by the handler.

== UserScript == and == / UserScript == - tags that tell the handler that there is service information between them that is required for processing.

name - the name of your script for Greasemonkey;

@namespase - roughly speaking - is an additional way to identify the script. Agree, there are simply a huge number of scripts named “Hello World”, and perhaps one of them is already installed on you, and Greasemonkey, thanks to the namespace , will not swear at duplication, and silently install it. By the way, here you can write anything, your nickname, website address, or just abracadabra.

description - the script description. It is recommended to write in Latin, but if you write it for yourself, you can experiment with Cyrillic. Personally, everything is fine with me and it works with the Cyrillic (this option is just laid out above), just do not forget that you need to save the file with the script in UTF-8.

include - addresses of the pages on which the script will be executed. Supports masks, but without regulars - only asterisks. Lines of "inclusions" can be as many as you like.

@exclude - URLs of pages on which the script will NOT be executed. Supports masks, but without regulars - only asterisks. There can be as many "exceptions" as you like. I have three in my example.

Lines include or @exclude may be absent. For example, if you write
// @include *
and you are sure that you do not need exceptions, you can safely not write the @exclude line.

version - the version of your script.

source is the home page of the script.

Well, then the JS itself is the most common. But in general, that's all.

Let's make for the sake of example a completely uncomplicated, impractical, but still an example that will surely prove once again that you can use all the advantages of JS in scripts for Greasemonkey (you can install the script from this page ):

// ==UserScript==
// @name Hello habrahabr!
// @namespace absolvo.ru
// @version 0.01
// @source absolvo.ru
// @description example script to insert div with h1 on every page habrahabr.ru
// @include habrahabr.ru*
// @include http://*.habrahabr.ru/*
// @exclude absolvo.ru*
// ==/UserScript==

var logo = document.createElement ("div");
logo.innerHTML = '
<div style = “margin: 0pt auto; width: 800px; text-align: center; ">
<h1 style = "margin: 15px;"> '+
'Hello World habrahabr! '+
'</ h1>
</ div>
';

document.body.insertBefore (logo, document.body.firstChild);

I will not explain what the script does - I think you can install, inspect and disassemble it yourself.

Tools for debugging scripts:
Web Developer Extension ;
Aardvark ;
Venkman Javascript Debugger ;
Web Development Bookmarklets ;
JSUnit ;
js-lint ;

You should not reinvent the wheel, there are a huge number of scripts, at least at http://userscripts.org/ - it is quite likely that it has already been written for you.

Related Links:
greasespot.net - project page;
userscripts.org is the largest collection of scripts;
The examples page is a page for installing scripts that acted as examples;
absolvo.ru & RSS is my blog and my RSS.