TamperMonkey – English

TamperMonkey is an extension for Browser, it is a User Script Manager, which means TamperMonkey allows you to manage, create and launch user scripts.

That is, with TamperMonkey, you can include and use personal scripts, or scripts available on the internet, to modify a website, add or remove elements from a page, or perform tasks automatically.

Its use is multiple.

It can be used to improve website viewing, to change the style of a site (even if it’s not its primary use), to access content that is normally hidden, or to automate various repetitive tasks.

Use:

TamperMonkey being a Browser extension, it must be installed before it can be used: https://www.tampermonkey.net/.
It is available on multiple browsers.
A large amount of Script are available on the GreasyFork site: https://greasyfork.org


Example : 

  • Script to download Soundcloud sounds.

https://greasyfork.org/fr/scripts/394837-local-soundcloud-downloader

  • Script to download Youtubes Videos.

https://greasyfork.org/fr/scripts/369400-local-youtube-downloader

  • Script to view Pinterest images without logging in or registering.

https://greasyfork.org/fr/scripts/6325-pinterest-without-registration

  • Script allowing to translate text via Google Translate, by selecting the words and pressing a key.

https://openuserjs.org/scripts/trespassersW/translate.google_tooltip

Create / Use a Script:

To be able to Edit or Use an already existing script, go to the Script options by clicking on the extension icon, then in the TamperMonkey options, as shown in this image:

L’attribut alt de cette image est vide, son nom de fichier est w72FGrVNjZJ3tUfVolqrp5DZG6oUV2sqM3QwGLVwnHV1Da3-Xjbcsz5WLCqhv6TbDNNMUqaexpIRrJ4Qs2ohqSHLTPevq4ctZRNN6XloVGI7kClDdrY-UrAjOtCC9mV6Rr2Iom_a=s0.

In the options, click on the small square “+” to create a new page like here:

L’attribut alt de cette image est vide, son nom de fichier est FlIalvKRLAZpvAMQxz1cFrDAc7r0W6DrdsJefBn7OmY-W5-e9hu9z5sl7XdPmPapqnZEdqJSlWAh1Zw3CSOKb-ajGH6txfoqSMy1F50mFCCLDPAaxjdhXHWjhjOa6W290pX64FD8=s0.

This will open the page for you to create a new Script.
Scripts are to be done in JavaScript language.


The Script is divided into 2 parts:

The setting part at the top, which is all that is commented out between the “== UserScript ==” and “== / UserScript ==”, then the part of the code with what the script should do as well as her interactions,

Top part and Script setting:

@name : The name of the Script, which will be displayed in your Scripts list,

@version : Script version, which can allow you to keep a version history in case you want to share your script online, this can allow you to use automatic updating of shared and public scripts,

@description : The description of your Script, useful if you want to share it publicly,

@author : The author of the script,

@match : The website where the script is running,

@icon : The script icon, if you want to share it publicly,

@grant : Used to allow various very specific things,

More information in the documentation:
https://www.tampermonkey.net/documentation.php

Part of the Script Code itself:

Here is an example, commented and described, of a script to automate, via buttons, the sending of comments on a WordPress site:

// ==UserScript==
// @name         AutoMessage
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Example Of Script.
// @author       NDA
// @match        https://tspro.fr/*
// @icon         https://www.google.com/s2/favicons?domain=tspro.fr
// @grant        GM_addStyle
// ==/UserScript==



/*--- Menu with Button ---*/
var Menu = document.createElement('div');
Menu.innerHTML = '<button id="ExampleFunction1" type="button">Perfect</button>'
               + '<button id="ExampleFunction2" type="button">Good</button>'
               + '<button id="ExampleFunction3" type="button">Okay</button>'
               + '<button id="ExampleFunction4" type="button">NoSpeak</button>'
               + '<button id="ExampleFunction5" type="button">Other</button>'
               + '<button id="ExampleFunction6" type="button">Send</button>';
Menu.setAttribute('id','myContainer');
document.body.appendChild(Menu);



/*--- Button Activation ---*/
document.getElementById("ExampleFunction1").addEventListener(
    "click", ExampleFunction1, false
);
document.getElementById("ExampleFunction2").addEventListener(
    "click", ExampleFunction2, false
);
document.getElementById("ExampleFunction3").addEventListener(
    "click", ExampleFunction3, false
);
document.getElementById("ExampleFunction4").addEventListener(
    "click", ExampleFunction4, false
);
document.getElementById("ExampleFunction5").addEventListener(
    "click", ExampleFunction5, false
);
document.getElementById("ExampleFunction6").addEventListener(
    "click", ExampleFunction6, false
);



/*--- Function Example ---*/
function ExampleFunction1(){
    document.getElementById('comment').value='This is a great article! Congratulations to you !';
}
function ExampleFunction2(){
    document.getElementById('comment').value='This is a cool article! Good work !';
}
function ExampleFunction3(){
    document.getElementById('comment').value='This is an article that seems complicated to me but I respect the work done!';
}
function ExampleFunction4(){
    document.getElementById('comment').value='Sorry I don\'t understand, could you explain in another language, like French?';
}
function ExampleFunction5(){
    document.getElementById('author').value='Name';
    document.getElementById('email').value='laprovidence.amiens@ac-amiens.fr';
    document.getElementById('url').value='https://tspro.fr/Tuto/';
}
function ExampleFunction6(){
    document.getElementById('submit').click();
}



