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

May 19, 2011
By Bogomil Shopov
Post Image

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

Bogomil Shopov

I care about privacy, ethical design, and freedom in many aspects. I spend 20+ years working as a web developer and architect, analyst, manager, and product owner/manager in different environments, several countries, and multiple software industries like Healthcare and Hospitality. I wore many hats, and I use the knowledge gathered to optimize the flow of value across complex systems.

Leave a reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.