Chrome Extension で request, response を出力する方法

Tadashi Shigeoka ·  Tue, April 7, 2020

Chrome Extension (拡張機能) で request, response を出力する方法をご紹介します。

Chrome

背景 Chrome Extension でネットワーク通信の内容を確認したい

本記事では、ネットワーク通信の request, response の内容を確認する Chrome Extension のサンプルコードをご紹介します。

Chrome Extension の作り方

利用する Chrome Extension API

今回、利用する Chrome Extension API は chrome.devtools.network.onRequestFinished.addListener と chrome.devtools.inspectedWindow.eval の2つです。

Chrome Extension で request, response を出力するサンプルコード

Chrome Extension で request, response を出力するサンプルコードは、以下の GitHub Pull Request に公開していますので、ぜひご覧ください。

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

Chrome Extension の使い方

  1. Chrome ブラウザにて chrome://extensions/ を開く
  2. パッケージ化されていない拡張機能を読み込む から print_req_res ディレクトリを読み込む
  3. Chrome DevTools を開く
  4. https://example.com/ を開く
  5. request, response が Console タブへ console.log() で出力される

Chrome Extension 実行時のスクリーンショット

console.log request, response | Chrome Extension

以上、Chrome Extension で request, response を出力したい、現場からお送りしました。

参考情報