How to Output Request and Response in Chrome Extensions

Tadashi Shigeoka ·  Tue, April 7, 2020

I’ll introduce how to output request and response in Chrome Extensions.

Chrome

Background: Want to Check Network Communication Content in Chrome Extensions

This article introduces sample code for a Chrome Extension that checks the content of network communication requests and responses.

How to Create Chrome Extensions

Chrome Extension APIs Used

The Chrome Extension APIs used this time are chrome.devtools.network.onRequestFinished.addListener and chrome.devtools.inspectedWindow.eval.

Sample Code for Outputting Request and Response in Chrome Extensions

The sample code for outputting request and response in Chrome Extensions is published in the following GitHub Pull Request, so please take a look.

Chrome Extension で request, response を console.log で出力する · Pull Request #1 · codenote-net/chrome-extension-sandbox

How to Use the Chrome Extension

  1. Open chrome://extensions/ in Chrome browser
  2. Load the print_req_res directory from "Load unpacked extension"
  3. Open Chrome DevTools
  4. Open https://example.com/
  5. Request and response are output to the Console tab via console.log()

Chrome Extension Runtime Screenshot

console.log request, response | Chrome Extension

That’s all from the Gemba.

Reference Information