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 | { |
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 | chrome.browserAction.onClicked.addListener(function(tab) { |
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 | var tabId = parseInt(window.location.search.substring(1)); |
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.