Chrome插件-跨域请求

前言

  如果我们的谷歌插件需要获取其他的网站的html文本，并且匹配里面对我们有价值的内容，通过谷歌插件可以很方便的进行跨域请求并取得数据。

---

例子

  让谷歌插件在我们打开思否网站的时候，执行脚本请求百度的html文本。

1.谷歌插件的描述文件menifest.json中添加content_scripts字段，然后添加一个permissions字段，添加content_scripts字段后，当你打开matches里面的网址时会执行js里面的脚本一次，*号为通配符，打开的网站是思否。后者permissions字段用来添加需要跨域请求的网站，我们添加百度的网址。

  "permissions" : ["tabs","https://www.baidu.com/"],
  "content_scripts":[{
    "matches":["https://segmentfault.com/*"],
    "js":["jquery-2.0.0.min.js","main.js"]
  }],

2.在main.js中添加一个如图代码，函数XMLHttpRequest()的用法可以参考该链接。

var html_text = {};
//跨域请求百度的html文本 ，需要permission添加跨域允许
function get_html()
{
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://www.baidu.com/", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            html_text = xhr.responseText;
            console.log(html_text)
        }
    }
    xhr.send();
}
get_html()

3.打开思否网站，并且F12打开调试窗口，可以在console中看到请求的结果。