Chrome扩展内容脚本如何捕获原页面触发的请求错误？

我正在编写一款Chrome扩展，通过内容脚本查找网页中的按钮并点击，代码如下：

document.evaluate(HERE_MY_XPATH, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)
    .singleNodeValue
    .click()

点击按钮后会触发原页面的内部流程，发送HTTP请求，该请求有时会因服务器端错误失败。在浏览器控制台中可以看到类似POST https://www.mypage.com/any_request/ 429的信息及堆栈追踪，该错误由点击按钮触发。

如何对这种发生在内容脚本外部的错误做出响应？

我已尝试以下方法，但均未成功：

window.addEventListener('error', function(e) {
    // my code
});

window.onerror = function(error, url, line) {
    // my code
};

try {
    buttonNodeIWantToClick.click();
} catch (error) {
    // my code
}

内容脚本是从popup动态加载的，代码如下：

chrome.scripting.executeScript(
    {
        target: {tabId: id},
        files: ['scripts/content.js']
    })

问题的核心在于：window.onerror和try/catch只能捕获JavaScript代码抛出的未处理异常，而429这类HTTP请求错误属于网络响应层面的问题，并不会直接触发JS异常，所以你之前试的方法都无效。下面是两种可行的解决思路：

1. 拦截页面的Fetch/XHR请求 #

内容脚本可以通过重写页面的fetch和XMLHttpRequest方法，在请求完成后检查响应状态，捕获429这类错误：

// 重写fetch方法
const originalFetch = window.fetch;
window.fetch = async (...args) => {
  const response = await originalFetch(...args);
  // 检查响应状态，捕获429错误
  if (!response.ok && response.status === 429) {
    // 这里编写你的错误处理逻辑
    console.log('捕获到429请求错误:', args[0]);
    // 可执行通知popup、重试请求等操作
  }
  return response;
};

// 重写XMLHttpRequest方法
const originalXHROpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
  this.addEventListener('load', () => {
    if (this.status === 429) {
      // 处理429错误
      console.log('XHR请求出现429错误:', url);
    }
  });
  originalXHROpen.call(this, method, url);
};

把这段代码放在内容脚本最前面，确保在页面原有代码加载前完成重写，就能拦截到按钮触发的请求错误。

2. 使用Chrome扩展的网络请求监听API #

通过Chrome的chrome.webRequestAPI，可以在扩展后台监听所有页面的网络请求，捕获指定URL的429错误：
首先在manifest.json中添加对应权限：

{
  "permissions": ["webRequest", "https://www.mypage.com/*"]
}

然后在后台脚本（如background.js）中添加监听逻辑：

chrome.webRequest.onCompleted.addListener(
  (details) => {
    if (details.statusCode === 429 && details.method === 'POST') {
      // 匹配目标请求URL
      if (details.url.includes('https://www.mypage.com/any_request/')) {
        // 向对应标签页的内容脚本发送错误通知
        chrome.tabs.sendMessage(details.tabId, { type: 'REQUEST_429_ERROR', url: details.url });
      }
    }
  },
  { urls: ["https://www.mypage.com/*"] },
  ["responseHeaders"]
);

最后在内容脚本中监听来自后台的消息：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'REQUEST_429_ERROR') {
    // 执行你的错误处理逻辑
    console.log('收到429错误通知:', message.url);
  }
});

这种方法无需修改页面请求逻辑，适合全局监控特定请求的场景。

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