Question

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

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

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

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

Answer 1

如果您点击扩展程序列表中的“background.html”链接，则可以打开背景页面的控制台。

要访问与您的扩展程序对应的后台页面，请打开Settings / Extensions或打开新标签页并输入chrome://extensions。你会看到这样的截图。

Chrome extensions dialogue

在您的扩展程序下，点击链接background page。这将打开一个新窗口。对于 context menu sample ，该窗口的标题为：_generated_background_page.html。

Answer 2

任何扩展程序页（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页面中有许多示例供您查看。

希望能清除一切。

Answer 3

要直接回答您的问题，当您从后台呼叫console.log("something")时，会将此消息记录到后台页面的控制台。要查看它，您可以转到chrome://extensions/，然后点击您分机下的inspect view。

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

Answer 4

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

Answer 5

最简单的解决方案是在文件顶部添加以下代码。而且你可以像往常一样使用全部Chrome console api。

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

Answer 6

如果您想登录活动页面的控制台，请尝试此操作：

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

Answer 7

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

打开日志：

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

Answer 8

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

Answer 9

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

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

当我调用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

并累积 documentation,

<块引用>

背景页面被 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}`)
    }
  })

我创建了一个 open-source 供您参考。

谷歌chrome extension :: console.log（）来自后台页面？

13 个答案:

解决方案