greasemonkey options panel with jquery

Hi, this tutorial is also based on the mouse hunt script "facebook mousehunt improvements" created by me, and in this one i will explain how to create an options panel (only check boxes at this time) and save it.

Here is my final result with this script :

If you want to try this, remember to load jquery correctly as described in this post at number #4.

First of all, the data is saved in a cookie as JSON, i have an object where i save all my data and i save that object as JSON on a cookie. Because javascript does not know to convert an object to a json string i used a class which does that, the class is not created by me, I just use it as it is, here is the fie : json
I copied the content of the file inside my script so i don't have to load it remotely, anyway it's just a line , so you should also copy this at the beginning of your greasemonkey script.

As i said the data is saved as cookie, here is the functions which will create, and read a cookie :

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

Also in my program i read the cookie when the script starts so the data object "myData" in my case will be populated and available in the entire script :

var myData = new Object();
try {
	if(readCookie("gm_pl_data")!=null)
	{
		myData = JSON.parse(readCookie("gm_pl_data"));
	}
	else
	{
		//if there is no cookie we initialize it
		initCookie();
	}
}catch (err)
{
	initCookie();
}

In my case gm_pl_data is the name of the cookie in which i save the data. Here is the initCookie() function, this will just initialize the objects inside the myData object :

function initCookie ()
{
	myData = new Object();
	myData.allLogs = new Object();
	myData.allChese = new Object();
 
	savePersistentData();
}
 
//will be valid 1000000 days
function savePersistentData ()
{
	createCookie("gm_pl_data",JSON.stringify(myData),1000000);
}

I let in there all my init objects so io can see how to initialize them if you have more. You can also notice the savePersistentData function which will update the cookie and save the persistent data .

Until here we only had generic information about how data is saved and the functions which save the data. Now I'll go in more details for the actual options panel. The panel is actually a div in which you can enter any thing you want, but the values of the check boxes will be saved  and their status restored when the page reloads.

So here is how my panel looks like :

jQuery("#gm_pl_options_container").append("Show the timer
<input id="gm_pl_check_show_timer" type="checkbox" />
");
	jQuery("#gm_pl_options_container").append("Automaticaly sound the horn
<input id="gm_pl_check_sound_horn" type="checkbox" />
");
	jQuery("#gm_pl_options_container").append("<strong>Kings rewared options</strong>
");
	jQuery("#gm_pl_options_container").append("Play youtube on kings reward
<input id="gm_pl_play_sound_on_reward" type="checkbox" />
");
	jQuery("#gm_pl_options_container").append("Play midi on kings reward
<input id="gm_pl_play_sound_midi_on_reward" type="checkbox" />
");
	jQuery("#gm_pl_options_container").append("Show alert on kings rewared
<input id="gm_pl_show_alert_on_reward" type="checkbox" />
");
 
	setOptions();
 
jQuery("#gm_pl_options_container input").click(function () {saveOptions()});

in this case the id of the div inside which i enter the options is "gm_pl_options_container", and i you can see that setOptions() is called, this will set the default options for the check boxes based on the myData object, here's the code :

function setOptions ()
{
	if(typeof myData["options"] == "object")
	{
		for(i in myData["options"])
		{
			jQuery("#"+i).attr("checked",myData["options"][i]);
		}
	}
}

In my case the options are saved in myData["options"] the myData object is the main script object and all the scripts data is saved there, not just the options.

And after the setOptions function is called we also have an intresting line, this will add an onclick function to each input on that div, and in this function we call saveOptions(), this function will get all the inputs in that div, and save the values in myData['options'] object, and also write the cookie to make sure that the values are not lost on page refresh :

function saveOptions ()
{
	if(!(typeof myData["options"] == "object"))
	{
		myData["options"] = new Object();
	}
	jQuery.each(jQuery("#gm_pl_options_container input"),function () {
		if(this.checked == true)
		{
			myData["options"][this.id] = true;
		}
		else
		{
			myData["options"][this.id] = false;
		}
	});
	savePersistentData();
}

Every thing you have to do now is use those options, there are 2 ways to do this, you can check the status of the check box or you can get the value from the myData['options'] object, they are the same, i use the object :

if(myData["options"]['gm_pl_show_alert_on_reward'] == true)
		{
			alert("You have a king's reward!");
		}

And this is it, if you have any questions let me know, and remember, if you use mouse hunt don't forget to use my script : Facebook mousehunt improvements

Related posts:

1. GreaseMonkey, Jquery and the greatest mouse hunt script.
2. Autoupdate on greasemonkey script, example from “mousehunt improvements” script.
3. jQuery popups wizard, web 2.0 ideea and usability