如何在 Chrome 扩展清单 v3 中调试离屏页面？

Question

我想使用chrome扩展mv3离屏页面来做剪贴板，它可以工作。 但是当我在 offscreen.js 中添加一些日志时，例如

chrome.runtime.onMessage.addListener(handleMessages);

console.log('clipboard')

我在控制台中看不到日志

那么有没有办法在离屏页面进行调试？

Answer 1

执行此操作的最佳方法是转到

chrome://inspect/#other

调试页面并在那里找到屏幕外页面。但是，如果 offsceen 窗口关闭得太快或由于其他原因您无法使用此方法，那么我可以建议另一种方法。您可以创建一个辅助函数来将日志发送到后台脚本：

const log = async (...args: any[]) => chrome.runtime.sendMessage({
  target: 'background',
  type: 'log',
  data: args,
});

并在后台脚本中添加监听器：

chrome.runtime.onMessage.addListener((message) => {
  if (message.target !== 'background') {
    return;
  }
  if (message.type === 'log') {
    console.log(message.data);
  }
});

现在从屏幕外页面您可以调用

log

函数：

log('clipboard');