开发Chrome扩展：如何仅在DevTools开启时运行及直接与页面通信？

需求背景 #

开发Chrome扩展，在DevTools中新增面板，用于可视化宿主页面发送的postMessage数据。例如宿主页面通过以下代码定时发送消息：

setInterval(() => window.postMessage('Hi'), 1000)

尝试直接通过chrome.devtools.inspectedWindow监听事件失败，因为该对象没有addEventListener方法：

// 无效代码：chrome.devtools.inspectedWindow无addEventListener方法
chrome.devtools.inspectedWindow.addEventListener('message', (msg) => {
  console.log(msg)
})

官方给出的标准流程是：content_script捕获宿主消息 → 转发至Background Service Worker → 再转发至devtools_page。但该方案存在资源浪费问题：无论DevTools面板是否开启，content_script和Service Worker都会注入所有页面。

问题解答 #

a) 是否存在DevTools面板直接与宿主页面通信的方式？ #

存在。可以通过按需注入content_script+端口直接通信的方式跳过Background Service Worker中转，实现DevTools与宿主页面的直接消息传递：

1. DevTools面板初始化时注入content_script：
   在devtools页面脚本中，监听面板显示事件，仅当面板打开时，向当前标签页注入content_script：

// devtools.js
chrome.devtools.panels.create('消息监控', '', 'panel.html', (panel) => {
  panel.onShown.addListener(() => {
    // 仅在面板显示时注入content_script到当前标签
    chrome.scripting.executeScript({
      target: { tabId: chrome.devtools.inspectedWindow.tabId },
      files: ['content.js']
    });

    // 建立与content_script的端口连接
    const port = chrome.runtime.connect({ name: 'devtools-message-channel' });
    // 接收来自content_script的宿主消息并展示
    port.onMessage.addListener((msg) => {
      if (msg.type === 'HOST_POST_MESSAGE') {
        console.log('捕获宿主消息:', msg.data);
        // 此处可将消息渲染到DevTools面板UI
      }
    });
  });
});

2. content_script捕获宿主消息并转发：
   注入的content_script监听宿主页面的message事件，通过端口直接发送给DevTools面板：

// content.js
window.addEventListener('message', (event) => {
  // 可选：仅处理宿主页面自身发送的消息
  if (event.source === window) {
    const port = chrome.runtime.connect({ name: 'devtools-message-channel' });
    port.postMessage({
      type: 'HOST_POST_MESSAGE',
      data: event.data
    });
  }
});

这种方式无需经过Background Service Worker中转，消息直接在content_script和DevTools面板之间传递，效率更高。

b) 是否能仅在DevTools面板开启时运行service_worker和content_script？ #

可以实现仅在DevTools面板开启时加载相关组件：

• 按需注入content_script：不在manifest.json的content_scripts字段中声明自动注入，而是通过上述chrome.scripting.executeScript方法，仅当DevTools面板显示时才向当前标签页注入content_script，避免无差别注入所有页面。

• Background Service Worker优化：Service Worker本身是事件驱动的，只有在有事件触发时才会激活运行，闲置时会自动休眠。如果仅在DevTools面板开启时才触发消息传递相关事件，Service Worker不会持续占用资源。甚至可以通过上述端口通信方案完全绕过Service Worker，进一步减少资源消耗。

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