Chrome扩展及应用开发入门笔记（二）跨域请求

最新推荐文章于 2024-03-01 16:54:22 发布

多则惑少则明

最新推荐文章于 2024-03-01 16:54:22 发布

阅读量5k

点赞数

分类专栏：【技术】JavaScript/python/shell 【技术】手机m站【测试】工具

【测试】工具同时被 3 个专栏收录

54 篇文章 1 订阅

订阅专栏

【技术】JavaScript/python/shell

45 篇文章 1 订阅

订阅专栏

【技术】手机m站

24 篇文章 0 订阅

订阅专栏

manifest.json：

文件可以告诉Chrome关于这个扩展的相关信息，它是整个扩展的入口，也是Chrome扩展必不可少的部分

注：

Google的官方文档中对于扩展和应用给出了两个不同的Manifest介绍界面，这是因为有些属性只能由扩展使用，而有些属性只能由应用使用。

如果这两者同时出现在同一个Manifest文件中，就会使Chrome困惑，不知是按照扩展对待这个程序还是按照应用来对待这个程序。

但无论是扩展还是应用，它们的Manifest又有很多共有的属性。

manifest.json模板：

Chrome扩展的Manifest必须包含name、version和manifest_version属性，目前来说manifest_version属性值只能为数字2，对于应用来说，还必须包含app属性。

其他常用的可选属性还有 browser_action、page_action、background、permissions、options_page、content_scripts，

所以我们可以保留一份manifest.json模板，当编写新的扩展时直接填入相应的属性值。

可以应对大部分的扩展的模板：

{
    "app": {
        "background": {
            "scripts": ["background.js"]
        }
    },
    "manifest_version": 2,
    "name": "My Extension",
    "version": "versionString",
    "default_locale": "en",
    "description": "A plain text description",
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "browser_action": {
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "Extension Title",
        "default_popup": "popup.html"
    },
    "page_action": {
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "Extension Title",
        "default_popup": "popup.html"
    },
    "background": {
        "scripts": ["background.js"]
    },
    "content_scripts": [
        {
            "matches": ["http://www.google.com/*"],
            "css": ["mystyles.css"],
            "js": ["jquery.js", "myscript.js"]
        }
    ],
    "options_page": "options.html",
    "permissions": [
        "*://www.google.com/*"
    ],
    "web_accessible_resources": [
        "images/*.png"
    ]
}

在官方文档中可以找到完整的Manifest属性列表，扩展在 https://developer.chrome.com/extensions/manifest

操作用户正在浏览的页面：

实际上就是对用户当前浏览页面的DOM进行操作。通过Manifest中的content_scripts属性可以指定将哪些脚本何时注入到哪些页面中，

当用户访问这些页面后，相应脚本即可自动运行，从而对页面DOM进行操作。

Manifest的content_scripts属性值为数组类型，数组的每个元素可以包含：

matches//定义了哪些页面会被注入脚本

exclude_matches//定义了哪些页面不会被注入脚本

css /js //对应要注入的样式表和JavaScript

run_at//何时进行注入

all_frames//脚本是否会注入到嵌入式框架中

include_globs//

exclude_globs//全局URL匹配，最终脚本是否会被注入由matches、exclude_matches、include_globs和exclude_globs的值共同决定。

简单的说，如果URL匹配mathces值的同时也匹配include_globs的值，会被注入；如果URL匹配exclude_matches的值或者匹配exclude_globs的值，则不会被注入。

content_scripts中的脚本只是共享页面的DOM¹，而并不共享页面内嵌JavaScript的命名空间。也就是说，如果当前页面中的JavaScript有一个全局变量a，content_scripts中注入的脚本也可以有一个全局变量a，两者不会相互干扰。

当然你也无法通过content_scripts访问到页面本身内嵌JavaScript的变量和函数。

跨域请求:

跨域指的是JavaScript通过XMLHttpRequest请求数据时，调用JavaScript的页面所在的域和被请求页面的域不一致。

对于网站来说，浏览器出于安全考虑是不允许跨域。另外，对于域相同，但端口或协议不同时，浏览器也是禁止的。下表给出了进一步的说明：

URL	说明	是否允许请求
http://a.example.com/ http://a.example.com/a.txt	同域下	允许
http://a.example.com/ http://a.example.com/b/a.txt	同域下不同目录	允许
http://a.example.com/ http://a.example.com:8080/a.txt	同域下不同端口	不允许
http://a.example.com/ https://a.example.com/a.txt	同域下不同协议	不允许
http://a.example.com/ http://b.example.com/a.txt	不同域下	不允许
http://a.example.com/ http://a.foo.com/a.txt	不同域下	不允许

解决：

但这个规则如果同样限制Chrome扩展应用，就会使其能力大打折扣，所以Google允许Chrome扩展应用不必受限于跨域限制。

