Chrome Extension 的 webRequest模块的解读

Chrome Extension 的 webRequest模块的解读

文档在此:http://developer.chrome.com/trunk/extensions/webRequest.html

1,为了使用webRequest,首先需要在配置文件manifest.json中加入类似的内容:

{
    “name": "My extension",
    ...
    "permissions": {
        "webRequest", "*://*.google.com"
    },
    ....
}

这里的意思是说,只允许这个extension对*.google.com的域名使用webRequest,如果这个字符串替换为其它格式的,比如*://*,就可以支持所有的网站访问了。

2,webRequest的核心意思就是要伪造各种request,那么就不单单是写某个对象的数据这么简单,还需要选择合适的时机,在发送某种request之前伪造好它,或者在真实的request到来之后半路截获它,替换成假的然后再发出去。Life cycle of request就是描述这个事情的。

其中,onBeforeSendHeaders这个回调比较有用,文档中如此描述“这个事件将允许extensions添加、修改或删除request headers。简单的用法如下:

chrome.webRequest.onBeforeRequest.addListener(
    callback, filter, opt_extraInfoSpec);

a,callback被调用时将被赋予包含request信息的一个参数。

b,filter参数是一个object,有这些key可用:

URLs:类似这种格式的字符串:*://www.google.co/foo*bar

Types:像main_frame或sub_frame,image这样的类型

TabID:tab的标识符

WindowID:window的标识符

3,因为可能多个extension都要玩webRequest,所以需要一套冲突处理机制。如果设置了新的request,刷新页面后是否设置继续有效,设置了之后什么时候有效,这些都是关于cache的问题。另外就是使用timestamp属性的问题,凡从timestamp取得的属性值,相互之间可以比较,但是如果和new Date().getTime()这种方式取得的值比较就不一定对了,需要加以注意。

4,例子

a,阻止所有发往www.evile.com的request

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: details.url.indexOf("://www.evil.com/") != -1};
  },
  {urls: ["<all_urls>"]},
  ["blocking"]);

另一种方法,使用filter:

chrome.webRequest.onBeforeRequest.addListener(
  function(details) { return {cancel: true}; },
  {urls: ["*://www.evil.com/*"]},
  ["blocking"])

符合filter的都被cancel掉了。

b,从所有的request中删除User-Agent的header

chrome.webRequest.onBeforeSendHeaders.addListener(
  function(details) {
    for (var i = 0; i < details.requestHeaders.length; ++i) {
      if (details.requestHeaders[i].name === ‘User-Agent‘) {
        details.requestHeaders.splice(i, 1);
        break;
      }
    }
    return {requestHeaders: details.requestHeaders};
  },
  {urls: ["<all_urls>"]},
  ["blocking", "requestHeaders"]);

5,各种API文档

a,RequestFilter:

RequestFilter = {
    tabId: interger, //optional
    //URL的数组,或者是匹配URL的pattern
    urls: array_of_string,
    //可选的值有:"main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"
    types: array_of_enumerated_string, //optional
    windowId: integer //optional
};

// 设置了blocking关键字的就用这个object来作为block的规则了
BolockingResponse = {
    //为true的话request被cancel,在onBeforeRequest里面用哦
    cancel: boolean, //optional
    //只在onBeforeRequest事件中使用,用来掉包的关键属性!!!
    redirectUrl: string, //option
    //只用在onHeadersReceived事件里,在浏览器返给server时把header给掉包
    responseHeaders: HttpHeaders //optional
    //只在onBeforeSendHeaders事件中使用。是另一个用来掉包的关键属性!!!
    requestHeaders: HttpHeaders //optional
    //只在onAuthRequred事件中使用,当然也是用来掉包的
    authCredentials: object //optional
};

HttpHeaders:HTTP headers组成的数组,数组每个元素都有自己的键值对,就是object了。这个得实际打印出来才知道。

b,onBeforeSendHeaders,在TCP连接建立之后和HTTP数据发送之前被调用的事件。调用方法:

chrome.webRequest.onBeforeSendHeaders.addListener(function(object details) {...});

其中,传给callback的参数details结构如下:

