Huang Cong: How to Use the Add-on SDK to develop a Firefox extension

Firefox opens the Development Permission for extension to programmers. I believe many developers will want to make some extensions for their convenience.

I have recently developed a Firefox extension for some projects to easily collect the data I need. So I have studied how to develop it for a few days and it is almost done now, by the way, let's take a look at a tutorial.

 

---------------------------- Helpless split line ------------------------------

I used to look for several online tutorials and didn't use sdks for development. Let's take a look at my previous articles:

Huang Cong: 1. How to Create a status bar extension (Firefox extension development tutorial)

Huang Cong: 2. How to obtain the source code of other web pages through URL (Firefox extension development tutorial)

These two simple extensions took me two days because there was no SDK, but fortunately I found this video:

Huang Cong: Use Add-on SDK to develop Firefox extension

The Development immediately became extremely pleasant. Next I will introduce how to develop an extension using an SDK. The function is to change the font color of the H1 tag of a page to red.

 

---------------------------- Shameless split line ------------------------------

1. You need a developer account to use the Add-on SDK. log on to https://addons.mozilla.org/zh-cn/firefox/users/registerand register an account number first.

 

2. After registration, we log on as a developer: https://builder.addons.mozilla.org/user/signin/

 

3. After logging on, click Create-> Add-on. For example:

 

4. After clicking, we can start writing our extensions !!!! Let's take a look at the SDK interface:

5. First, write the main program code and enter the following code in main. js:

// Page-modvar pageMod = require ("sdk/page-mod"); var self = require ("sdk/self "); // The following means that as long as a URL starting with a http://tieba.baidu.com/p/ is loaded, the jquery-1.10.1.min.js and test in the Data resource folder are loaded. js file pageMod. pageMod ({include: "http://tieba.baidu.com/p/*", contentScriptFile: [self. data. url ("jquery-1.10.1.min.js"), self. data. url ("test. js ")]});

 

6. Because we need jquery, We need to import it. Click "+" next to Data and enter the remote jquery link http://code.jquery.com/jquery-1.10.1.min.js. Then click Create Attachment, in this way, the SDK automatically downloads the remote jquery to the local device and establishes a connection. For example:

 

7. With jquery, the next step is our core code. We need to use our own js to control the H1 color. Click "+" next to Data and enter "test" in the second line. js, and then click Create Attachment to Create a test. when the js file is ready, our core code will be written here. The Code is as follows:

$ (Document ). ready (function () {$ ("h1 "). attr ("style", "color: # F00;"); // after loading the page, change the h1 color to Red });

 

8. Finally, click the disk symbol on the SDK toolbar to save.

 

9. The Eye symbol button in the upper left corner will automatically save and install the SDK. After the installation is complete, the check box will appear in the upper right corner:

 

10. Finally, let's see if our plug-in can be used normally. Let's open a post on Baidu post, then we will be pleasantly surprised to find that the title becomes red after the page is loaded! Now, the tutorial is over!

 

PS: Firefox has a sound documentation library, although I think it is not enough, but some simple development is enough, the link here https://addons.mozilla.org/en-US/developers/docs/sdk/latest/

PPS: recommend your own blog http://hcsem.com, although dry goods seem to be put in the blog Garden

PPPS: codeword, code, and code diagram are very tired !!! You guys think the article is good. Click the recommendation button !!!!!!