chrome扩展开发：[8]查询外网ip 之二

chrome扩展开发：[8]查询外网ip 之二

介绍查询外网ip扩展的具体代码实现

我们采用从popup窗口发送ajax请求的方法获取ip数据。为了能够向ip38.com请求数据，需要修改manifest文件，也获得相应权限。我们增加下面一行：

"permissions": [""]

意思是说，可以访问任意url的数据。修改后的manifest文件：

发送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/查询

将下载后的文件放到test目录下，你下载的文件名可能和我的不太一样，没有关系。

在popup.html增加一行，让其引用JQuery库：

新建文件popup.js，在里面添加访问ip数据的代码：

function getCurIp(){

$.ajax({

url:"http://www.ip38.com/",

type:"GET",

dataType: "text",

async:false,

timeout: 1e4,

success:function(data, t, jqXHR){

//

//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);

console.log(result);

curIp=result;

alert(curIp);

if(result!=undefined){

console.log('成功获取本机ip');

}else{

}

},

error:function( jqXHR, textStatus, errorThrown) {

alert(textStatus);

alert(jqXHR.status);

//setTimeout(getCurIp,5000);

}

});

}

$(document).ready(function(){

getCurIp();

});

代码的含义下一节介绍

在popup.html中添加对popup.js的引用：

popup.html文件的最终状态如下：

ajax：

ajax是jquery的一个函数，用来发送http请求。

url 是请求的网址

type表明是“get”还是“post”请求

success是请求成功后要执行的函数

error是请求遇到问题后执行的函数

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中返回的就是我们需要的ip，

然后打印出来：

alert(curIp);

重新加载扩展（如果你已经忘了重新加载扩展的方法，可以回过头看下前面的文章：http://jingyan.baidu.com/article/22fe7ced1a2c613002617ff7.html）

点击扩展图标。怎么样，ip显示出来了吧。

再到百度里查询下，对比下结果。一样吧?

上面我们是用alert函数弹出窗口来显示信息，alert窗口会阻断浏览器其他部分的运行。

下面稍作修改，让ip信息显示到我们的弹出窗口当中。

添加下面一行：

$('body').append("外网ip为："+curIp);

然后注释掉alert那行：

重新加载，然后点击扩展图标，效果如下：