如何通过Chrome扩展程序以编程方式模拟页面聚焦状态？

云原生阿岚

2026-8-8

可行，通过Chrome Debugger API实现

可以通过Chrome扩展的chrome.debugger API模拟页面聚焦，和手动启用DevTools的“Emulate a focused page”功能效果完全一致，核心是调用DevTools协议的Emulation.setFocusEmulationEnabled方法。

具体实现步骤：

配置扩展权限
在manifest.json中添加必要权限：

{
  "manifest_version": 3,
  "name": "Focus Emulator",
  "version": "1.0",
  "permissions": ["debugger", "tabs"],
  "background": {
    "service_worker": "background.js"
  }
}

编写后台脚本实现逻辑
在background.js中，通过chrome.debugger连接目标标签页并发送聚焦模拟命令：

// 对指定标签页ID启用聚焦模拟
function enableFocusEmulation(tabId) {
  // 连接到目标标签页的DevTools会话
  chrome.debugger.attach({tabId: tabId}, "1.3", () => {
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError.message);
      return;
    }
    // 发送聚焦模拟命令
    chrome.debugger.sendCommand(
      {tabId: tabId},
      "Emulation.setFocusEmulationEnabled",
      {enabled: true},
      (result) => {
        if (chrome.runtime.lastError) {
          console.error(chrome.runtime.lastError.message);
        } else {
          console.log(`已为标签页 ${tabId} 启用聚焦模拟`);
        }
      }
    );
  });
}

// 示例：监听目标域名标签页加载完成后自动启用
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url.includes('你的目标域名')) {
    enableFocusEmulation(tabId);
  }
});