Get network data in chrome extension

Question

I have a chrome extenison but i can't figure out how to access the data in the devtools network tab and send to the popup. Any suggestion? it's basically a bug reporting chrome extension where you can take screenshots, create issue, and I need the network log (and/or console)

manifest.json

{
  "manifest_version": 2,
  "name": "my-chrome-extension",
  "description": "Chrome Extension for report bug",
  "version": "1.0",
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": false
  },
  "icons": {
    "16": "./icon.png",
    "36": "./icon.png",
    "48": "./icon.png",
    "120": "./icon.png"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "js/vendor.js", "js/content_script.js"
      ]
    }
  ],
  "web_accessible_resources": [
    "inject-script.js",
    "js/inject-script.js"
  ],
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "PerfWatch"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "storage"
  ]
}

You cant access it directly. Only via API like with webRequest via bg script. Example: `chrome.webRequest.onBeforeRequest.addListener((details) => { if(details.url.indexOf("Target") && details.method === "OPTIONS/..." && details.initiator.indexOf("Source"){ chrome.tabs.sendMessage(details.tabId, { message: "xyz" }); } })` — Red_Baron, Apr 21 '22 at 15:07
@Red_Baron Thank for the answer. In bg script the "chrome.webRequest.onBeforeRequest.addListener" never get called :/ — Krisztián Maurer, Apr 22 '22 at 08:52

score 0 · Answer 1 · answered Apr 22 '22 at 09:11

You cant access it directly. Only via API like webRequest via bg script.

Example:

chrome.webRequest.onBeforeRequest.addListener((details) => {
     //This identifies a redirect to another page
    if (details.url.indexOf("Target") && details.method === "OPTIONS/..." && details.initiator.indexOf("Source")) {
        chrome.tabs.sendMessage(details.tabId, {
            message: "xyz"
        });
    }
})

Your manifest.json must include the webRequest permission in order to access the webRequests:

{
  "manifest_version": 2,
  "name": "my-chrome-extension",
  "description": "Chrome Extension for report bug",
  "version": "1.0",
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": false
  },
  "icons": {
    "16": "./icon.png",
    "36": "./icon.png",
    "48": "./icon.png",
    "120": "./icon.png"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "js/vendor.js", "js/content_script.js"
      ]
    }
  ],
  "web_accessible_resources": [
    "inject-script.js",
    "js/inject-script.js"
  ],
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "PerfWatch"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "storage",
    "webRequest"
  ]
}

Hint: There are additional APIs like webNavigation and webRequestBlocking if you need more funtionallity.

Yes, I had gave the permissions, sorry for not mentioning. Same problem — Krisztián Maurer, Apr 22 '22 at 09:18
Which details do you need exactly - "details from network tab" could be many. Do you have your desired URLs within the webRequest? — Red_Baron, Apr 22 '22 at 09:30
I need all response on all url and access to this data in the popup. I tried this filter {urls: [""]} (I will need onCompleted instead of onBeforeRequest probably) — Krisztián Maurer, Apr 22 '22 at 09:51
Then its a possible duplicate of this: https://stackoverflow.com/questions/18534771/chrome-extension-how-to-get-http-response-body — Red_Baron, Apr 22 '22 at 09:56

Get network data in chrome extension

1 Answers1