google-chrome-extension - 从 chrome devtools 扩展将调试器附加到工作人员

Question

我试图在我的 chrome devtools 扩展中拦截 ws 消息。

这个问题帮助了我。这正是我所需要的，但唯一的问题是它只有在从页面上下文发送 websocket 消息时才有效（我猜是因为调试器专门附加到该选项卡？）但在页面中我试图拦截ws 连接的消息是在 web worker 中建立的。

我的主要问题是，chrome devtools 扩展中有没有办法将调试器“附加”到网络工作者？或者我在这里遗漏了什么？

谢谢你的帮助。

Answer 1

找到了原因。

我将无法使用chrome.debuggerAPI 拦截我需要的页面中的 WebSockets 帧。

显然，扩展似乎无法访问通过加载的上下文about:，data:并且blob:方案和我想拦截 WebSocket 帧在通过 blob url 加载的工作人员中建立连接。

查看相关的 Chrome 错误：
https ://bugs.chromium.org/p/chromium/issues/detail?id=55084 https://bugs.chromium.org/p/chromium/issues/detail?id=388972

这也是FF中的一个错误：
https ://bugzilla.mozilla.org/show_bug.cgi?id=1475831

Answer 2

在这种情况下，工人被视为与 tabId 目标相关的不同目标：https ://chromedevtools.github.io/devtools-protocol/tot/Target/#method-setAutoAttach

要从 Workers 接收 WebSocket 事件，首先应该发送“Target.setAutoAttach”命令，然后监听“Target.attachedToTarget”事件，然后将调试器附加到 Workers，如下所示：

const version = '1.3';

async function onAttach(debuggeeId) {
  /** Enable receiving 'Target.attachedToTarget' events */
  await chrome.debugger.sendCommand(debuggeeId, 'Target.setAutoAttach', {
    autoAttach: true,
    waitForDebuggerOnStart: true,
    flatten: true,
  }); //
  /** Enable Network events for the current tab */
  chrome.debugger.sendCommand(debuggeeId, 'Network.enable');
}

function allEventHandler(debuggeeId, message, params) {
  /** When workers are created, 'Target.attachedToTarget' events are fired */
  if (message === 'Target.attachedToTarget') {
    /** Attach debugger to workers */
    chrome.debugger.attach(
      { targetId: params.targetInfo.targetId },
      version,
      () => {
        /** Enable Network for workers to receive WebSocket events */
        chrome.debugger.sendCommand(
          { targetId: params.targetInfo.targetId },
          'Network.enable'
        );
      }
    );
  } else {
    console.log(message, params);
  }
}

chrome.debugger.onEvent.addListener(allEventHandler);

/** Click extension icon to attach debugger to the current tab */
chrome.action.onClicked.addListener(function (tab) {
  const tabId = tab.id;
  const debuggeeId = { tabId };
  chrome.debugger.attach(debuggeeId, version, onAttach.bind(null, debuggeeId));
});