dotproto · September 8, 2021 03:33
diff --git a/devtools.html b/devtools.html
 <!DOCTYPE html>
 <script src="devtools.js"></script>
diff --git a/devtools.js b/devtools.js
 chrome.devtools.panels.create('DevTools Demo', '', 'panel.html');
diff --git a/manifest.json b/manifest.json
 {
  "name": "DevTools network request monitor",
  "version": "1.0",
  "manifest_version": 3,
  "devtools_page": "devtools.html"
 }
diff --git a/panel.html b/panel.html
 <!DOCTYPE html>
 <style>
  details > summary:hover {
    background: mistyrose;
    cursor: pointer;
  }
  details[open] {
    background: linen;
  }
  details > summary {
    list-style: none;
    font-family: monospace;
    white-space: nowrap;
  }
  details > summary::marker {
    display: none;
  }
 </style>
 <script src="panel.js"></script>
diff --git a/panel.js b/panel.js
 chrome.devtools.network.onRequestFinished.addListener((data) => {
  let summary = document.createElement('summary');
  summary.innerHTML = `<strong>${data.request.method}</strong>&nbsp;${data.request.url}`;

  let detailsBody = document.createElement('pre');
  detailsBody.innerText = JSON.stringify(data, null, 2);

  let details = document.createElement('details');
  details.append(summary, detailsBody);

  document.body.append(details);
  console.log(data);
 });

 chrome.devtools.network.onNavigated.addListener((_url) => {
  document.body.innerHTML = '';
 });
	{
	"name": "DevTools network request monitor",
	"version": "1.0",
	"manifest_version": 3,
	"devtools_page": "devtools.html"
	}
	chrome.devtools.network.onRequestFinished.addListener((data) => {
	let summary = document.createElement('summary');
	summary.innerHTML = `<strong>${data.request.method}</strong> ${data.request.url}`;

	let detailsBody = document.createElement('pre');
	detailsBody.innerText = JSON.stringify(data, null, 2);

	let details = document.createElement('details');
	details.append(summary, detailsBody);

	document.body.append(details);
	console.log(data);
	});

	chrome.devtools.network.onNavigated.addListener((_url) => {
	document.body.innerHTML = '';
	});