一块儿来作chrome扩展《可配置的代理》

1、本文主要涉及相关内容：

1. chrome.proxy
2. pacScript
3. browser_action
4. popup
5. localStroage

2、预览

（代理运行截图，图中的代理服务器有防火墙，暂不对外）

如图所示，代理配置界面经过点击browser_action按钮打开，在popup页面内进行。能够设置服务器，也能够添加删除站点。好了，开始一些简单的说明工做

3、proxy

在chrome扩展中，要使用proxy同任何一种chrome对象同样，须要在json配置中容许chrome操做，在以前的几篇文章中都有介绍，像这样：

"permissions": [
    "proxy"
]

这只是配置，咱们须要在background.js中使用它，须要用到chrome.proxy api，像这样：

chrome.proxy.settings.set({value: config, scope: 'regular'},function() {});

标准写法，若是把这行代码写到background.js中，那浏览器在加载扩展的时候就会执行，若是须要触发去执行，写到function中就能够了。

代码中只有value和scope是可变的，scope对应的是regular，这里很少说，它有几组值，若是有兴趣能够看看官方文档，360上貌似也有。这里主要说config。

config是一个对象，像这样：

var config = {
    mode: "pac_script",
    pacScript: {
        data: pac
    }
};

其中mode也有几组值，这里只使用pac_script，由于我只用了它，已经能够知足咱们配置启用代理访问站点的需求，其它几组值，也能够去看看文档。

4、pacScript

pac是变量，它是一个字符串，一个pac_script的字符串，像这样：

var pac = "var FindProxyForUrl = function(url, host){return 'DIRECT';}";

return 'DIRECT'，表示不使用代理服务，从这个function能够看出，扩展是不使用代理的。下面对这个pac_script进行一点点扩展让它支持按配置站点启且代理，像这样：

var FindProxyForUrl = function(url, host) {
    if (shExpMatch(url, "*google.com*")) {
        return 'PROXY 112.124.25.173:7071';
    }
    return 'DIRECT';
}

条件中，使用shExpMatch来检测访问的url地址是否是匹配*google.com*，*号表明模糊匹配，能够看出它是一个包含关系，只要连接地址中带有可匹配的字符串，都算成立。那么若是访问google.com相关的站点，都会经过PROXY代理服务去访问。多个站点，也就是多成立条件，写法随意。

添加/删除站点和配置代理服务器的时候，也就是动态的去生成这样一个pac_script，利用localStroage来保存它就能够了。重要的一点，给到pac的不是这个function,而是一个字符串，因此，要把这些字符全变成字符串才能正常运行。

关于pacScript有相关的介绍，有兴趣能够去搜搜看。

5、browser_action和popup

browser_action，能够简单的理解为chrome地址栏边上的小按钮,要开启它，一样须要在json中配置，像这样：

"browser_action": {
    "default_icon": "images/logo.png",
    "default_title": "UnProxy",
    "default_popup": "html/popup.html"
}

很显示icon就是那个小图标，title，就是鼠标放上去后的提示文本，popup就是点击小图标后的弹层。

若是指定了popup，点击小图标就会打开popup对应的在扩展目录中的html文件，这个html和content_script同样，能够加载script和css，但不能在里面写script代码，script代码必须放到一个js文件中，经过加载进来。

在popup.html中，绘界面，发起向background.js的请求，接受background.js的返回信息，都和content_script如出一辙，不熟悉的同窗能够看看前几篇文章，这里就不介绍了。

6、结尾

好了，一个代理扩展相关的点就这些，固然，有些并非必须的，能够灵活使用。完整的代码能够看看个人github，也能够下载使用这个代理扩展：UnProxy，已经发布在了chrome 扩展商店里。默认的代理服务器是我本身搭的，正如前面所说，有防火墙，若是你想测试，能够联系我把你的IP加入白名单。

源码：

https://github.com/onlyfu/UnProxy

下载crx:

https://github.com/onlyfu/UnProxy/tree/master/dist

 

感谢阅读，下次会介绍作一个postman功能的扩展。现目前简单版的postman已经不更新了，新版虽然强大，但使用仍没有简单版的便捷，因此，下次一块儿来作个REST Client扩展吧。