chrome系列-扩展程序开发学习-跨域请求数据

月光魔力鸭

2018-09-08 17:54 阅读 662 喜欢 0 chrome系列跨域

扩展程序中会有需要请求外部接口获取数据的时候，如果直接在JS中写的话，会跨域，但是谷歌扩展程序支持这种情况，只需要配置一下即可。

下面我们做一个简单的请求数据获得IP地址的数据。

主要的配置项permissions, 配置需要请求的地址即可。

{
	"manifest_version":2,
	"name":"IP地址",
	"version":"1.0",
	"description":"DEMO-查看当前的用户IP",
	"icons":{
		"16":"img/icon16.png"
	},
	"browser_action":{
		"default_icon":{
			"16":"img/icon16.png"
		},
		"default_title":"查看IP",
		"default_popup":"popup.html"
	},
	"permissions":[
		"http://pv.sohu.com/cityjson"
	]
}

获取IP地址的API地址：undefined

//popup.html 长这样子，简单一些
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>IP地址</title>
	<style>
		.div{
			min-width:200px;
			background-color:black;
			color:white;
			font-size:20px;
			text-align:center;
		}
	</style>
</head>
<body>
	<div class="div" id="demo">
		
	</div>
</body>
</html>
<script type="text/javascript" src="popup.js"></script>

//popup.js 长这样子
//request 异步请求地址
function request(url,cb){
	var xhr = new XMLHttpRequest();
	xhr.open('GET',url);

	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			cb(xhr.responseText);
		}
	}
	xhr.send();
}

request('http://pv.sohu.com/cityjson',function( ip ){
	document.getElementById('demo').innerHTML = ip;
});

大功告成，将我们的文件夹加载到谷歌扩展程序中，看下效果吧。

示例图