/*---   Style   ---*/
GM_addStyle(`
    #myContainer{
        display:    block;
        position:   fixed;
        z-index:    1;
        top:        0px;
        left:       5%;
        width:      65%;
        min-height: max-content;
    }
    #ExampleFunction1{
        cursor:     pointer;
        font-size:  20px;
    }
    #ExampleFunction2{
        cursor:     pointer;
        font-size:  20px;
    }
    #ExampleFunction3{
        cursor:     pointer;
        font-size:  20px;
    }
    #ExampleFunction4{
        cursor:     pointer;
        font-size:  20px;
    }
    #ExampleFunction5{
        cursor:     pointer;
        font-size:  20px;
    }
    #ExampleFunction6{
        cursor:     pointer;
        font-size:  20px;
    }
    #myContainer p{
        color:      red;
        background: white;
    }
`);


Breakdown and explanation of the code:

// ==UserScript==
// @name         AutoMessage
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Example Of Script.
// @author       NDA
// @match        https://tspro.fr/*
// @icon         https://www.google.com/s2/favicons?domain=tspro.fr
// @grant        GM_addStyle
// ==/UserScript==

This part is that of adjusting the script itself, it explained earlier in this article.

/*--- Menu with Button ---*/
var Menu = document.createElement('div');
Menu.innerHTML = '<button id="ExampleFunction1" type="button">Perfect</button>'
               + '<button id="ExampleFunction2" type="button">Good</button>'
               + '<button id="ExampleFunction3" type="button">Okay</button>'
               + '<button id="ExampleFunction4" type="button">NoSpeak</button>'
               + '<button id="ExampleFunction5" type="button">Other</button>'
               + '<button id="ExampleFunction6" type="button">Send</button>';
Menu.setAttribute('id','myContainer');
document.body.appendChild(Menu);

This part is the one that creates the HTML code for the buttons, those that will be used to be able to interact and execute the code.

/*--- Button Activation ---*/
document.getElementById("ExampleFunction1").addEventListener(
    "click", ExampleFunction1, false
);
document.getElementById("ExampleFunction2").addEventListener(
    "click", ExampleFunction2, false
);
document.getElementById("ExampleFunction3").addEventListener(
    "click", ExampleFunction3, false
);
document.getElementById("ExampleFunction4").addEventListener(
    "click", ExampleFunction4, false
);
document.getElementById("ExampleFunction5").addEventListener(
    "click", ExampleFunction5, false
);
document.getElementById("ExampleFunction6").addEventListener(
    "click", ExampleFunction6, false
);

This part is the one that allows you to define that the buttons will launch the functions when you click on them.

/*--- Function Example ---*/
function ExampleFunction1(){
    document.getElementById('comment').value='This is a great article! Congratulations to you !';
}
function ExampleFunction2(){
    document.getElementById('comment').value='This is a cool article! Good work !';
}
function ExampleFunction3(){
    document.getElementById('comment').value='This is an article that seems complicated to me but I respect the work done!';
}
function ExampleFunction4(){
    document.getElementById('comment').value='Sorry I don\'t understand, could you explain in another language, like French?';
}
function ExampleFunction5(){
    document.getElementById('author').value='Name';
    document.getElementById('email').value='laprovidence.amiens@ac-amiens.fr';
    document.getElementById('url').value='https://tspro.fr/Tuto/';
}
function ExampleFunction6(){
    document.getElementById('submit').click();
}

This part allows to define the code itself, what we do there.
Here we decide to attribute a value to the elements having the id that we specify, which allows to write inside the textearea.

/*---   Style   ---*/
GM_addStyle(`
    #myContainer{
        display:    block;
        position:   fixed;
        z-index:    1;
        top:        0px;
        left:       5%;
        width:      65%;
        min-height: max-content;
    }
    #ExampleFunction1{
        cursor:     pointer;
        font-size:  20px;
    }
    #ExampleFunction2{
        cursor:     pointer;
        font-size:  20px;
    }
    #ExampleFunction3{
        cursor:     pointer;
        font-size:  20px;
    }
    #ExampleFunction4{
        cursor:     pointer;
        font-size:  20px;
    }
    #ExampleFunction5{
        cursor:     pointer;
        font-size:  20px;
    }
    #ExampleFunction6{
        cursor:     pointer;
        font-size:  20px;
    }
    #myContainer p{
        color:      red;
        background: white;
    }
`);

When to this last part it defines the CSS style of the buttons, and makes sure that our buttons are well displayed at the top left of the page, fixed and visible.

Results:

Once launched, this allows us to post a defined comment, on the Blog site, without having to write.

TamperMonkey – English Comment

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *