chrome.debugger.attach()无法附加当前标签页，报跨扩展URL访问错误

核心错误原因 #

1. 错误获取目标标签页：你用chrome.tabs.query({active: true})获取当前活跃标签，但这个标签不一定是内容脚本所在的标签（比如用户切换了标签）。如果该活跃标签是其他扩展的页面（chrome-extension://协议），你的扩展没有权限调试其他扩展的页面，就会触发Cannot access a chrome-extension:// URL of different extension错误。
2. 未定义sleep函数：代码中调用了sleep(50)但没有定义该函数，会导致执行中断。
3. detach操作未处理异常：如果目标标签页未被附加调试器，执行detach会抛出错误，中断后续逻辑。

修复步骤 #

1. 正确获取内容脚本所在的标签ID #

利用消息监听函数的sender参数，直接获取内容脚本所在标签的ID，无需查询活跃标签：

chrome.runtime.onMessage.addListener(async (req, sender, sendResponse) => {
  if (req.name == "test") {
    // 直接用sender.tab.id获取内容脚本所在标签的ID
    const tabId = sender.tab.id;
    const text = "Hello there mate";
    // ...后续逻辑
  }
});

2. 定义sleep函数 #

在background脚本中添加sleep函数的实现：

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

3. 处理detach的异常情况 #

用try-catch包裹detach操作，避免因未附加调试器导致的错误：

try {
  await chrome.debugger.detach({ tabId });
  console.log("已成功解除调试器附加");
} catch (e) {
  console.log("目标标签未附加调试器，跳过解除操作:", e.message);
}

4. 确保manifest权限配置 #

在manifest.json中声明所需权限：

{
  "permissions": ["debugger", "tabs", "activeTab"],
  // 其他manifest配置...
}

修复后的完整代码 #

// 定义sleep函数
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

chrome.runtime.onMessage.addListener(async (req, sender, sendResponse) => {
  if (req.name == "test") {
    const tabId = sender.tab.id;
    const text = "Hello there mate";

    // 处理detach异常
    try {
      await chrome.debugger.detach({ tabId });
      console.log("已解除调试器附加");
    } catch (e) {
      console.log("未附加调试器，跳过detach:", e.message);
    }

    console.log("before attach");
    try {
      await chrome.debugger.attach({ tabId }, "1.2");
      console.log("after attach");

      await chrome.debugger.sendCommand({ tabId }, "Runtime.enable");
      await chrome.debugger.sendCommand({ tabId }, "DOM.enable");

      for (const char of text) {
        console.log(char);
        await chrome.debugger.sendCommand({ tabId }, "Input.dispatchKeyEvent", {
          type: "keyDown",
          text: char
        });
        await sleep(50);
        await chrome.debugger.sendCommand({ tabId }, "Input.dispatchKeyEvent", {
          type: "keyUp",
          text: char
        });
        await sleep(50);
      }
      sendResponse(tabId);
    } catch (attachError) {
      console.error("调试器附加或命令执行失败:", attachError);
      sendResponse({ error: attachError.message });
    }
  }
});

额外注意事项 #

• 调试器只能附加到普通网页或你自己的扩展页面，无法调试其他扩展的页面，所以确保内容脚本注入的目标页面不是其他扩展的页面。
• 执行调试器操作时，最好用try-catch包裹所有异步操作，便于捕获和排查错误。

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