ReZero's Utopia.

Request record

Chrome Extension
Word count: 541Reading time: 3 min
2020/02/06 Share

https://github.com/ReZeroS/request-record

This post is used to explain how to write the plugin: request-record.

I got a mission this week to record all api from function requests in our system. I have finished it, but I still wanna to write a plugin to simplify this work. Well, it maybe does not work well, so just write for fun.

First step: bulid the setting

Most project should be included a setting file which is used to describe the whole project base setting such like common properties, version number, etc…

Chrome extension got this file called manifest.json. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "name": "Request Record",
  "description": "Generate the request log and group them by address url",
  "version": "0.1",
  "permissions": [
    "debugger",
    "tabs"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "Request Record"
  },
  "manifest_version": 2
}

The permissions field tells the permissions it required and background field tells the background scripts should be registered.
If u still don’t know what is the above mean, u can just write it down and skip this.

Second step: render the page

Since we finished the first step, the only info we can infer to is the background field tell background.js, let’s write it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.debugger.attach({tabId:tab.id}, version,
      onAttach.bind(null, tab.id));
});

var version = "1.0";

function onAttach(tabId) {
  if (chrome.runtime.lastError) {
    alert(chrome.runtime.lastError.message);
    return;
  }

  chrome.windows.create(
      {url: "headers.html?" + tabId, type: "popup", width: 800, height: 600});
}

Chrome support chrome object to provide the api for developer to access the browser. And u can see them all from here. The listener we registered will fire when a browser action icon is clicked while does not fire if the browser action has a popup. We use the listener to capture the tab and pass it to debugger which can attach to it to instrument network interaction, debug JavaScript, mutate the DOM and CSS, etc. Use the Debuggee tabId to target tabs with sendCommand and route events by tabId from onEvent callbacks.

After we bind the chrome tab we can write the real work code and got the error message at runtime.

Third step: build the app

The follow template shows how to bind listener to the window we created last step and capture the web request.
The Network.enable varible which defined by the remote debugging protocol could enable network tracking, and then network events will be delivered to the client.

1
2
3
4
5
6
7
8
9
10
var tabId = parseInt(window.location.search.substring(1));

window.addEventListener("load", function() {
  chrome.debugger.sendCommand({tabId:tabId}, "Network.enable");
  chrome.debugger.onEvent.addListener(onEvent);
});

window.addEventListener("unload", function() {
  chrome.debugger.detach({tabId:tabId});
});

onEvent function got three params: debuggeeId, message, params, u can use them to write what u want.

Here I wanna to record the request log, so I intercept at the requestWillBeSent, and get the request from the params, get the tab url by using chrome.tabs.query.

Last step: load your package

After last three steps, we can open the extension tab and load from unzip folder which we created, then u can see it.

Author：ReZero

原文链接：https://rezeros.github.io/2020/02/06/request-record/

发表日期：February 6th 2020, 11:16:00 pm

更新日期：July 5th 2020, 2:47:05 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. This post is used to explain how to write the plugin: request-record.
    1. 1.1. First step: bulid the setting
    2. 1.2. Second step: render the page
    3. 1.3. Third step: build the app
    4. 1.4. Last step: load your package
Total : 103
2020
2019
2018
2017
2016
Story Algorithm bits Math Queue Stack Java Debug JDWP KMP 3d animation css javascript android 库 索引 permission 正则 domain kali scan-tools security sub-domain arch bbr google linux network speed tcp archlinux gdm shell themes cdn ip 网络安全 castby story selector classLoader findClass java 八皇后 html 标签 python 凯撒密码 击鼓传花 数据结构 算法 数据结构与算法 编码 android studio 布局 思维导图 algorithm csrf login session token uid web xss spider 嗅事百科 join 优化 电话 编程 illegal 拓扑排序 课程安排 gcd rsa 二叉树 有序树 正则表达式 后缀表达式 apache web server 渗透 cocos cocos2dx game match regex test tutorial 数据 english funnny blob bomb exploding git memory tree php5 wifi ftp service http-equiv http协议 http FrontDesign Chrome Plugins Sprider Basic knowledge js language parser note Javassist jsp jvm scan tools firewall firewalld iptables protocol strategy Database firstSet FollowSet ll1 table acm ANSI ASCII decode encode ISO-8859-1 messy code msfconsole injection mysqli php sql注入 Mybatis exploit NSA atom expression lanauage operator parse precedence 安全 序列化与反序列化 微信 phpstorm xampp xdebug 环境配置 PIL pickle 序列化 Message Queue Notes redis string 撤销 K8s Linux Extension call-back Request scrapy 爬虫 qzone selenium webdriver black box lisp module scheme sicp case condition hanoi recursion baidu tieba Sql Optimize Explain 策略模式 设计模式 symbol u盘 病毒 webshell effective win10 windows hexo blog CI/CD github actions
Design Story Algorithm Java FrontPage Android Security Linux BackStage Python Algorithm/Bit-operation Cocos FrontDesign Spider Parser-amp-language Database Java/Backstage Regex Java/Middleware K8s Front Mysql Mysql/Sql