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
});

Is it (Mozilla) Jetpack still confusing?

Categories Jetpack, Mozilla, Technologies

If you want to create an unique technology maybe you should to create an unique name or create an unique strategy to connect the term with your technology and leave others alone :)

Currently there are a lot of JetPack terms related to technology:

0. JetPack me – Great, great WordPress plugin
1. Microsoft JetPack
2. A game
3. An AD system
4. Mozilla JetPack

Do you think It’s a bit still confusing for a developer who is looking for some help to find it?

Converting your IDE into a powerful JetPack machine

Categories Jetpack, Mozilla, Technologies

I just started a project at GitHub to add a command bundle for my Aptana IDE (it’s Eclipse based) for Mozilla JetPack.

Right now it’s just a skeleton and contains only ‘cfx – run’ command, but the main idea is to create bunch of snipplets and to add more command in near future for rapid JetPack development.

Here are some screenshots:

Here is how the menu looks like:

Let’s see it in action:

You can use the shortcut also (CTRL +R)

Join
If you want to download it or if you want to join this interesting project, please visit GitHub or drop me a line here.

Video
To see it with good quality, click Right button – and select ‘View Video’ or select “Full screen”

This video shows what happens after ‘CTRL + R’ combination (see above). The automation is real :)

10 reasons to fell in love with Mozilla JetPack

Categories Jetpack, Mozilla, Technologies

What is Jetpack?

Jetpack is a project to make it easy to build Firefox 4 add-ons using common web technologies like HTML, JavaScript, and CSS. The main goal is to enable anyone who can build a web site to participate in making the Web a better place to work, communicate, and play.

Sooo. let’s count to 9 from 0 of course. We’re hackers!

0 – Use your web knowledge

Hacker

You can use your JQuery/HTML/CSS skills to write a add-on for Firefox. Yes, you can write an Add-on with easy and pack it with easy via JetPack SDK.

1 – It’s easy to start

You don’t need to be a XUL mastodon to write some cool extensions.
P.S I like XUL Also.

2 – Easy to learn

Kose

It’s so easy. I bet I can teach my son to write an addon when he turns 6.

3 – Sharing is caring

Share

You can share your code with others via some kind of standard libraries. Write the code and let’s other re-use it within their applications.

Continue reading “10 reasons to fell in love with Mozilla JetPack”