谷歌浏览器扩展程序:: console.log（）来自后台页面？

如果我console.log('something');从弹出页面调用，或者包含的任何脚本都可以正常工作。

但是，由于后台页面不是直接在弹出页面上运行的，因此它不包含在控制台中。

有没有一种方法可以使我console.log()在后台页面中显示在弹出页面的控制台中？

有什么方法可以从后台页面在弹出页面中调用函数？

任何扩展页面（内容脚本除外）都可以通过直接访问后台页面chrome.extension.getBackgroundPage()。

这意味着，在弹出页面中，您可以执行以下操作：

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

为了使其更易于使用：

var bkg = chrome.extension.getBackgroundPage();
bkg.console.log('foo');

现在，如果要在内容脚本中执行相同的操作，则必须使用消息传递来实现。原因是，它们都属于不同的域，这很有意义。消息传递页面中有许多示例供您检出。

希望能清除一切。

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

要访问与您的扩展相对应的背景页面，请打开Settings / Extensions或打开一个新标签，然后输入chrome://extensions。您将看到类似此屏幕截图的内容。

在您的扩展程序下，单击链接background page。这会打开一个新窗口。对于上下文菜单示例，窗口标题为：_generated_background_page.html。

为了直接回答您的问题，当您console.log("something")从后台调用时，此消息会记录到后台页面的控制台中。要查看它，您可以转到chrome://extensions/并inspect view在扩展名下单击它。

当您单击弹出窗口时，它将被加载到当前页面中，因此console.log应该在当前页面中显示日志消息。

您仍然可以使用console.log（），但是它会登录到单独的控制台中。为了查看它-右键单击扩展图标，然后选择“检查弹出窗口”。

最简单的解决方案是在文件顶部添加以下代码。而且您可以像往常一样使用所有完整的Chrome控制台API。

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

const log = chrome.extension.getBackgroundPage().console.log;
log('something')

打开日志：

• 打开：chrome：// extensions /
• 详细信息>背景页面

如果要登录到活动页面的控制台，请尝试以下操作：

chrome.tabs.executeScript({
    code: 'console.log("addd")'
});

关于原始问题，我想补充一下穆罕默德·曼苏尔（Mohamed Mansour）接受的答案，即还有一种方法可以使这项工作与之相反：

您可以访问其他扩展页（即选项页，弹出页）背景页/脚本中使用的chrome.extension.getViews()电话。如上所述这里。

 // overwrite the console object with the right one.
var optionsPage = (  chrome.extension.getViews()  
                 &&  (chrome.extension.getViews().length > 1)  ) 
                ? chrome.extension.getViews()[1] : null;

 // safety precaution.
if (optionsPage) {
  var console = optionsPage.console;
}

这是一篇很旧的文章，已经有了很好的答案，但我补充了两点。我不喜欢使用console.log，而是想使用一个记录到控制台的记录器，或者我想在任何地方使用的记录器，所以我有一个定义日志功能的模块，像这样

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

当我调用log（“ this is my log”）时，它将同时在弹出控制台和后台控制台中写入消息。

优点是无需更改代码即可更改日志的行为（例如，禁用生产日志等）。

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

chrome.extension.getBackgroundPage（）。console.log（'hello'）;

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

前进！！