一塊兒來作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擴展吧。