基於chrome.webRequest打造chrome-fiddler（一）

##適應讀者

1. 常通過fiddler來調試並且又喜歡使用chrome瀏覽器的同學

2. 對開發chrome插件感興趣的同學

3. 對fiddler了解的同學（本文不會講關於fiddler的基礎知識）

##fiddler的問題

1. 其實fiddler可以滿足大部分功能，而且可以基於fiddler開發插件，但我們遇到了一個問題，即開啟fiddler后，通過chrome來刷新頁面非常慢，這也致使了很多熱愛chrome的開發人員放棄了使用fiddler,但fiddler給我們帶來的好處是可以在本地開發，直接看線上效果。

2. 很多同學是用ubuntu或者mac的系統，在ubuntu似乎還沒有fiddler的可替代品，聽說過有個wireshark ,不過用起來比較麻煩。當然也有辦法，即開一個虛擬機，裝個win，里面裝個fiddler,再開一個apache，但這樣也有些折騰。

##針對問題分析

針對上面的問題，其實只要解決了第一個問題，即解決了在chrome的問題，則解決了第二個問題，因為其他系統也都有chrome,所以我們可以圍繞chrome來做文章，我還專門向fiddler的作者Erik郵件過，但可能是英文太差的原因，沒有給予理會，fiddler在ie系列和firefox系列都沒問題，主要是chrome.所以這個問題一直很困擾着我，當恰好我有個同事當時做了個chrome插件，當時主要是統計的同學只想看針對統計的請求url,而可以將一些無關的url給過濾掉，而chrome下的開發者工具的 net列表的過濾功能又不給力，所以他用到了chrome提供的webRequest，其實是監聽了請求，並且通過requestHeader的參數進行一些過濾，從而定制了自己想看的請求。

既然webRequest可以監聽，那么它是否可以像fiddler-script一樣，可以更改request的url呢？所以我可以開發一個插件來嘗試下，如果可以，至少是可以替代fiddler的映射功能，即抓到一個地址，將這個地址映射到自己想要的地址。

##驗證想法

筆者之前沒開發chrome插件，所以先得科普一下，看下http://code.google.com/chrome/extensions/getstarted.html

其實開發chrome插件挺簡單，在這里就不多描述chrome插件的基礎了，因為我想快速驗證自己的想法，我這里快速建立了

我的需求其實就是有個后台可以直接監聽請求，我測試其中一個請求，看能否映射我想要的請求，所以其實之要一個manifest.json與background.html即可。

1. manifest.json (寫插件的基礎配置文件）

  

{
  "name": "fiddler", 
  "version": "1.6",      
  "minimum_chrome_version" : "17.0.0",   //在17.0之后,webRequest發布成正式版了。
  
  "background_page": "background.html",
  "description": "chrome-fiddler",
  "permissions": [       
        "tabs",            
          "*://*/*",         
          "webRequestBlocking", //注意這里一定要寫
          "webRequest"   //注意這里一定要寫      
     ]
 }

 

2. background.html, background.js （后台html ,外鏈了一個background.js）

chrome.webRequest.onBeforeRequest.addListener (

          function(details) {

                   var url = details.url;
                   //通過匹配測試一個請求
                   if( url.indexOf("min-player")!= -1) {
                          return {redirectUrl: "localhost/player.js"}; //我試了本機服務器下的一個文件。
                          //1. 記得要返回rediretUrl. 之前我用url,是無效的。     
                   } 
                   return true;
           },
          {urls:["<all_urls>"]},  //監聽所有的url,你也可以通過*來匹配。
           , ["blocking"] 
)

再通過擴展面板將此插件加入chrome,重啟，進入到匹配url的頁面后，通過network抓包, url映射成功，即改本地的js,可以看線上效果。那么我的想法驗證成功

 

##TODO

想法已經經過驗證，那么我需要實現以下功能可以做一個簡陋版的fiddler映射功能。

1。我需要一個前台界面來配置匹配與url的映射。

2.   可以支持多個映射，即增加，刪除，修改。

3.   對於本地的文件，看能不能通過選擇文件的方式選擇。

4.   由於background的生命周期在chrome關閉之前，那如果我想讓配置一直保存呢。需要支持本地存儲，可以通過html5的localStorage.

 

那暫時先實現這個四個功能吧，明天搞定。今天先寫這么多了，后續會接着   基於chrome.webRequest打造chrome-fiddler（二），請大家關注,多提建議。