如果我从弹出页面调用console.log('something');，或者任何包含的脚本都可以正常工作。
但是，由于后台页面不是直接从弹出页面运行的，因此它不包含在控制台中。
有没有办法让我在后台页面中获得console.log()'s 以显示在弹出页面的控制台中？
有没有办法，从后台页面调用弹出页面中的函数？
【问题讨论】：
标签： javascript google-chrome google-chrome-extension
chrome.extension.getBackgroundPage()我得到null
并累积documentation，
背景页面在 MV3 中被替换为服务工作者。
- 将 manifest.json 中的
background.page或background.scripts替换为background.service_worker。请注意，service_worker 字段采用字符串，而不是字符串数组。
manifest.json
{
"manifest_version": 3,
"name": "",
"version": "",
"background": {
"service_worker": "background.js"
}
}
不管怎样，我不知道如何使用getBackgroundPage，但我找到了另一个解决方案，如下所示，
使用chrome.scripting.executeScript
因此您可以注入任何脚本或文件。直接点击inspect（F12）即可调试功能。
例如
chrome.commands.onCommand.addListener((cmdName) => {
switch (cmdName) {
case "show-alert":
chrome.storage.sync.set({msg: cmdName}) // You can not get the context on the function, so using the Storage API to help you. // https://developer.chrome.com/docs/extensions/reference/storage/
chrome.tabs.query({active: true, currentWindow: true}).then(([tab])=>{
chrome.scripting.executeScript({
target: {tabId: tab.id},
function: () => {
chrome.storage.sync.get(['msg'], ({msg})=> {
console.log(`${msg}`)
alert(`Command: ${msg}`)
})
}
})
})
break
default:
alert(`Unknown Command: ${cmdName}`)
}
})
我创建一个open-source 供您参考。
【讨论】：
目前使用 Manifest 3 和 service worker，您只需转到 Extensions Page / Details 并单击 Inspect Views / Service Worker。
【讨论】：
要在调试 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')
【讨论】：
要从后台页面获取控制台日志，您需要在后台页面 background.js 中编写以下代码 sn-p -
chrome.extension.getBackgroundPage().console.log('hello');
然后加载扩展并检查其背景页面以查看控制台日志。
加油！！
【讨论】：
const log = chrome.extension.getBackgroundPage().console.log;
log('something')
打开日志：
【讨论】：
如果您点击扩展列表中的“background.html”链接，您可以打开后台页面的控制台。
要访问与您的扩展程序对应的后台页面，请打开 Settings / Extensions 或打开一个新标签并输入 chrome://extensions。您将看到类似于此屏幕截图的内容。
在您的扩展程序下单击链接background page。这将打开一个新窗口。
对于 context menu sample，窗口的标题为：_generated_background_page.html。
【讨论】：
这是一篇旧帖子，已经有了很好的答案，但我补充了两点。我不喜欢使用console.log，我宁愿使用记录到控制台或任何我想要的地方的记录器，所以我有一个模块定义了一个有点像这样的日志函数
function log(...args) {
console.log(...args);
chrome.extension.getBackgroundPage().console.log(...args);
}
当我调用 log("this is my log") 时，它会在弹出控制台和后台控制台中写入消息。
优点是能够更改日志的行为而无需更改代码（例如禁用生产日志等...）
【讨论】：
如果你想登录到活动页面的控制台，试试这个：
chrome.tabs.executeScript({
code: 'console.log("addd")'
});
【讨论】：
任何扩展页面（content scripts除外）都可以通过chrome.extension.getBackgroundPage()直接访问后台页面。
这意味着，在popup page 中，您可以这样做：
chrome.extension.getBackgroundPage().console.log('foo');
为了方便使用：
var bkg = chrome.extension.getBackgroundPage();
bkg.console.log('foo');
现在，如果您想在 content scripts 中做同样的事情，您必须使用 Message Passing 来实现。原因，它们都属于不同的领域，这是有道理的。 Message Passing页面中有很多例子供你查看。
希望一切顺利。
【讨论】：
alert()chrome.extension.getBackgroundPage()，我得到null。我需要设置权限或进行其他配置吗？
关于最初的问题，我想在 Mohamed Mansour 接受的答案中补充一点，还有一种方法可以反过来解决这个问题：
您可以通过chrome.extension.getViews() 调用从后台页面/脚本 访问其他扩展页面（即选项页面、弹出页面）。如here所述。
// 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()，但它会被登录到一个单独的控制台。 为了查看它 - 右键单击扩展图标并选择“检查弹出窗口”。
【讨论】：
要直接回答您的问题，当您从后台调用 console.log("something") 时，此消息会记录到后台页面的控制台。要查看它，您可以转到 chrome://extensions/ 并单击您的扩展程序下的 inspect view。
当您单击弹出窗口时，它会加载到当前页面中，因此 console.log 应该在当前页面中显示日志消息。
【讨论】：
最简单的解决方案是在文件顶部添加以下代码。而且您可以像往常一样使用所有完整的Chrome console api。
console = chrome.extension.getBackgroundPage().console;
// for instance, console.assert(1!=1) will return assertion error
// console.log("msg") ==> prints msg
// etc
【讨论】：