一起來做chrome擴展《可配置的代理》

一、本文主要涉及相關內容：

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

二、預覽

（代理運行截圖，圖中的代理服務器有防火牆，暫不對外）

如圖所示，代理配置界面通過點擊browser_action按鈕打開，在popup頁面內進行。可以設置服務器，也可以添加刪除站點。好了，開始一些簡單的說明工作

三、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，因為我只用了它，已經可以滿足我們配置啟用代理訪問站點的需求，其它幾組值，也可以去看看文檔。

四、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有相關的介紹，有興趣可以去搜搜看。

五、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一模一樣，不熟悉的同學可以看看前幾篇文章，這里就不介紹了。

六、結尾

好了，一個代理擴展相關的點就這些，當然，有些並不是必須的，可以靈活使用。完整的代碼可以看看我的github，也可以下載使用這個代理擴展：UnProxy，已經發布在了chrome 擴展商店里。默認的代理服務器是我自己搭的，正如前面所說，有防火牆，如果你想測試，可以聯系我把你的IP加入白名單。

源碼：

https://github.com/onlyfu/UnProxy

下載crx:

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

 

感謝閱讀，下次會介紹做一個postman功能的擴展。現目前簡單版的postman已經不更新了，新版雖然強大，但使用仍沒有簡單版的便捷，所以，下次一起來做個REST Client擴展吧。