黃聰：二、如何通過URL獲取其他網頁源代碼內容（火狐插件擴展開發教程）

為什么火狐沒有一個獨立的擴展開發工具啊！！！（估計有，但是我找不到……哪位大神知道的麻煩告訴我，謝謝啦）

PS：以上問題已得到解決：http://www.cnblogs.com/huangcong/p/3155836.html

不斷的修改程序、壓縮、修改后綴名、安裝、重啟……

調試一次起碼要10秒鍾……好坑爹……算了，吐槽完畢，開始今天的筆記……

------------------------------   我萬惡的分割線  -------------------------------------

一、配置程序

這里我就不再解釋火狐擴展中每個文件的作用和功能了，想了解的請移步《黃聰：一、如何創建一個狀態欄擴展（火狐插件擴展開發教程）》

這次的擴展我實現的功能是通過新浪開放接口獲取當前IP對應的地址信息，並顯示在右下角的狀態欄上。剛開始的配置如下：

1. 在任意一個文件夾創建一個文件夾，命名hcip。
2. 在hcip文件夾下面創建一個文件夾，命名chrome。
3. 在hcip文件夾下面創建兩個文件，分別為install.rdf、chrome.manifest
4. 在chrome文件夾下面創建一個文件夾，命名為content。
5. 在content文件夾下面創建一個文件，命名為hcip.xul。
6. 在content文件夾下面創建一個文件，命名為hcip.js。
7. 還是那句話，每個文件要為utf-8格式，以免有中文出錯。

最后得到：

 

二、配置install.rdf文件

不多做解釋啦，內容如下：

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">

    <em:id>[e-mail]</em:id>
    <em:version>1.0</em:version>
    <em:type>2</em:type>
    
    <!-- Front End Metadata -->

    <em:name>獲取當前地址</em:name>
    <em:description>通過IP獲取當前地址，並顯示在狀態欄上</em:description>
    <em:creator>黃聰</em:creator>
    <em:homepageURL>http://hcsem.com</em:homepageURL>

    <!-- Describe the Firefox versions we support -->

    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.5</em:minVersion>
        <em:maxVersion>30.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>

  </Description>

</RDF> 

三、配置chrome.manifest文件

content hcip chrome/content/

# Firefox
overlay    chrome://browser/content/browser.xul chrome://hcip/content/hcip.xul

四、配置hcip.xul文件

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE overlay >
<overlay id="stockwatcher-overlay"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<!-- 引用我自己寫的js文件，用來實現遠程獲取IP信息的功能 -->
<script type="application/x-javascript"
  src="chrome://hcip/content/hcip.js"/>

<!-- Firefox -->
<statusbar id="status-bar">
    <statusbarpanel id="hcip"
        label="點我獲取地址"
        tooltiptext=""
        onclick="HCIP.getdz()"
    />
</statusbar>

</overlay>

五、配置hcip.js文件

var HCIP = {
    startup: function()
    {
        this.getdz();
    },
    
    getdz: function()
    {
        var samplePanel = document.getElementById('hcip');
        samplePanel.label = "加載中，稍等......";
        
        var httpRequest = null;
        var fullUrl = "http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js";

        function infoReceived()
        {
            var samplePanel = document.getElementById('hcip');
            eval( httpRequest.responseText );
            
            //獲取地址信息
            var dz = remote_ip_info.country + " > " + remote_ip_info.province + " > " + remote_ip_info.city;
            
            //顯示在狀態欄上面
            samplePanel.label = dz;
            samplePanel.tooltipText = dz;
        }
        
        httpRequest = new XMLHttpRequest();
        //從新浪那邊獲取IP信息
        httpRequest.open("GET", fullUrl, true);
        
        //獲取成功了，調用infoReceived方法
        httpRequest.onload = infoReceived;
        httpRequest.send(null);
    }
}

// 初始化
window.addEventListener("load", function(e) { HCIP.startup(); }, false);

六、打包程序、安裝運行

1. 返回到hcip文件夾，全選所有文件，然后壓縮成ZIP格式。
2. 修改hcip.zip的后綴名為xpi，最后得到hcip.xpi文件。
3. 把hcip.xpi文件拖拽到火狐瀏覽器中，出現提示安裝的界面，點擊安裝，然后重啟火狐。
4. 看火狐右下角的狀態欄，就有地址信息了。

案例下載點后面的文件》》firefox-hcip.zip