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

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

月光魔力鸭

2018-09-08 17:54 阅读 587 喜欢 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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
本来是想做一个图床,然后在chrome扩展中添加上,但是发现chrome的扩展有点毫无头绪,只能从头练习,从头学了。
前一阵子做了个图床,可以粘贴上传,查看服务器上的文件... 但是自己的服务器总是有问题..空间还小,就怕哪天没钱续费了。同事昨天想要一个七牛的图床,在网上找了下,只找到了 qiniu upload files插件,自己使用了下,挺好用,但是没有复制粘贴
之前做了一段时间的上传相关的断点续传和秒传功能,这里整理下大体思路
简单记录下dockerfile 以及compose配置
chrome 如何查看placeholder样式以及其他伪类样式
近期有添加数学公式的需求,找来找去,最后还是选择了最简单的。tinymce+kityformula
在程序中,会有需要后台一直运行的场景。这一节我们来做一个监控某网站的运行状态,如果没有运行,则改变当前的图标。
很久之前学习chrome扩展插件的时候已经做过一个了,好久没咋用,最近又跑了一个存储服务,准备在配合这个服务做个图床,以后就用这个了,之前的服务器到期忘了迁移数据都没了,这次换了服务器,在家里了,估计以后不会再做了吧,这个算是最后一个了,有啥问题就在这个进行优化了。