How to get requests from iframes in Chrome extension using chrome debugger

Question

I'm writing Chtome extension which uses Chrome debugger and collects requests and responses where status code was >= 400. I'm using tabs API to get active tab and attach debugger to it chrome.debugger.attach({ tabId: tabId }, "1.3", () => {...}) and later in the code I'm listening for events:

chrome.debugger.onEvent.addListener((source, method, params) => {

    if (method === "Network.requestWillBeSent") {...})

but it looks that I can capture only requests sent in the context of active tab, but if the tab will have iframes, debugger will not capture that events.

I tried to use code from https://developer.chrome.com/docs/extensions/reference/api/debugger#attach_to_related_targets before calling chrome.debugger.attach but probably doing something wrong as still can't catch iframe requests.

I'm not sure if I'm correctly attaching child sessions or issue is in the something else. Would be very grateful for any suggestion.

Expecting to catch events when iframe on tab with attached debugger sends request.

Answer 1

So, the problem was solved by attaching all possible targets. The only problem is that you might need to know URL of frame which you would like attach to. Hope that it will be usefull for someone.

// To keep track of attached iframes. Use it later to detach
let iframes = {};
let debuggerAttached = false;

chrome.runtime.onMessage.addListener(function (request) {
    // I'm sending "getHar" message to capturing requests/responses
    if (request.message === "getHar") {

        // Sending active Tab ID along the message 
        tabId = request.tabId;
        if (!debuggerAttached) {
          debuggerAttached = true;
          chrome.debugger.getTargets((targets) => {
            if (targets) {
              for (let target of targets) {
                if (target.url.includes("URL_WHICH_YOU_MIGHT_WANT_TO_TRACK")) {
                  iframes[target.id] = target;
                  chrome.debugger.attach({ targetId: target.id }, "1.3", () => {
                    if (chrome.runtime.lastError) {
                      console.error(chrome.runtime.lastError.message);
                      return;
                    }
                    chrome.debugger.sendCommand({ targetId: target.id }, "Network.enable", {}, () => {});
                  });
                }
              }
            }
          });

            chrome.debugger.attach({ tabId: tabId }, "1.3", () => {
              if (chrome.runtime.lastError) {
                console.error(chrome.runtime.lastError.message);
                return;
              }
              chrome.debugger.sendCommand({ tabId: tabId }, "Network.enable", {}, () => {});
              // My function which I use to collect requests
              captureHAR(tabId);
            });
          } else {
            // My function which I use to detach from targets
            saveAndDetach(tabId);
          }
    }
});