Chrome扩展如何获取脚本注入前的控制台加载错误与警告日志？

这个问题我之前做类似的站点监控扩展时也碰到过——常规的控制台API根本没法获取注入脚本之前的历史日志，毕竟控制台本身没有暴露读取历史记录的接口。要解决这个问题，核心思路是在页面加载的最早期注入脚本，重写原生的console方法来拦截所有日志输出，这样不管是页面加载前还是加载后的错误/警告，都能被捕获到。

具体实现步骤 #

1. 配置Content Script的注入时机 #

首先要确保你的扩展脚本在页面任何资源加载前就注入，也就是在manifest.json里设置run_at: document_start：

{
  "content_scripts": [
    {
      "matches": ["https://your-target-site.com/*"],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ]
}

这个配置能让你的脚本在页面DOM开始构建前就执行，不会错过任何早期的控制台日志。

2. 重写Console方法捕获日志 #

在content.js里，我们需要保存原生的console.error和console.warn方法，然后重写它们，在保留原功能的同时把日志发送到后台：

// 先保存原生控制台方法，避免覆盖后丢失原有功能
const originalConsoleError = console.error;
const originalConsoleWarn = console.warn;

// 重写console.error
console.error = function(...args) {
  // 先调用原生方法，保证控制台正常输出
  originalConsoleError.apply(console, args);
  
  // 处理日志参数（把对象转成可序列化的字符串）
  const logMessage = args.map(item => {
    if (typeof item === 'object') {
      // 处理循环引用的简单方案，也可以用更完善的序列化方式
      try {
        return JSON.stringify(item, null, 2);
      } catch (e) {
        return `[Object: ${e.message}]`;
      }
    }
    return String(item);
  }).join(' ');

  // 发送日志到后台脚本
  chrome.runtime.sendMessage({
    type: "CONSOLE_ERROR",
    pageUrl: window.location.href,
    message: logMessage,
    timestamp: Date.now()
  });
};

// 同理重写console.warn
console.warn = function(...args) {
  originalConsoleWarn.apply(console, args);
  
  const logMessage = args.map(item => {
    if (typeof item === 'object') {
      try {
        return JSON.stringify(item, null, 2);
      } catch (e) {
        return `[Object: ${e.message}]`;
      }
    }
    return String(item);
  }).join(' ');

  chrome.runtime.sendMessage({
    type: "CONSOLE_WARN",
    pageUrl: window.location.href,
    message: logMessage,
    timestamp: Date.now()
  });
};

3. 后台脚本接收并存储日志 #

在background.js里，我们监听来自content script的消息，把日志追加到全站错误数组里，还可以做持久化存储：

// 存储全站错误/警告的数组
let siteErrorLogs = [];

// 监听content script发来的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "CONSOLE_ERROR" || message.type === "CONSOLE_WARN") {
    // 把日志对象加入数组
    siteErrorLogs.push({
      type: message.type,
      url: message.pageUrl,
      message: message.message,
      timestamp: new Date(message.timestamp).toISOString()
    });

    // 可选：持久化到Chrome存储，避免扩展重启后丢失数据
    chrome.storage.local.set({ siteErrorLogs }, () => {
      if (chrome.runtime.lastError) {
        console.error("存储日志失败:", chrome.runtime.lastError);
      }
    });
  }
});

额外注意事项 #

• 处理复杂日志对象：如果页面输出的是带循环引用的对象，JSON.stringify会失败，你可以自己实现递归序列化函数，或者用structuredClone（现代浏览器支持）来处理。
• 全局错误捕获补充：除了console的错误，还可以用window.addEventListener('error')和window.addEventListener('unhandledrejection')捕获未处理的全局异常和Promise拒绝，和控制台日志一起收集。
• 权限配置：确保你的扩展在manifest.json里声明了必要的权限，比如"storage"（用于持久化）、目标站点的"host_permissions"等。

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