谷歌浏览器扩展 :: console.log() 来自后台页面？

Question

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

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

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

有什么办法可以从后台页面调用弹出页面中的函数吗？

Answer 1

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

要访问与您的扩展程序相对应的后台页面，请打开Settings / Extensions或打开一个新选项卡并输入chrome://extensions 。 您将看到类似此屏幕截图的内容。

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

Answer 2

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

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

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

为了更容易使用：

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

现在如果你想在内容脚本中做同样的事情，你必须使用消息传递来实现这一点。 究其原因，它们都属于不同的领域，这是有道理的。 消息传递页面中有许多示例供您查看。

希望能清除一切。

Answer 3

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

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

Answer 4

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

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

Answer 6

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

打开日志：

• 打开：chrome://extensions/
• 详情 > 背景页面

Answer 7

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

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

Answer 8

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

Answer 9

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

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

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

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

Answer 10

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

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

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

加油！！

Answer 11

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

Answer 12

目前使用 Manifest 3 和 Service Worker，您只需要转到Extensions Page / Details并单击Inspect Views / Service Worker 。

Answer 13

chrome.extension.getBackgroundPage()我得到null

和积累文件，

后台页面被 MV3 中的 Service Worker 替换。

• 更换background.page或background.scripts与background.service_worker manifest.json中。 请注意， service_worker 字段采用字符串，而不是字符串数组。

清单文件

{
  "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}`)
    }
  })

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