details = {
    tabId: integer, //如果没有和tab关联则返回-1
    parentFrameId: integer,
    url: string,
    timeStamp: double,
    //0表示request是在main frame里发生的
    frameId: integer,
    requestId: string,
    requestHeaders: HttpHeaders, // optional
    type: enumerated_string, //value in:  ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"]
    method: string //标准HTTP方法
};

其它事件大同小异,调用callback时传入的参数也都是details这个结构,只是某些字段会有不同的值。

6,总结:webRequest的API非常容易使用,基本上就是第四部分里三个例子的样式。当然, 要想更好地使用,还需要Http Request的一些基础知识,想伪造的话起码要知道应该伪造成什么样子才合适。

转:http://www.zengguanglik.com.cn/2014/1/20/00080.html

时间: 2024-10-05 06:44:05

Chrome Extension 的 webRequest模块的解读的相关文章

Chrome Extension 检查视图(无效)处理方法

最近闲来无事,简单看了下Chrome扩展的开发,并且开发一个小小的翻译插件(TranslateBao)作为练手,开发细节不详述了,如果有新学习chrome extension开发的新人,可以参考源码,并欢迎提出宝贵意见,共同进步. 闲话不多说,在一个Demo版开发完成后,载入到Chrome中进行体验,一切感觉良好...(-.-),但是,遇到一个感觉很不爽的东西,见下图: 没错,问题就是在“检查视图:background.html”后面有一个“无效”,虽然没有发现具体影响到什么地方,但是这么一个负

chrome extension message passing 消息传递

Chrome插件开发笔记 360翻译了Chrome插件开发的文档   (仍然建议出去看看) 看这里http://open.chrome.360.cn/extension_dev/overview.html 什么是扩展 一个应用(扩展)其实是压缩在一起的一组文件,包括HTML,CSS,Javascript脚本,图片文件,还有其它任何需要的文件. 应用(扩展)本质上来说就是web页面,它们可以使用所有的浏览器提供的API,从XMLHttpRequest到JSON到HTML5全都有. 扩展extens

[label][Chrome-Extension] How to start Chrome Extension&#39;s development

Firstly , you should read these two pages. https://developer.chrome.com/extensions/overview https://developer.chrome.com/extensions/getstarted Secondly, you must read this page. https://developer.chrome.com/extensions/packaging [label][Chrome-Extensi

解决chrome extension无法下载的问题

由于GFW把谷歌应用商店给屏蔽了,下载chrome扩展变得很困难. 我使用的是版本30.0.1599.101 m. 那么你需要做的第一个处理是,修改host文件,保证chrome应用商店可以登录.如下链接可登陆https://chrome.google.com/webstore. 之后到http://www.chrome-extension-downloader.com/中下载chrome-extension-downloader,可以直接安装到chrome中.如果遇到该扩展自动被禁止的情况,可

如何做一个简单的Chrome Extension用于网页截屏

Chrome extension是一个文件包,里面包含了一个配置文件manifest.json,以及一些用于Web开发的文件和资源 (HTML, JavaScript, CSS,等). Chrome Extension开发指南 Chrome Extension Overview Chrome Extension Debugging Chrome Extension Samples 如何实现网页截屏功能 看一下manifest文件: {       "name": "Scree

[Tools] Create a Chrome Extension

Creating a Chrome extension requires a manifest.json file which defines how your extension will behave. With a minimal setup, you can already manipulate pages and change elements. This lesson walks you through creating a manifest.json file which will

Chrome Extension 扩展程序 小白入门

Chrome Extension 扩展程序 前请说明:本文适用于之前从来没有接触过chrome extension扩展程序的同学~ 编写demo 创建项目文件夹chrome_ext_demo,在项目根路径(chrome_ext_demo/)下创建 manifest.json 在manifest.json中添加如下示例(只是个简单例子,详细字段说明可参考官方文档): { "name":"Chrome Extension demo", "version&quo

How does Chrome Extension crx Downloader work? ——— From crxdown.com

How does Chrome Extension crx Downloader work? Home >> blog >> How does Chrome Extension crx Downloader work? Author:admin    Date:11 2017/07    Cotyright©crxDown.com Generally Even Chrome has to connect to a server and download the extension

[FE] Chrome Extension 五步曲

1. Create the manifest.json Only three fields is needed. { "name": "Getting Started Example", "version": "1.0", "manifest_version": 2, "description": "xx" } 2. Add instruction (backgrou