[FE] 使用Chrome extension获取页面中所有的http请求

背景

Chrome浏览器提供了扩展功能，
我们可以写自定义的脚本，来制作Chrome extension。

除此之外，Chrome开发者工具也是可以扩展的，
我们可以制作自己的devtool，还可以在Elements工具中添加自定义的侧边栏。

本文只介绍Chrome extension。

文件结构

下面我们来新建一个精简的Chrome extension，
用来获取页面中所有发起的http请求，然后打印在控制台上。

目录如下：

chrome-extension-example
├── manifest.json
├── index.html
├── index.js
└── background.js

（1）manifest.json

{
  "name": "chrome-extension-example",
  "version": "1.0",
  "minimum_chrome_version": "10.0",
  "description": "chrome extension example",
  "devtools_page": "index.html",
  "background": { "scripts": ["background.js"] },
  "permissions": [
    "http://*/*",
    "https://*/*"
  ],
  "manifest_version": 2
}

（2）index.html

（3）index.js

// chrome extension中不能使用console.log
// 所以，需要通过发送请求给后台脚本的方式来打印日志
const log = (...args) => chrome.extension.sendRequest({
  tabId: chrome.devtools.tabId,
  args,
});

// 注册回调，每一个http请求响应后，都触发该回调
chrome.devtools.network.onRequestFinished.addListener(async (...args) => {
  try {
    const [{
      // 请求的类型，查询参数，以及url
      request: { method, queryString, url },

      // 该方法可用于获取响应体
      getContent,
    }] = args;

    log(method, queryString, url);

    // 将callback转为await promise
    // warn: content在getContent回调函数中，而不是getContent的返回值
    const content = await new Promise((res, rej) => getContent(res));
    log(content);
  } catch (err) {
    log(err.stack || err.toString());
  }
});

注：
本例中这样注册http请求的回调是有问题的。
我们知道async函数将返回一个promise，那么，在后一个请求触发回调的时候，
前一个请求的async回调函数可能还没有resolved。

为了演示方便，本例特意忽略了这个问题，
但这会导致log(content);比较乱，并不一定是按顺序打印的，
而且，还有可能前一个请求的log(content);，
会在后一个请求的log(method, queryString, url);之后打印出来。

类似场景串行化的处理方式，可以参考：
promise-executor

（4）background.js

// 注册回调，当收到请求的时候触发
chrome.extension.onRequest.addListener(({ tabId, args }) => {

  // 在给定tabId的tab页中执行脚本
  chrome.tabs.executeScript(tabId, {
    code: `console.log(...${JSON.stringify(args)});`,
  });
});

安装

在Chrome浏览器中，打开以下url，

chrome://extensions/

勾选第一行的“开发者模式”，然后点击“加载已解压的扩展程序...”，
选中我们上文中创建的目录chrome-extension-example，确定，安装成功。

参考

Getting Started: Building a Chrome Extension
Extending DevTools
Sample Extensions: devtools.network
Github: andrewn/firephp-chrome