Chrome扩展调用chrome.debugger.sendCommand失效但控制台运行正常问题

问题原因 #

• tabs.onCreated触发时标签页仅完成了进程初始化，主渲染帧、页面上下文还未完全就绪，此时下发Emulation.setFocusEmulationEnabled命令虽然接口返回成功，但没有有效渲染上下文承接配置，导致配置未实际生效。
• 你按下F12打开DevTools的操作，在旧版Chrome中会触发debugger会话抢占（仅允许单个debugger客户端附加），扩展之前建立的debugger连接被强制断开，之前下发的未生效配置直接失效。你后续在Service Worker控制台手动发命令时，页面已经完全加载，且命令会触发扩展重新附加调试会话，此时下发的配置才能正确作用到已就绪的页面上下文。
• 你之前添加的固定时长setTimeout仍不生效，大概率是因为超时触发时机刚好在DevTools断开扩展调试会话之后，配置还是无法落地。

修复方案 #

调整background.js逻辑，调试器附加成功后先启用Page域监听，等主帧导航完成后再下发聚焦模拟配置，修改后的代码示例如下：

chrome.debugger.onDetach.addListener((source, reason) => {
    console.log("Debugger detached", source, reason);
    // 可选：会话断开后自动重连并重新应用配置
    if (reason === 'target_closed') return;
    chrome.debugger.attach({tabId: source.tabId}, "1.3", () => {
        if (!chrome.runtime.lastError) applyFocusConfig(source.tabId);
    });
});

chrome.tabs.onCreated.addListener((tab) => {
    console.log("Attaching debugger", tab.id);
    chrome.debugger.attach({ tabId: tab.id }, "1.3", () => {
        if (chrome.runtime.lastError) {
            console.log('runtime.lastError', tab.id, chrome.runtime.lastError.message);
            return;
        }
        console.log("Debugger attached", tab.id);
        applyFocusConfig(tab.id);
    });
});

async function applyFocusConfig(tabId) {
    // 先启用Page域监听生命周期事件
    await chrome.debugger.sendCommand({tabId}, "Page.enable");
    // 监听主帧导航完成事件
    chrome.debugger.onEvent.addListener(function listener(source, method, params) {
        if (source.tabId !== tabId || method !== "Page.frameNavigated") return;
        if (params.frame.parentId) return; // 只处理主帧
        // 主帧加载完成后下发聚焦模拟配置
        chrome.debugger.sendCommand({
            tabId: tabId
        }, "Emulation.setFocusEmulationEnabled", {
            enabled: true
        }, (result) => {
            if (chrome.runtime.lastError) {
                console.log(chrome.runtime.lastError.message);
            }
            console.log('Focus emulation applied:', JSON.stringify(result));
        });
        // 移除监听避免重复触发
        chrome.debugger.onEvent.removeListener(listener);
    });
}

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

async function run() {
    chrome.tabs.create({ url: 'about:blank', active: true, index: 0 }).then((tab) => {
        console.log(`Created tab ${tab.id}.`);
    });
}

如果需要在打开DevTools的场景下稳定测试，建议使用Chrome 112及以上版本，该版本开始支持多调试客户端并行附加，不会出现会话被挤掉的问题。

内容的提问来源于stack exchange，提问作者Mark