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

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

月光魔力鸭

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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
简单记录下dockerfile 以及compose配置
上一张中已经完成了比较简易的3D全景浏览,但是...这是写死在xml中的,对于我们实际的项目,这种情况是不可能适应的。所以,来了解下如何动态加载xml已经设置对应的热点。
最开始其实只是网站的一个小改版,导致的需要发送邮件的功能,本身功能不复杂,不做工具的话,几行代码应该就可以搞定的.. 不过后来想想,这个功能应该还是有一定的小需求的,就做成了工具。
浏览网页的时候经常会有文本无法选中,无法复制的情况,这里简单说个简单的方法,不需要下载什么东西,也不用安装什么软件、插件、油猴啥的都不需要。
最近有系统需要知道性能瓶颈,尝试使用jmeter对重要接口进行并发测试,确定能否支撑一定的用户数量。
最近先研究下jenkins远程部署,在自己服务器上跑一个先,简单记录下碰到的问题。
反爬有很多手段,字体反爬就是其中之一。之前一直都是听过,但是却没怎么在实际爬虫中遇到过,最近在一个爬虫题目网站上看到了,试了试,发现还挺麻烦,当然自己从头研究字体肯定麻烦,简单的是模块多的是,选几个就过了。
整理一些相关的信息,防止后续再找不到。