Teach you how to quickly develop the Firefox plug-in for Sina Weibo (1)

Firefox plug-in mechanism

For a Firefox plug-in, we first need to understand its organizational structure. Open a Firefox plug-in project, you usually see the following elements: chrome folder, defaults folder, chrome. manifest, install. rdf.

Let's start with install. rdf, and you will understand what this file is about compared to the file name. Yes, this file is the installation file of the Firefox plug-in.

 
 

  
  
<!--?xml version="1.0"?-->  
  
  
<RDF xmlns:em="http://www.mozilla.org/2004/em-rdf#">  
  
  
       
  
  
    <DESCRIPTION about="urn:mozilla:install-manifest">  
  
  
        <EM:ID>flashcard@gmail.com</EM:ID>  
  
  
        <EM:VERSION>0.7</EM:VERSION>  
  
  
        <EM:TYPE>2</EM:TYPE>  
  
  
        <EM:NAME>flashcard</EM:NAME>  
  
  
        <EM:DESCRIPTION>Post the selected word to Sina weibo.</EM:DESCRIPTION>  
  
  
        <EM:HOMEPAGEURL>https://feihe.cnblogs.com</EM:HOMEPAGEURL>  
  
  
                <EM:ICONURL>chrome://flashcard/skin/icon.png</EM:ICONURL>  
  
  
          
  
  
        <EM:CREATOR>Fei He</EM:CREATOR>  
  
  
 
  
  
        <EM:TARGETAPPLICATION>  
  
  
            <DESCRIPTION>  
  
  
                <EM:ID>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</EM:ID>  
  
  
                <EM:MINVERSION>3.0</EM:MINVERSION>  
  
  
                <EM:MAXVERSION>4.0.*</EM:MAXVERSION>  
  
  
            </DESCRIPTION>  
  
  
        </EM:TARGETAPPLICATION>  
  
  
    </DESCRIPTION>  
  
  
</RDF> 
 
 

There are some descriptions of your Firefox plug-in, two of which are critical. The id of your Firefox plug-in is under the root node description, that is to say, this item must be unique (at least unique among all your Firefox plug-ins), and the other one is the Firefox id, which cannot be modified. And they are used to describe the compatibility of your Firefox plug-in to the Firefox version.

Next, let's take a look at ults. In a word, defaults is the default setting of the preferences of your Firefox plug-in.

The core of a Firefox plug-in is chrome. manifest and chrome folders. Chrome. manifest is a bit like a. NET project file. It basically refers to the location information of all elements of the entire Firefox plug-in. Firefox itself uses this manifest to locate specific elements. What elements does a Firefox plug-in contain? Open chrome. manifest and you will see it at a glance.

Overlay chrome: // browser/content/browser. xul chrome: // flashcard/content/overlay. xul

Content flashcard chrome/content/flashcard/

Skin flashcard classic chrome/skin/classic/flashcard/

Locale flashcard en-US chrome/locale/flashcard/en-US/

Style chrome: // global/content/customiz1_lbar. xul chrome: // flashcard/skin/skin.css

The structure here is basically a line structure. The header of each line is the specific Firefox plug-in element name, and the following is to tell Firefox to find this element at that position. This includes the following elements:

◆ Overlay: indicates a UI element of your Firefox plug-in, including contextmenu, toolbar, and navigator bar. In the above manifest, you can see that I pointed to a file with the suffix xul. In fact, its full name is Xml User Interface. As the name implies, the UI is described in xml format.

 
 

  
  
<!--?xml version="1.0"?-->  
  
  
<!--?xml-stylesheet href="chrome://flashcard/skin/skin.css" type="text/css"?-->  
  
  
 
  
  
<OVERLAY id=flashcardOverlay>  
  
  
 
  
  
    <SCRIPT type=application/x-javascript><!--mce:0--></SCRIPT>  
  
  
    <SCRIPT type=application/x-javascript><!--mce:1--></SCRIPT>  
  
  
    <SCRIPT type=application/x-javascript><!--mce:2--></SCRIPT>      
  
  
    <SCRIPT type=application/x-javascript><!--mce:3--></SCRIPT>  
  
  
 
  
  
    <SCRIPT type=application/x-javascript><!--mce:4--></SCRIPT>  
  
  
    <SCRIPT type=application/x-javascript><!--mce:5--></SCRIPT>  
  
  
    <SCRIPT type=application/x-javascript><!--mce:6--></SCRIPT>  
  
  
      
  
  
    <MENUPOPUP id=contentAreaContextMenu>  
  
  
        <MENUSEPARATOR id=separator_flashcard>  
  
  
        <MENUITEM id=menuitem_flashcard_add class=menuitem-iconic image="chrome://flashcard/skin/word.png">  
  
  
    </MENUITEM></MENUSEPARATOR></MENUPOPUP>  
  
  
</OVERLAY>  
 
 

The above is an overlay. xul I used. Here I add a new menuitem to Firefox's contextmenu and separate it with the original menuitems using separator. Here, the file name can be retrieved at will, which is your name must be applied in chrome. manifest. A lot of people are curious here, so where are the corresponding actions of the menuitem you added? Careful, you may find that I reference some javascript in xul, and for our menuitem, Firefox provides the method in 2 to associate behavior: the first is to directly specify the action of control in the oncommand of control; the second is to use document in javascript. getElementByID:

 
 

  
  
