谷歌浏览器扩展程序：如何在后台页面使用console.log()输出日志？

Question

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

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

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

是否有任何方法可以从后台页面调用弹出页面中的函数？

- Hailwood

---

你说“它工作得很好”是什么意思？你在哪里读取“something”？在弹出窗口中使用console.log()不应该在已加载页面的控制台中打印 - 因为这个问题已经有2年了，API改变了吗？ - anddam

如果你在浏览器操作上右键单击->检查弹出，你会得到一个针对你的扩展程序的开发者工具页面。popup.js 会将日志打印到其中。 - not_shitashi

@not_shitashi的评论应该是这个问题的答案。 - gabe

Answer 1

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

要访问与您的扩展程序对应的后台页面，请打开“设置/扩展程序”或打开一个新标签页并输入“chrome://extensions”。您将看到类似于此屏幕截图的内容：

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

- serg

---

谢谢，我知道这一点，但是直接打开背景页面不会从弹出页面调用任何内容。 - Hailwood

打开背景页面不会输出任何控制台日志信息。 - Layke

@Hailwood 打开后台页面不会调用任何东西，但会显示后台页面的控制台。 - anddam

@Layke 一旦您打开了后台页面，仍然需要在其中编写代码，即直接从后台页面使用 console.log() 或者像 mohamed-mansour 所说的那样，在通过 getBackgroundPage() 返回的对象上调用相同的方法。 - anddam

我发现这个问题是在搜索如何检查扩展输出（像 OP 一样）时找到的，并且发现这个答案非常有用，因为它允许我在不经过内容页面的情况下检查控制台日志记录。 - anddam

这个链接在Chrome的更新版本中已经更新为“service worker”。 - Ninjakannon

Answer 2

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

这意味着，在弹出窗口页面中，您只需要执行以下操作：

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

为了更方便使用：

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

现在，如果您想在内容脚本中执行相同操作，您需要使用消息传递来实现。这是因为它们属于不同的域，这是有意义的。在消息传递页面中有许多示例供您查看。

希望这能澄清一切。

- Mohamed Mansour

---

@MohamedMansour，这个解决方案对我无效。如果我使用alert()并获取chrome.extension.getBackgroundPage()，我会得到null。我需要设置权限或进行其他配置吗？ - jds

@gwg，你的扩展程序有后台页面吗？根据文档，“如果扩展程序没有后台页面，则返回null。”https://developer.chrome.com/extensions/extension#method-getBackgroundPage - Mohamed Mansour

这对于我自己的控制台消息完美地运作。谢谢。您有什么想法，如何使来自popup.js的异常等也出现在background.js的控制台中？ - steven_noble

Answer 3

回答您的问题，当您从后台调用console.log("something")时，该消息将被记录到后台页面的控制台中。要查看它，您可以前往chrome://extensions/并在您的扩展下点击检查视图。

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

- songyy

---

我的扩展程序没有那个功能，其他扩展程序却有！我该如何启用它？ - Ahmed Eid

如果你和我一样有三个显示器……那就扭头看一下吧。我在我的显示器阵列的另一端打开了ChromeDevTools，但我没有看到它。 - mpen

Answer 4

你仍然可以使用console.log()，但它将被记录到一个单独的控制台中。 要查看它 - 右键单击扩展图标并选择“检查弹出窗口”。

- LachoTomov

Answer 5

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

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

- dd .

Answer 6

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

打开日志：

• 打开：chrome://extensions/
• 详细信息 > 后台页面

- O Fallante

---

您介意提供更多关于您的命令的解释吗？ - inetphantom

Answer 7

如果您想将日志记录到当前页面的控制台，请尝试以下方法：

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

- Faz

---

当前标签页需要主机权限。 - Xan

您可以将其添加以进行测试，如果发布插件，则可以将其删除。 - Faz

Answer 8

2022年更新：使用Manifest 3和service worker，您只需要转到chrome://extensions，单击您的扩展程序上的详情按钮，找到：检查视图 ->Service Worker。

- Michal S

Answer 9

这是一个旧帖子，已经有很好的答案了，但是我想加上我的两分。我不喜欢使用console.log，我宁愿使用一个记录器来记录到控制台或者任何我想要的地方，因此我有一个定义日志函数的模块，类似于这个

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

当我调用log("this is my log")时，它将在弹出式控制台和后台控制台中都写入消息。

优点是能够在不必更改代码的情况下更改日志的行为（例如在生产环境中禁用日志等）。

- Denis G.

Answer 10

关于原问题，我想补充 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;
}

- WoodrowShigeru