Skip to content

Instantly share code, notes, and snippets.

@dotproto

dotproto/devtools.html

Created September 8, 2021 03:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dotproto/f191b809bf29b9af86e17f9f730f2d98 to your computer and use it in GitHub Desktop.
Save dotproto/f191b809bf29b9af86e17f9f730f2d98 to your computer and use it in GitHub Desktop.
Download ZIP
DevTools network request monitor. Minimal demo to show how one could use `chrome.devtools.network.onRequestFinished` to monitor request traffic on a given page.
Raw
devtools.html
<!DOCTYPE html>
<script src="devtools.js"></script>
Raw
devtools.js
chrome.devtools.panels.create('DevTools Demo', '', 'panel.html');
Raw
manifest.json
{
"name": "DevTools network request monitor",
"version": "1.0",
"manifest_version": 3,
"devtools_page": "devtools.html"
}
Raw
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>
Raw
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 = '';
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment