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: http://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: 'http://talkweb.eu/labs/jetpack/button.html', // this script will works only on this website
contentScriptWhen: 'ready',
contentScript: buttonScript
});

No Comments

Leave a Reply

Your email address will not be published.

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