chrome擴充套件開發：[8]查詢外網ip 之二

2019-12-19 01:47:03

介紹查詢外網ip擴充套件的具體程式碼實現

1

我們採用從popup視窗傳送ajax請求的方法獲取ip資料。為了能夠向ip38.com請求資料，需要修改manifest檔案，也獲得相應許可權。我們增加下面一行：

"permissions": ["<all_urls>"]

意思是說，可以存取任意url的資料。修改後的manifest檔案：

2

傳送ajax請求有很多方法，我們使用JQuery庫裡的ajax方法。

為了使用JQuery庫，我們需要從http://jquery.com/download/ 下載庫檔案，下面兩個都可以：

Download the compressed, production jQuery 2.1.0

Download the uncompressed, development jQuery 2.1.0

JQuery的文件和幫助請直接從http://jquery.com/查詢

3

將下載後的檔案放到test目錄下，你下載的檔名可能和我的不太一樣，沒有關係。

4

在popup.html增加一行，讓其參照JQuery庫：

5

新建檔案popup.js，在裡面新增存取ip資料的程式碼：function getCurIp(){$.ajax({url:"http://www.ip38.com/",type:"GET",dataType: "text",async:false,timeout: 1e4,success:function(data, t, jqXHR){//<LI>您的本機IP地址：// ? ?111.12.126.16 ? ?  來自： 稍等,查詢中.... </LI>//var reg=/您的本機IP地址

：s.*?(d*.d*.d*.d*)/;var reg=/b(?:d{1,3}.){3}d{1,3}b/; ? //由於網頁改版，根據網友nicktreyqqcom意見做了修改var result=reg.exec(data);console.log(result[0]);console.log(result[1]);curIp=result[1];alert(curIp);if(result[1]!=undefined){console.log('成功獲取本機ip');}else{}},error:function( jqXHR, textStatus, errorThrown) {alert(textStatus);alert(jqXHR.status);//setTimeout(getCurIp,5000);}});}$(document).ready(function(){getCurIp();});程式碼的含義下一節介紹

6

在popup.html中新增對popup.js的參照：

7

popup.html檔案的最終狀態如下：

1

ajax：ajax是jquery的一個函數，用來傳送http請求。url 是請求的網址type表明是「get」還是「post」請求success是請求成功後要執行的函數error是請求遇到問題後執行的函數

2

success：ajax請求成功後會執行success函數。data是請求返回的資料，我們的ajax返回的data是一些html資料，會包含一下幾行：您的本機IP地址：? ? 111.12.126.16 ? ?  來自： 稍等,查詢中....?我們需要提取出ip部分，即?111.12.126.16這就需要用到正規表示式：var reg=/您的本機IP地址：s.*?(d*.d*.d*.d*)/;var result=reg.exec(data);如果ip包含在data當中，result[1]中返回的就是我們需要的ip，然後列印出來：a

lert(curIp);

1

重新載入擴充套件（如果你已經忘了重新載入擴充套件的方法，可以回過頭看下前面的文章：http://jingyan.baidu.com/article/22fe7ced1a2c613002617ff7.html）

2

點選擴充套件圖示。怎麼樣，ip顯示出來了吧。

3

再到百度裡查詢下，對比下結果。一樣吧?

1

上面我們是用alert函數彈出視窗來顯示資訊，alert視窗會阻斷瀏覽器其他部分的執行。下面稍作修改，讓ip資訊顯示到我們的彈出視窗當中。

2

新增下面一行：

$('body').append("外網ip為："+curIp);

然後注釋掉alert那行：

3

重新載入，然後點選擴充套件圖示，效果如下：

chrome擴充套件開發：[8]查詢外網ip 之二

1

2

3

4

5

6

7

1

2

1

2

3

1

2

3

熱門文章