月光魔力鸭
2018-09-08 17:54 阅读 555 喜欢 0
扩展程序中会有需要请求外部接口获取数据的时候，如果直接在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地址：http://pv.sohu.com/cityjson,所以需要在permissions中添加该地址。
//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;
});
大功告成，将我们的文件夹加载到谷歌扩展程序中，看下效果吧。
想做一个更实用的小插件，那么就需要你的灵感和需求了。
转载请注明出处: https://chrunlee.cn/article/chrome-learn-3.html
BUG集散地
