关于javascript:google chrome extension :: console.log()来自后台页面?

google chrome extension :: console.log() from background page?

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

但是,由于后台页面没有直接从弹出页面运行,因此它不包含在控制台中。

有没有办法在后台页面中显示console.log()以显示在弹出页面的控制台中?

有没有办法,从后台页面调用弹出页面中的一个函数?


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

要访问与您的扩展名对应的后台页面,请打开Settings / Extensions或打开新选项卡并输入chrome://extensions。你会看到这样的截图。

Chrome extensions dialogue

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


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

这意味着,在弹出页面中,您可以这样做:

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

为了更容易使用:

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

现在,如果您想在内容脚本中执行相同操作,则必须使用Message Passing来实现此目的。原因是,它们都属于不同的领域,这是有道理的。 Message Passing页面中有许多示例供您查看。

希望能清除一切。


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

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


您仍然可以使用console.log(),但它会被记录到单独的控制台中。
要查看它 - 右键单击??扩展图标并选择"检查弹出窗口"。


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

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


如果要登录活动页面的控制台,请尝试此操作:

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


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

打开日志:

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


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

1
2
3
4
function log(...args) {
  console.log(...args);
  chrome.extension.getBackgroundPage().console.log(...args);
}

当我调用log("这是我的日志")时,它将在弹出控制台和后台控制台中编写消息。

优点是能够在不必更改代码的情况下更改日志的行为(例如禁用生产日志等)


关于原始问题,我想补充Mohamed Mansour接受的答案,即还有一种方法可以使这项工作反过来:

您可以使用chrome.extension.getViews()调用从后台页面/脚本中访问其他扩展页面(即选项页面,弹出页面)。如此处所述。

1
2
3
4
5
6
7
8
9
 // 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;
}