基于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（二），请大家关注,多提建议。

评论

2 楼 welefen 2013-07-29  

http://welefen.github.io/Fiddler/ 这里已经有了一个

1 楼 sniper114713 2013-03-01  

关注下，这个项目进展如何？？有开源出来么？