<DIALOG id=dialog_login title=FlashCard persist="screenX screenY width height" 
  
  
windowtype="DialogWindowType" 
  
  
buttons="accept,cancel" 
  
  
onload="window.sizeToContent();"
  
  
 ondialogaccept="return login();">  
  
  
  </DIALOG>  
 
 

 
 

  
  
document.getElementById("menuitem_flashcard_add").addEventListener("click", function(event){}, false);  
 
 

In addition, I also specified the css file in this file. In fact, the use of javascript and css in xul files is basically the same as that in html.

◆ Content: the core of your Firefox plug-in, including javascript scripts and XUL

◆ Skin: even if it is skin, you can make different skins for your plug-in. My mainifest specifies the skin that I use classic, so I should correspond to the classic folder in the skin folder.

◆ Locale: International. For our Firefox plug-in that requires a national UI control, we can use its label attribute, at the same time in chrome. define the dtd file under the specified culture folder in manifest, for example, overlay. control definition in xul:

 
 

  
  
        <MENUITEM id=menuitem_flashcard_add class=menuitem-iconic   
  
  
image="chrome://flashcard/skin/word.png" label="&flashcard.menuitem.label;"> 
  
  
</MENUITEM> 
 
 

Dtd file definition:

 
 

  
  
<!--ENTITY flashcard.menuitem.label "Post to flashcard"-->  
 
 

They are associated using the label attribute of control, while overlay. xul and chrome. manifest specifies the dtd file association under the culture folder, you can see in my overlay. xul has the following definition:

◆ Style: some overlay styles, such as css.

Your Firefox plug-in has a UI and corresponding behaviors and styles. What else do you need? You need to store, that is, you need to store preferences or other information. For example, here I want to store the Oauth_token information obtained after the user authorization on Sina Weibo. Firefox provides many storage methods. You can store files in special locations, or use a small file database like sqlite. Another simplest way is to store preferences. For the Firefox plug-in, you can specify your preference file in your install. rdf file so that you can set and save the preference file. Here I want to use preferences for storage, so I don't want users to see it, so I don't need to specify it in install. rdf.

The preference file is also an xul file, so you can also use javascript and css to bind the behavior of the control in your preference and render the style. The preference here is as follows:

 
 

  
  
<!--?xml version="1.0"?-->  
  
  
<!--?xml-stylesheet href="chrome://global/skin/" type="text/css"?-->  
  
  
 
  
  
<PREFWINDOW>  
  
  
    <PREFPANE label="Flash Card Preferences">  
  
  
    <PREFERENCES>  
  
  
        <PREFERENCE id=pref_access_token name="Sina.WeiBo.oauth.access_token" type="string">  
  
  
        <PREFERENCE id=pref_access_token_secret name="Sina.WeiBo.oauth.access_token_secret" type="string">  
  
  
    </PREFERENCE></PREFERENCE></PREFERENCES>  
  
  
</PREFPANE></PREFWINDOW>  
 
 

The content in the preferences node is used for preference storage.

 
 

  
  
Components.classes["@mozilla.org/preferences-service;1"].getService  
  
  
(Components.interfaces.nsIPrefService).getBranch("Sina.WeiBo.")  
 
 

To get all the names prefixed with Sian. the preference of Weibo, and then call its getCharPref ('oauth. access_token ') to obtain the value, or use setCharPref ('oauth. access_token ') specifies the value. For preference, the mdn api is described in detail. If you reference javascript in preference to compare tricky, if you use prePanel in preference, the reference code of javascript must be behind prePanel. Otherwise, your prePanel will be invisible.

Finally, sometimes you may want your Firefox plug-in to send a notification to the user after some behaviors are completed. In Firefox3, you can use the normal notification or alert, in Firefox4, you can use popupNotification, which is very effective. You can also specify images and corresponding actions so that you can perform further actions after obtaining the notification. Example:

 
 

  
  
Popupconfigurications. show (gBrowser. selectedbroications, "flashcard-add ",
  
  
'"' + SelectedWord + '" has been successfully added to your ',
  
  
Null,
  
  
{
  
  
Label: "OK ",
  
  
AccessKey: "D ",
  
  
Callback: function (){
  
  
}
  
  
},
  
  
[
  
  
{
  
  
Label: "Reset ",
  
  
AccessKey: "R ",
  
  
Callback: function (){
  
  
Browser. Preferences. clearUserPref ("oauth. access_token ");
  
  
Browser. Preferences. clearUserPref ("oauth. access_token_secret ");
  
  
}
  
  
},
  
  
]);
 
 

The specified image must be in css.

 
 

  
  
.popup-notification-icon[popupid="flashcard-add"] {  
  
  
    list-style-image: url("chrome://flashcard/skin/icon.png");  
  
  
}  
 
 

Here is how to quickly develop a Firefox plug-in. If you want more detailed knowledge, you still need to refer to MDN. It is found that the length is a bit long here, and it is decided to divide it into the first and second articles. Next, we will discuss the Oauth authorization mechanism of Sina WeiBo.