通过浏览器插件cdp协议获取网页api部分网址响应数据原理(mv3版)

完善一些逻辑连接方式和断开方式

//.js 
const aURL = '监控的url';//需要的监控网址URL
let debuggingTabId = null;//连接tabid
let networkEventListener = null;//监控函数
var shuju=null;//响应的数据

// ===================================================================
// 核心修改：监听 detach 事件，这是处理“手动断开”的关键
// ===================================================================
chrome.debugger.onDetach.addListener((source, reason) => {
  console.log(`断开: ${reason}.`);
  
  // 检查这个分离事件是否来自我们正在调试的标签页
  if (source.tabId === debuggingTabId) {
    // 执行清理操作
    performCleanup();
  }
});

// ===================================================================
// 将清理逻辑封装到独立函数中
// ===================================================================
function performCleanup() {
  if (networkEventListener) {
    chrome.debugger.onEvent.removeListener(networkEventListener);
    networkEventListener = null;
    console.log("清除监控.");
  }
  
  // 重置状态
  debuggingTabId = null;
}


function startDebugging(tabId) {
  if (debuggingTabId) {
    console.log("Already debugging another tab.");
    return;
  }
  debuggingTabId = tabId;

  // 步骤 1: 附加调试器
  chrome.debugger.attach({ tabId }, '1.3', () => {
    if (chrome.runtime.lastError) {
      console.error("Step 1 Failed: Attach debugger", chrome.runtime.lastError.message);
      chrome.runtime.sendMessage({ action: 'error', error: `Failed to attach: ${chrome.runtime.lastError.message}` });
      // 如果附加失败，也要清理状态
      performCleanup();
      return;
    }
    console.log("连接开始");

    // 步骤 2: 监听事件
    networkEventListener = (source, method, params) => {
      if (source.tabId !== debuggingTabId) return;

      if (method === 'Network.responseReceived') {
        const { requestId, response } = params;
        if (response.url.includes(aURL)) {
          console.log(`响应的Request ID: ${requestId}`);

          // 步骤 5: 调用 getResponseBody
          chrome.debugger.sendCommand(
            source,
            'Network.getResponseBody',
            { requestId: requestId },
            (result) => {
              // 步骤 6: 处理响应体
              if (chrome.runtime.lastError) {
                console.error("Step 6 Failed: Get response body", chrome.runtime.lastError.message);
                chrome.runtime.sendMessage({ action: 'error', error: `Failed to get body: ${chrome.runtime.lastError.message}` });
                return;
              }
              console.log("响应数据");
              
              let bodyContent = result.body;
              if (result.base64Encoded) {
                bodyContent = `Binary content (Base64): ${result.body.substring(0, 100)}...`;
              }
              shuju=bodyContent;
            }
          );
        }
      }
    };
    chrome.debugger.onEvent.addListener(networkEventListener);


    // 步骤 3: 启用 Network 域
    chrome.debugger.sendCommand({ tabId }, 'Network.enable', {}, () => {
      if (chrome.runtime.lastError) {
        console.error("Step 3 Failed: Enable Network domain", chrome.runtime.lastError.message);
        // 如果启用失败，主动断开，onDetach 会处理清理
        chrome.debugger.detach({ tabId });
        return;
      }
      console.log("3333");
    });
  });
}

function detachDebugger() {
    if (debuggingTabId) {
      console.log("主动断开");
      chrome.debugger.detach({ tabId: debuggingTabId });
      performCleanup();
    }
}