Greasemonkey User Scripts Quick guide

by
on October 26, 2008
(2 minute read)

This is just a quick guide for coding user scripts for Greasemonkey. You should know that a knowledge in JavaScript makes everything much easier. Then you just need to learn Greasemonkey functions to start coding.

Simple Cloud Hosting Built for Developers

As a cheat sheet and reference, let’s see a little bit of basic JavaScript first:

JavaScript Reference

Creating Arrays

var people = new Array(
new Array("John","green","Doctor"),
new Array("Mike","red","Engineer")
);

people[1][0] will return Mike.

Sending line breaks

Use \n. It’s like <br /> in HTML.

Search for a string

Searches for a string (you can also use Regular Expressions). If it is found it will return 0 or more (which is the starting character number in the string). If it is not found: -1.

q = "this is foo time";
q.search("foo");

Will return 8.

To search without matching case, use RegEx and add the “i” flag:

q.search(/foo/i);

Substracting specific text from a string

q = "this is foo time";
q.substr(8,3);

Will return foo.

Quick notes

Get the URL: document.URL;
Redirect:
document.location = “http://www.example.org”;

GreaseMonkey Reference

Let’s get into business now! :D

Coding is just like JavaScript. we can get information from the page as if the script code was inside it.

If we type var msg = document.getElementById(‘message’).innerHTML; we will get the content from the element with message ID into our variable. We can work with it, store it or whatever.

Permanent user script variables

A nice feature is that you can store special GreaseMonkey variables. Will be stored permanently until the script is uninstalled.

To create or change bank variable with a value of 1000 we do:

GM_setValue("bank", 1000);

To get bank variable:

GM_getValue("bank", -1);

In case bank is not defined, -1 will be returned.

Inserting HTML code

Once we finish our script thingies, we would like to insert the result into the page. First of all, we create an array with all the code:

var menuCode = new Array();

And fill it:

menuCode.push('<h4>My menu</h4>');
menuCode.push('<li>Home</li>');
menuCode.push('<li>Forum</li>');

Once we get the desired code (note that you are filling a normal array, so that you can add as much JavaScript code as you want), we need to start using Greasemonkey’s functions:

var menu = document.createElement('div');
menu.id = 'cheatsheet';
menu.innerHTML = menuCode.join('\n');

Above, we have created a Div element named “menu”, supplied an ID and grabbed the menuCode array and joined it. Now that we have the menu Div created, it would be nice to empty the old array now.

menuCode.length = 0;

At last, we just need to insert the menu Div inside the page:

document.body.insertBefore(menu, document.body.lastChild);

Using insertBefore function, we grab the Div and insert it at the bottom.

Inserting Script and CSS Style tags

Similar to HTML but changing the way of insertion. Both CSS style and JavaScript code go inside the <style> or <script> tags inside the <head> so it’s the same way.

We create a temporary array and insert everything there:

var scriptCode = new Array();
scriptCode.push('function spam() {');
scriptCode.push(' alert("This is my message box!");');
scriptCode.push('}');

We create the Greasemonkey element, insert the code in it and empty the old variable:

var script = document.createElement('script');
script.innerHTML = scriptCode.join('\n');
scriptCode.length = 0;

Here’s the tricky part, we will use try to insert it inside the <head>:

try { document.getElementsByTagName('head')[0].appendChild(script); }
catch(e) {}

Things I’m buying on Amazon this week

e will store any error ocurred while inserting.

Styles are introduced the same way. Just add CSS code inside the array.

Useful links

Looking for cool gift ideas? TrendLiker.com lists hundreds of nice items and lets you know when they go on sale on Amazon.

Did you enjoy this article?

Thank with a coffee ☕

Or help me out by clicking one of these buttons:

    
    

No comments yet

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook*/ (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')); /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
Airbnb 25€ discount