Jetpack for Firefox allows us to easily create Firefox plug-ins using only the front-end skills (HTML/CSS/JS) we have mastered. What is probably even more exciting - Jetpack also integrates the jQuery framework.
Whether it is Adobe Air, Web OS, or Jetpack, at least let us be sure that the value of the front-end will be increasingly demonstrated in the opportunities.
Let’s take a look at how to create your first Firefox Jetpack extension step by step:
Step 1: Install the Jetpack plug-in
Jetpack plug-in address: https://jetpack.mozillalabs.com/install.html
After installing the Jetpack plug-in, you can access the Jetpack local interface by typing about : jetpack in the address bar.
Step 2: Create the planabc.js file.
The detailed code of planabc.js is:
jetpack . statusBar . append ({
html : '<img src="http://www.planabc.net/favicon.ico"/>' ,
width : 16 ,
onReady : function ( widget ){
$ ( widget ) .click ( function (){
jetpack . tabs . focused . contentWindow . location = "http://www.planabc.net/" ;
});
}
}); jetpack . statusBar . append will execute a JavaScript object (the JavaScript object has four properties: html, url, width and onReady).
- html attribute: Defines the initial HTML that will be displayed in the status bar. In this example, a simple IMG element is displayed.
- url attribute: Defines the URL of external HTML content that will be displayed on the status bar. In this example, this property is not used.
- width attribute: Defines the width of the content on the status bar (unit: pixels). In this example, it is defined as 16 pixels, which is the width of the IMG element itself.
- onReady attribute: defines the function to be called (this function will be called once the status bar is created). Since Jetpack integrates the jQuery framework, you can directly use jQuery's properties and methods. In this example, a function is defined. When the Jetpack extension is clicked, we will modify the jetpack . tabs . focused . contentWindow . location property to http://www.planabc.net/ . jetpack . tabs . focused . contentWindow . location object is equivalent to the window object, which you can access through JavaScript to access web pages.
