Toolbar button to change background colour of web pages

I want to create a toolbar for FireFox consisting of one button to change the background colour of the currently viewed webpage. I am building the toolbar in XUL, this XUL file houses the buttons, and then references a JavaScript file which holds the functions.

At present I have a button “Background Colour”, when I click on it, there is a drop down menu of 4choices, when you click on any of these I have set up a popup message to say “Code for Changing Background Colour goes here”.

This is the XUL code

[CODE]
<button type=”menu” label=”Background Colour”>
<menupopup>
<menuitem label=”White” oncommand=”BGColour(event)”/>
<menuitem label=”Black” oncommand=”BGColour(event)”/>
<menuitem label=”Cream” oncommand=”BGColour(event)”/>
<menuitem label=”Blue” oncommand=”BGColour(event)”/>
</menupopup>
</button>
[/CODE]

This is the javascript:

[CODE]
function BGColour(event)
{
alert(“Code for changing background colour goes here”);
}
[/CODE]

How would I change the background colour of the webpage at hand? Would it be a case of placing a .css file over the top of the viewed webpage? If so how would you do this? If not, any ideas?

Thanks!!

Also in #JavaScript _↴