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

月光魔力鸭

2018-09-08 17:54 阅读 453 喜欢 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地址：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

感谢支持!

赞赏支持

喜欢

评论信息 (请文明评论)

暂无评论，快来快来写想法...

推荐

electron 制作批量发送邮件小工具

最开始其实只是网站的一个小改版，导致的需要发送邮件的功能，本身功能不复杂，不做工具的话，几行代码应该就可以搞定的.. 不过后来想想，这个功能应该还是有一定的小需求的，就做成了工具。

frp + nginx 实现 https 穿透

通过frp做穿透实现https 访问本地http项目。

Websocket 系列之初识websocket(一)

最近在做直播，是用的webrtc,然后找的免费的starrtc ，当然，可能由于种种原因吧.. 用起来并没有特别顺畅，后续还希望能够深入这部分，从现在开始学习..当然，websocket 是顺带的，可以用来发消息什么的肯定也是要用到的。

docker compose 集成 nodejs+redis+mysql

简单记录下dockerfile 以及compose配置

微信小程序前端解密手机号码

小程序需要用到用户的手机号码，看了下API 以及相关的demo,基本都是服务端进行解密的，问题是需要的参数并没有用到secret，只需要 session_key / iv /encryptedData 即可，那完全可以在客户端进行处理啊。

微信小程序通过jsonrpc调用python服务端接口

与python后端进行联调，后端协议为jsonrpc ,这里简单记录下jsonrpc的通用请求函数，并附带几个栗子

websocket系列之私聊与广播(二)

上一章，我们学习和了解了websocket 是什么以及初始搭建，接下来，我们继续了解，如何进行广播以及对应的私聊呢。

ffmpeg 直播推流简易实现

ffmpeg 采集摄像头进行推流，然后播放，实现直播。