但出于安全考虑，需要在Manifest的permissions属性中声明需要跨域的权限。

比如，如果我们想设计一款获取维基百科数据并显示在其他网页中的扩展，就要在Manifest中进行如下声明：

{
    ...
    "permissions": [
        "*://*.wikipedia.org/*"
    ]
}

这样Chrome就会允许你的扩展在任意页面请求维基百科上的内容了。

可以利用如下的代码发起异步请求：

function httpRequest(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            callback(xhr.responseText);
        }
    }
    xhr.send();
}

这样每次发起请求时，只要调用httpRequest函数，并传入要请求的URL和接收返回结果的函数就可以了。为什么要使用callback函数接收请求结果，而不直接用return将结果作为函数值返回呢？因为XMLHttpRequest不会阻塞下面代码的运行。

为了更加明确地说清上述问题，让我们来举两个例子。

function count(n){
    var sum = 0;
    for(var i=1; i<=n; i++){
        sum += i;
    }
    return sum;
}

var c = count(5)+1;
console.log(c);

这个例子会在控制台显示16，
因为：<code>count</code>函数是一个阻塞函数，在它没有运行完之前它会阻塞下面的代码运行，
所以直到<code>count</code>计算结束后才将结果返回后再加<code>1</code>赋给变量<code>c</code>，最后将变量<code>c</code>的值打印出来

unction httpRequest(url){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            return xhr.responseText;
        }
    }
    xhr.send();
}

var html = httpRequest('test.txt');
console.log(html);

虽然请求的资源内容为<code>Hello World!</code>，但却并没有正确地显示出来

原因：
<code>httpRequest</code>函数不是一个阻塞函数，在它没运行完之前后面的代码就已经开始运行，
这样<code>html</code>变量在<code>httpRequest</code>函数没返回值之前就被赋值，所以最终的结果必然就是<code>undefined</code>了。

既然这样，如何将非阻塞函数的最终结果传递下去呢？方法就是使用回调函数。在Chrome扩展应用的API中，大部分函数都是非阻塞函数，

所以使用回调函数传递结果的方法以后会经常用到。

让我们来用回调函数的形式重写第二个例子：

function httpRequest(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            callback(xhr.responseText);
        }
    }
    xhr.send();
}

var html;
httpRequest('test.txt', function(result){
    html = result;
    console.log(html);  <code>httpRequest</code>函数运行的结果已经被正确地打印出来了。
});

实战编写一款显示用户IP的扩展：

{
    "manifest_version": 2,
    "name": "查看我的IP",
    "version": "1.0",
    "description": "查看我的电脑当前的公网IP",
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "browser_action": {
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "查看我的IP",
        "default_popup": "popup.html"
    },
    "permissions": [
        "http://sneezryworks.sinaapp.com/ip.php" //的Manifest定义了这个扩展允许对http://sneezryworks.sinaapp.com/ip.php发起跨域请求
    ]
}

popup.html:

<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
}

body {
    width: 400px;
    height: 100px;
}

div {
    line-height: 100px;
    font-size: 42px;
    text-align: center;
}
</style>
</head>
<body>
<div id="ip_div">正在查询……</div>
<script src="js/my_ip.js"></script>//js文件夹下有my_ip.js文件
</body>
</html>

my_ip.js:注此 js获取 IP实践后发现不行

function httpRequest(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            callback(xhr.responseText);
        }
    }
    xhr.send();
}

httpRequest('http://sneezryworks.sinaapp.com/ip.php', function(ip){
    document.getElementById('ip_div').innerText = ip;
});

结果：

源码地址

https://github.com/xiaohuhuanxiang/chromedev/tree/chrome/getIP

安全问题:

作为一个开发者，安全问题永远都不应被轻视。在你从外域获取到数据后，不要轻易作为当前页面元素的innerHTML直接插入，更不要用eval函数去执行它，否则很可能将用户置于危险的境地。如果要将请求到的数据写入页面，可以使用innerText，就像我们这个查看IP的扩展那样。如果是JSON格式是数据就使用JSON.parse函数去解析。为了避免请求数据返回的格式错误，结合try-catch一起使用也是不错的选择。

多则惑少则明

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Chrome扩展及应用开发入门笔记（二）跨域请求

manifest.json：文件可以告诉Chrome关于这个扩展的相关信息，它是整个扩展的入口，也是Chrome扩展必不可少的部分注：Google的官方文档中对于扩展和应用给出了两个不同的Manifest介绍界面，这是因为有些属性只能由扩展使用，而有些属性只能由应用使用。如果这两者同时出现在同一个Manifest文件中，就会使Chrome困惑，不知是按照扩展对待这个程序还是
复制链接

扫一扫