by Xavi Esteve
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.
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) {}
e will store any error ocurred while inserting.
Styles are introduced the same way. Just add CSS code inside the array.
No comments yet