Revision history [back]
 | 1 | initial version |
To retrieve all the resources of a webpage through a Chrome extension, you can use the chrome.devtools.panels API to create a DevTools panel to display the resources. Here is an example code:
// manifest.json
{
"name": "Webpage Resources",
"version": "1.0",
"description": "Retrieve all resources of a webpage",
"devtools_page": "panel.html",
"permissions": [
"devtools"
]
}
// panel.html
<!DOCTYPE html>
<html>
<head>
<title>Webpage Resources</title>
<script src="panel.js"></script>
</head>
<body>Resources:</body>
</html>
// panel.js
chrome.devtools.panels.create("Webpage Resources", null, "panel.html", function(panel) {
function updatePanel() {
chrome.devtools.inspectedWindow.getResources(function(resources) {
var resourcesList = document.createElement('ul');
resources.forEach(function(resource) {
var resourceItem = document.createElement('li');
resourceItem.textContent = resource.url;
resourcesList.appendChild(resourceItem);
});
document.body.appendChild(resourcesList);
});
}
panel.onShown.addListener(updatePanel);
});
This code creates a DevTools panel with the title "Webpage Resources" and a list to display the resources. When the panel is shown, it calls the chrome.devtools.inspectedWindow.getResources() method to get all the resources of the inspected webpage, and then adds each resource URL to the list.