要从后台页面获取控制台日志，您需要在后台页面background.js中编写以下代码片段。

chrome.extension.getBackgroundPage().console.log('hello');

然后加载扩展并检查其后台页面以查看控制台日志。

目前使用Manifest 3和service worker，你只需要进入扩展页面/详细信息，然后单击Inspect Views / service worker。

这是一个老帖子，已经有很好的答案，但我补充我的两点。我不喜欢使用console.log，我宁愿使用日志记录器记录到控制台，或任何我想要的地方，所以我有一个模块定义了一个日志函数，有点像这样

function log(...args) {
  console.log(...args);
  chrome.extension.getBackgroundPage().console.log(...args);
}

当我调用日志时(“这是我的日志”)，它将在弹出式控制台和后台控制台中写入消息。

这样做的好处是可以在不更改代码的情况下更改日志的行为(比如禁用生产日志等)。

要在调试chrome扩展时查看控制台，您应该使用chrome.extension. getbackgroundpage ();API，之后你可以像往常一样使用console.log():

chrome.extension.getBackgroundPage().console.log('Testing');

这是很好的，当你使用多个时间，所以你创建自定义函数:

  const console = {
    log: (info) => chrome.extension.getBackgroundPage().console.log(info),
  };
  console.log("foo");

你只在任何地方使用console.log('learnin')

最简单的解决方案是在文件顶部添加以下代码。然后，你可以使用所有完整的Chrome控制台api，因为你会正常。

 console = chrome.extension.getBackgroundPage().console;
// for instance, console.assert(1!=1) will return assertion error
// console.log("msg") ==> prints msg
// etc

如果单击扩展列表中的"background.html"链接，就可以打开后台页面的控制台。

要访问对应于您的扩展的后台页面，打开Settings /extensions或打开一个新选项卡并输入chrome://extensions。你会看到类似这样的截图。

在您的扩展单击链接背景页。这将打开一个新窗口。 对于上下文菜单示例，窗口的标题为:_generated_background_page.html。