Ask Your Question

Retrieve all the resources of a webpage through a Chrome extension.

asked 2023-02-09 11:00:00 +0000

bukephalos gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted

answered 2021-05-04 15:00:00 +0000

plato gravatar image

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": [

// panel.html
<!DOCTYPE html>
    <title>Webpage Resources</title>
    <script src="panel.js"></script>

// 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;

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.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer

Question Tools


Asked: 2023-02-09 11:00:00 +0000

Seen: 19 times

Last updated: May 04 '21