JetPack: How to add a button to a webpage + events

This is a Jetpack example for beginners that shows:

0. How to add a simple DOM element – button to a webpage using Mozilla Addon SDK (Jetpack)
1. How to attach an event
2. And how to handle it.

If you want to try it – go here click on Test icon and when it loads, visit: https://talkweb.eu/labs/jetpack/button.html or use your own SDK

var buttonScript = [
'var butt = document.createElement("button");', //define button element
'var btext = document.createTextNode("Click me");', //define the text
'butt.appendChild(btext);', //attach text to the button
'butt.addEventListener("click", function(){document.bgColor="red"} , false)', //handle onclick event
'document.getElementById("test").appendChild(butt);' //put the button on the page
];
 

var pageButton = require("page-mod").PageMod({
include: 'https://talkweb.eu/labs/jetpack/button.html', // this script will works only on this website
contentScriptWhen: 'ready',
contentScript: buttonScript
});