chrome.debugger 命令不影响 iframe

Question

我正在尝试制作一个将使用 chrome.debugger api 的 chrome 扩展，但我发现 iframe 不受 chrome.debugger 命令的影响。例如在这个测试扩展中：

ma​​nifest.json

{
  "name": "test",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "service_worker.js"
  },
  "host_permissions": ["*://*/*"],
  "permissions": ["debugger", "tabs"]
}

service_worker.js

chrome.runtime.onInstalled.addListener(async () => {
    run()
});

chrome.runtime.onStartup.addListener(async () => {
    run()
});

chrome.debugger.onDetach.addListener((source, reason) => {
    console.log("detached", source, reason);
});

chrome.tabs.onCreated.addListener((tab) => {
    console.log("attaching", tab);
    chrome.debugger.attach({
        tabId: tab.id
    }, "1.3", null);
});

async function run() {
    console.log('run');
    chrome.tabs.create({
        url: 'about:blank',
        active: true,
        index: 0
    })
    .then(async (tab) => {
        // wait a few seconds to make sure debugger is attached
        await new Promise(resolve => setTimeout(resolve, 2000));
        
        chrome.debugger.sendCommand({
                tabId: tab.id
            },
            'Emulation.setTimezoneOverride',
            { timezoneId: 'America/Adak'},
            (result) => {
                if (chrome.runtime.lastError) {
                    console.log(chrome.runtime.lastError)
                } else {
                    console.log(result)
                }
            }
        );

        chrome.debugger.sendCommand({
                tabId: tab.id
            },
            'Page.enable',
            { enabled: 'true'},
            (result) => {
                if (chrome.runtime.lastError) {
                    console.log(chrome.runtime.lastError)
                } else {
                    console.log(result)
                }
            }
        );

        chrome.debugger.sendCommand({
                tabId: tab.id
            },
            'Page.addScriptToEvaluateOnNewDocument',
            { source: 'Object.defineProperty(window, "testvar", { get: () => 123123123 })'},
            (result) => {
                if (chrome.runtime.lastError) {
                    console.log(chrome.runtime.lastError)
                } else {
                    console.log(result)
                }
            }
        );

        chrome.tabs.update(tab.id, {
            url: 'https://jsfiddle.net/neaxh173/'
        }, function() { });
    });
}

我正在更改时区，并注入一个名为 testvar 的 var，它会打开一个 jsfiddle，它只是这样做：

document.write(new Date().getTimezoneOffset() + ' - ' + typeof testvar)

jsfiddle 结果 iframe 显示了我原来的时区，testvar 是未定义的，但是如果我打开控制台运行：

console.log(new Date().getTimezoneOffset() + ' - ' + typeof testvar)

在主框架上，正确显示为“600 - number”。

如何让 chrome.debugger 命令在所有选项卡框架上工作？

Answer 1

要评估框架中的脚本，需要executionContextId，您可以从Runtime.executionContextCreated 事件中获取。要启用此事件的报告，您必须发送Runtime.enable 命令。

这里是代码 sn-p，它在所有帧中评估一个函数：-

function evaluateScript(contextId, script) {
    chrome.debugger.sendCommand({ tabId: tabId }, 'Runtime.callFunctionOn', {
        arguments: [],
        awaitPromise: true,
        executionContextId: contextId,
        functionDeclaration: script && script.toString(),
        returnByValue: true,
        userGesture: true
    }, (result) => {
        console.log(result)
    })
}


chrome.debugger.onEvent.addListener((source, method, params) => {
    if (method === 'Runtime.executionContextCreated') {
        // evalute script for every execution context
        evaluateScript(params.context.id, () =>  {
           !window.testvar ? Object.defineProperty(window, "testvar", { get: () => 123123123 }) : null
        })
    }
})

// enable reporting of `Runtime.executionContextCreated` events
chrome.debugger.sendCommand({ tabId: tabId }, 'Runtime.enable')