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

Categories Jetpack, Kindle, Mozilla, Open Technologies, Technologies

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: 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: '', // this script will works only on this website
contentScriptWhen: 'ready',
contentScript: buttonScript