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

【问题标题】：How to display an alarm from background.js in Manifest v3如何在 Manifest v3 中显示来自 background.js 的警报
【发布时间】：2021-07-18 19:04:48
【问题描述】：

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

Manifest.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"
}

Background.js：

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

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

这个版本的background.js返回如下错误

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

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

Background.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 似乎因“Service Worker 注册失败”而崩溃，没有错误日志。

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

【问题讨论】：

标签： javascript google-chrome-extension

【解决方案1】：

正如错误消息所说，您需要将target 添加到executeScript 的参数中。始终在documentation 中查找 API 方法的确切用法。
您的代码使用了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 包装器，请参阅this example。

请注意，活动选项卡可能是不可注入的，例如默认起始页或 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();
      }
    }
  });
}

【讨论】：