如何在 Manifest v3 中显示来自 background.js 的警报

Question

我正在尝试显示从 Manifest v3 中的 background.js 在浏览器中弹出的警报。但是，使用 Manifest v3 页面中描述的代码实现不会产生警报。

清单.js：

{
  "name": "Focus-Bot",
  "description": "A bot meant to help you focus",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  },
  "options_page": "options.html"
}

背景.js：

chrome.runtime.onInstalled.addListener(() => {
  chrome.scripting.executeScript({
    function: showAlert
  }) 
});

function showAlert(){
    alert('object input for later');
}

此版本的background.js返回以下错误

TypeError：调用 scripting.executeScript 时出错（scripting.ScriptInjection 注入，可选函数回调）：参数“注入”出错：缺少必需的属性“目标”。

正常运行的 Chrome 扩展程序（绿色背景按钮）的示例代码使用 popup.js 文件中的 chrome.tabs 来获取目标并注入 javascript，但是当 background.js 运行相同的代码时，如下所示：

背景.js（选项卡）：

chrome.runtime.onInstalled.addListener(() => {
  let [tab] = await chrome.tabs.query(queryOptions);
  console.log(tab)
  chrome.scripting.executeScript({
    function: showAlert
  }) 
});

function showAlert(){
    alert('object input for later');
}

Background.js 似乎因“服务工作线程注册失败”而崩溃，没有错误日志。

如何从 background.js 显示当前活动页面的警报？

Answer 1

1. 正如错误消息所示，您需要添加target到executeScript的参数。请务必在文档中查找 API 方法的确切用法。

2. 您的代码使用await但未声明该函数，async这是一个语法错误，导致服务工作线程注册失败。目前 ManifestV3 充满了错误，因此它甚至没有显示失败的原因，因此您必须手动使用 try/catch。

try {
  chrome.runtime.onInstalled.addListener(async () => {
    const [tab] = await chrome.tabs.query(queryOptions);
    chrome.scripting.executeScript({
      target: {tabId: tab.id},
      function: showAlert,
    });
  });
} catch (e) {
  console.error(e);
}

可以说更好/更干净的方法是使用两个文件：bg.js 中的主代码和 bg-loader.js 中导入 bg.js 的 try-catch 包装器，请参阅此示例。

请注意，活动选项卡可能是不可注入的，例如默认起始页或 chrome:// 页面（设置、书签等）或 chrome-extension:// 页面。相反，您可以打开一个新的小窗口：

alert({html: 'Foo <b>bar</b><ul><li>bla<li>bla</ul>'})
  .then(() => console.log('alert closed'));

async function alert({
  html,
  title = chrome.runtime.getManifest().name,
  width = 300,
  height = 150,
  left,
  top,
}) {
  const w = left == null && top == null && await chrome.windows.getCurrent();
  const w2 = await chrome.windows.create({
    url: `data:text/html,<title>${title}</title>${html}`.replace(/#/g, '%23'),
    type: 'popup',
    left: left ?? Math.floor(w.left + (w.width - width) / 2),
    top: top ?? Math.floor(w.top + (w.height - height) / 2),
    height,
    width,
  });
  return new Promise(resolve => {
    chrome.windows.onRemoved.addListener(onRemoved, {windowTypes: ['popup']});
    function onRemoved(id) {
      if (id === w2.id) {
        chrome.windows.onRemoved.removeListener(onRemoved);
        resolve();
      }
    }
  });
}