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

Posted 2023-02-22

【中文标题】来自后台页面的谷歌浏览器扩展::console.log()？

【英文标题】：google chrome extension :: console.log() from background page?

【发布时间】：2011-04-19 06:04:33

【问题描述】：

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

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

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

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

【问题讨论】：

你说“它工作正常”到底是什么意思？在哪里读“东西”？在弹出窗口中使用 console.log() 不应在加载页面的控制台中打印 - 因为问题是 2 年了，API 是否发生了变化？

如果您在浏览器操作中右键单击 -> 检查弹出窗口，您将获得扩展程序的开发人员工具页面。 popup.js 将打印日志。

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

【参考方案1】：

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 供您参考。

【参考方案2】：

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

【参考方案3】：

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

【参考方案4】：

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

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

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

加油！！

【参考方案5】：

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

打开日志：

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

【讨论】：

您介意为您的命令提供更多解释吗？

【参考方案6】：

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

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

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

【讨论】：

干杯，我知道这一点，但是直接打开后台页面不会从弹出页面调用任何内容。

打开后台页面不输出任何控制台日志信息。

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

@Layke 打开后台页面后，您仍然需要写入其中，即直接使用后台页面中的 console.log() ，或者如 mohamed-mansour 所说，在后台调用相同的方法getBackgroundPage() 返回的对象

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

【参考方案7】：

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

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

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

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

【参考方案8】：

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

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

【讨论】：

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

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

【参考方案9】：

任何扩展页面（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页面中有很多例子供你查看。

希望一切顺利。

【讨论】：

@MohamedMansour，这个解决方案对我不起作用。如果我alert()chrome.extension.getBackgroundPage()，我得到null。我需要设置权限或进行其他配置吗？

@gwg 你的扩展有后台页面吗？根据文档“如果扩展没有背景页面，则返回 null。” developer.chrome.com/extensions/…

这非常适合我自己的控制台消息。谢谢。关于如何从 popup.js 中也产生异常等的任何想法出现在 background.js 的控制台中？

【参考方案10】：

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

【参考方案11】：

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

【参考方案12】：

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

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

【讨论】：

我的扩展没有这个，但是其他扩展有！如何启用它

如果你像我一样有 3 台显示器......请转动你的头。它在我的显示器阵列的另一端打开 ChromeDevTools，但我没有看到它。

【参考方案13】：

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

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