Chrome扩展中content.js的日志无法显示的原因是什么？

核心原因 #

content.js 是注入到当前网页环境中的脚本，它的日志会输出到网页自身的开发者工具控制台，而非扩展后台页面的控制台。你能看到 background.js 的日志，说明你打开的是扩展后台的控制台，但没查看目标网页的控制台，所以看不到 content.js 的输出。

解决步骤 #

• 打开注入了 content.js 的目标网页
• 按下 F12 或右键选择「检查」，打开网页的开发者工具
• 切换到「Console」标签页，此时点击页面元素，就能看到 content.js 里的 console.log 输出了

额外技巧：让后台控制台也能看到content.js日志 #

如果想在扩展后台控制台同步查看 content.js 的日志，可以通过消息传递把日志内容传给 background.js 代为输出：

修改后的 content.js：

document.addEventListener("click", () => {
  const logContent = "some log which is not displayed";
  console.log(logContent); // 网页控制台输出
  chrome.runtime.sendMessage({
    type: "click_event",
    log: logContent
  });
})

修改后的 background.js：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.type == "click_event") {
    console.log("click event captured in current webpage");
    if (request.log) {
      console.log("Content脚本日志:", request.log); // 后台控制台输出
    }
  }
});

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