How to create Firefox extensions of Jetpack

The Jetpack Firefox allows us to easily create a Firefox plug-in, only by the available front-end skills (HTML / CSS / JS), estimated to make people a little more exciting - Jetpack also integrates jQuery framework.

Adobe Air Ye Hao, Web OS Ye Hao, Jetpack Ye Hao, at least so we are sure that the value of the front end will be increasing the opportunities are presented.

Let's take a look step by step how to create your first extension Firefox's Jetpack:

The first step: Install the plug-Jetpack

Jetpack plug Address: https: / / jetpack.mozillalabs.com / install.html

Jetpack plug-in installed, you can by in the address bar about: jetpack Jetpack to access the local interface.






Step two: Create planabc.js file.

planabc.js more code:

jetpack.statusBar.append ((

html:'',

width: 16,

onReady: function (widget) (

$ (Widget). Click (function () (

jetpack.tabs.focused.contentWindow.location = "http://www.planabc.net/";

));

)

));

jetpack.statusBar.append the implementation of the JavaScript object (the JavaScript object has four attributes: html, url, width and onReady).

html attributes: the initial definition of HTML, will be displayed in the status bar. This sample will show a simple IMG element.

url attribute: the definition of the status bar will display the external HTML content URL. This sample, not the use of the property.

width attribute: the content of the status bar on the definition of the width (unit: pixels). This sample, defined as 16 pixels, that is, the width of the IMG element itself.

onReady property: the definition of the function is called (once the status bar is created, this function will be called). As Jetpack integrated jQuery framework, so you can directly use the attributes and methods of jQuery. In this sample defines a function, when clicking the Jetpack to expand, we will modify the jetpack.tabs.focused.contentWindow.location property http://www.planabc.net/. jetpack.tabs.focused.contentWindow.location object is equivalent to window object, you can visit the web page to access via JavaScript.

The third step: Test planabc.js code.

By in the address bar about: jetpack Jetpack access to the local interface, click the Develop tab, and then copy the code planabc.js file to the input box on the page. Click "try out this code" button, you will see a new icon appears in the lower right corner of Firefox window.

Develop the code is easy to deploy before the test in Firefox, your code.






Step four: Jetpack extended deployment.

Create a simple page, the page's HEAD element to add the following within the LINK element:



HTML document source as follows:

















"How to create Firefox extensions of Jetpack"





Finally, the HTML file and planabc.js files are uploaded to the server.

Step Five: Install Jetpack expansion.

In Firefox, browse to the HTML page, Jetpack plug the top of the screen will display an installation section, click on "install" button. Will be prompted to install untrusted features, click on "I know what I'm doing. Install It!" Button.

Test the installation is complete and the third step, as will see a new icon appears in the lower right corner of Firefox window. If you find the status bar at this time there are two identical new icon, that means the original test code is still also about: jetpack page Develop tab, clear the input box, the code can be removed.

Return to about: jetpack page, click the Installed Features tab will appear in the list of new extensions installed Jetpack.

Test Demo: http://www.planabc.net/lab/jetpack/planabc/

Original:

http://www.planabc.net/2009/10/13/build_firefox_extensions_with_jetpack/







Recommended links:



DivX to 3GP



Comment Shell Tools



Write-once HD-DVD discs will be in volume production to wait for final approval



Cost Analysis Example 2



3G Birth Enormous Opportunities



Cottage in China



AVI to MOV



Trade more "smoothly" to prevent the risk of more



Ghost 20 little-known practical parameters



Introduction to Fibre Channel based: FCIP and iSCSI comparison



Yum 2007 "Ten key words"



Recommend Games BOARD



Art - Screen Savers Storage



MOV to MPEG4