Chrome插件开发系列二：跨域调试助手

一般情况下，我们会请后端大佬帮我们加上跨域策略，通过设置响应头Access-Control-Allow-Origin来解决跨域问题，但是有时候我们最终的代码可能也会发布到和API的同域的环境上去，如果每个接口都需要请后端加上跨域策略也不太现实，还可能附带产生一些安全隐患，这个时候我们就可以祭出神器浏览器插件了，我们在介绍插件基础知识的时候有提到插件可以拦截请求并更改其中的一些参数，其实要解决跨域问题，我们只需要在请求得到响应之前，修改响应头，添加Access-Control-Allow-Origin头信息，就可以实现跨域访问了。

我们继续看如何编写这个插件，在开始之前我们还是给我们的插件取一下比较优雅的名字“跨域调试助手”，由于插件需要修改响应头，所以我们需要在manifest.json文件中申请webRequest, webRequestBlocking这两个权限，另外content_scripts定义的是注入到页面的资源，如果我们需要拦截请求，就需要在背景页中完成，下面我们看一下插件的具体实现。

首先插件的目录结构：

	- AccessControllAllowOrigin
  - js
     - background.js
  - images
     - ico-48.png
  - manifest.json

manifest.json文件的代码如下：

{
    "name" : "跨域访问助手",
    "version" : "1.0",
    "description" : "允许跨域访问",
    "manifest_version" : 2,
    "icons": {
        "16": "images/ico-48.png",
        "48": "images/ico-48.png",
        "128": "images/ico-48.png"
    },
    "browser_action": {
        "default_title": "跨域访问助手"
    },
    "permissions" : ["webRequestBlocking", "webRequest", "*://*/*"],
    "background" : {
        "scripts" : ["js/background.js"]
    }
}

background.js文件的代码如下：

var modifyFieldName = 'Access-Control-Allow-Origin';
 
chrome.webRequest.onHeadersReceived.addListener(function(details) {
  var responseHeaders = details.responseHeaders;
  var allowOriginHeader = responseHeaders.find(function(rh, index){
    if (rh.name === modifyFieldName) {
      responseHeaders[index]['value'] = '*';
      return true;
    }
  });
  if (!allowOriginHeader) {
    responseHeaders.push({
      name: modifyFieldName,
      value: '*'
    });
  }
  return {
    responseHeaders: responseHeaders
  };
},
{
  urls : [""]
},
["responseHeaders", "blocking"]);

其中对于chrome.webRequest模块，如果有不清楚的可以点击这里查阅。

好了，一个简单却实用的跨域插件就完成了，自从有了这跨域插件妈妈再也不用担心我跨域调试了！！！

当然，除了chrome插件，还有其他方式可以实现跨域访问，比如fiddler插件，具体可以参考web开发调试中的跨域处理这篇文章。

文末附上插件源码