Question

我正在尝试编写一个小的扩展程序，以在页面底部显示一个弹出窗口，该弹出窗口指示控制台中是否存在任何警告或错误（没有打开开发工具，这在小型显示器上可能很烦人）

经过一番研究，我发现无法直接从控制台读取信息。但是建议用新方法替换console.log，console.warn等，这些新方法将捕获调用，然后才调用原始方法。

这是我content.js所在的位置：

window.onload = () => {
  const logs = []
  let listener = null

  const methods = ['log', 'info', 'warn', 'error']

  methods.forEach(method => {
    // Saving the old method
    const save = console[method].bind(console)
    // Replacing the old method
    console[method] = (...args) => {
      save(...args)
      logs.push({ method, args })
      listener && listener()
    }
  })

  const popup = document.createElement('div')
  popup.classList.add('pinned-console-popup')
  document.body.appendChild(popup)

  const apply = () => {
    popup.classList.remove('warn')
    popup.classList.remove('error')
    const warnCount = logs.filter(({ method }) => method === 'warn').length
    const errorCount = logs.filter(({ method }) => method === 'error').length
    if(warnCount)
      popup.classList.add('warn')
    if(errorCount)
      popup.classList.add('error')
    popup.textContent = `${errorCount || warnCount || 0}`
  }

  apply()
  listener = apply
}

我不知道为什么，但是发生了一些奇怪的事情：方法被替换了，如果我在forEach之后检查它们，我可以看到它们被替换了。但是，如果我从其他任何地方发出日志或警告，则console仍然具有旧方法，因此此处不会触发任何操作。为什么？

Chrome扩展程序：捕获控制台日志，不可能吗？

0 个答案: