谷歌chrome扩展::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.

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

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

为了直接回答你的问题，当你从后台调用console.log("something")时，这条消息被记录到后台页面的控制台。要查看它，你可以去chrome://extensions/，然后在你的扩展名下点击inspect view。

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

关于最初的问题，我想在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;
}

试试这个，如果你想登录到活动页面的控制台:

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

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

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

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

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

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

打开日志:

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

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

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

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

继续! !

要在调试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')

目前使用Manifest 3和service worker，你只需要去Extensions Page / Details，然后单击Inspect Views / Service Worker。

chrome.extension.getBackgroundPage()我得到null

根据文档，

MV3中的后台页面由service worker替换。

• 将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}`)
}
})

我创建了一个开源供你参考。