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

简介: 扩展程序中会有需要请求外部接口获取数据的时候,如果直接在JS中写的话,会跨域,但是谷歌扩展程序支持这种情况,只需要配置一下即可。
扩展程序中会有需要请求外部接口获取数据的时候,如果直接在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;
});

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

image.png

想做一个更实用的小插件,那么就需要你的灵感和需求了。

相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
使用vue快速开发一个带弹窗的Chrome插件
使用vue快速开发一个带弹窗的Chrome插件
71 0
使用vue快速开发一个带弹窗的Chrome插件
|
3月前
|
Web App开发 人工智能 自然语言处理
谷歌公布 2023 年最受欢迎Chrome扩展
谷歌公布 2023 年最受欢迎Chrome扩展
|
4月前
|
Web App开发 JavaScript 前端开发
chrome调试秘籍,让你的开发速度飞起来
chrome调试秘籍,让你的开发速度飞起来
|
6月前
|
Web App开发
chrome扩展:manifest.json文件相关字段
chrome扩展:manifest.json文件相关字段
27 0
|
7月前
|
Web App开发 数据安全/隐私保护
Chrome谷歌浏览器密码数据导出与导入管理(实现数据无缝同步)
Chrome谷歌浏览器密码数据导出与导入管理(实现数据无缝同步)
436 0
|
8月前
|
Web App开发 存储 前端开发
使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
41 0
|
6天前
|
Web App开发 存储 JavaScript
走进Chrome拓展开发,定制自己的图床扩展
走进Chrome拓展开发,定制自己的图床扩展
|
3月前
|
Web App开发 Windows
一个好用的设置所有网页成暗黑背景的 Chrome 扩展
一个好用的设置所有网页成暗黑背景的 Chrome 扩展
21 0
|
4月前
|
Web App开发 JSON 前端开发
6款开发必备的Chrome谷歌浏览器扩展(部分火狐、edge浏览器商店也可以用)
6款开发必备的Chrome谷歌浏览器扩展(部分火狐、edge浏览器商店也可以用)
40 0
|
6月前
|
Web App开发 SQL Linux
使用 Chrome 开发者工具获取网站的 LCP 数据
使用 Chrome 开发者工具获取网站的 LCP 数据
59 0