分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何在 Manifest v3 中显示来自 background.js 的警报，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何在 Manifest v3 中显示来自 BACkground.js 的警报？

开发过程中遇到如何在 Manifest v3 中显示来自 BACkground.js 的警报的问题如何解决？下面主要结合日常开发的经验，给出你关于如何在 Manifest v3 中显示来自 BACkground.js 的警报的解决方法建议，希望对你解决如何在 Manifest v3 中显示来自 BACkground.js 的警报有所启发或帮助；

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

@H_107_2@manifest.Js：

@H_696_7@{
  "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","128": "/images/get_started128.png"
  },"options_page": "options.HTML"
}

背景.Js：

@H_696_7@Chrome.runtime.onInstalled.add@R_301_6818@ener(() => {
  Chrome.scripTing.executeScript({
    function: showAlert
  }) 
});

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

这个版本的BACkground.Js返回如下错误

TypeError: 调用 scripTing.executeScript 时出错(scripTing.ScripTin jection injection,optional function callBACk): 参数'injection'出错：缺少必需的属性'target'。

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

BACkground.Js（标签页）：

@H_696_7@Chrome.runtime.onInstalled.add@R_301_6818@ener(() => {
  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 显示当前活动页面的警报？

解决方法

正如错误消息所说，您需要将 @H_696_7@target 添加到 @H_696_7@executeScript 的参数中。始终在 documentation 中查找 API 方法的确切用法。
@H_197_43@
您的代码使用了 @H_696_7@await，但该函数并未使用 @H_696_7@async 进行声明，这是一个语法错误，会导致 service Worker 注册失败。目前 ManifestV3 漏洞百出，所以它甚至没有显示失败的原因，所以你必须手动使用 try/catch。
@H_197_43@

@H_696_7@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:// 页面。相反，您可以打开一个新的小窗口：

@H_696_7@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();
      }
    }
  });
}