Writing Your First Greasemonkey Script

    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 properly formatted.

    Why does a 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 a lot of opportunities.

    As a rule, most scripts for Greasemonkey are close friends with CSS. So it turns out that this post is somewhat overlapping with the theme of User-CSS - however, I did not take this aspect into the topic name.

    Let’s write a couple of very simple scripts for Greasemonkey, but for our experiments we’ll take, of course, habrahabr as a victim.

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

    First, let’s figure out how the script should be designed so that Greasemonkey understands it and accepts it as a native.

    For example, we have a script that on every page, except for habrahabr.ru and my blog absolvo.ru, will display the 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!');

    Let's consider in detail:

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

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

    name - the name of your script for Greasemonkey;

    @namespase - roughly speaking - this is an additional way to identify the script. You must admit that there are just a huge number of scripts with the name “Hello World”, and maybe one of them has already been installed, and Greasemonkey, thanks to namespace , does not swear at duplication, and silently installs it. By the way, here you can write anything, your nickname, website address, or just abracadabra.

    description- description of the script. It is recommended to write in Latin, but if you write it for yourself, then you can experiment with the Cyrillic alphabet. Personally, everything is fine with me and works with the Cyrillic alphabet (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 - the 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 - addresses of pages on which the script will NOT be executed. Supports masks, but without regulars - only asterisks. Lines of "exceptions" can be as many as you like. I have three in my example.

    The include or @exclude lines may not be present. For example, if you write
    // @include *
    and are sure that you don’t need exceptions, then the @exclude line can be safely omitted.

    version is the version of your script.

    source - the home page of the script.

    Well, then JS itself is the most ordinary. That's basically it.

    Let's make an example, for the sake of example, completely uncomplicated, impractical, but still an example that will surely prove to you once again that in the scripts for Greasemonkey you can use all the advantages of JS (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 = '

    '+
    ' Hello World habrahabr! '+
    '



    ';

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

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

    Script debugging tools:
    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 likely that it is already written for you.

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

    Also popular now: