如何在清单v3

Question

{
  "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');
}

本版本的背景.js返回以下错误

TypeError：scipting.executescript的调用错误（脚本注射，可选函数回调）：参数'注入''：丢失必需的属性'target'..

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

Background.js（Tabs）：

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似乎随着“服务工作者注册失败”而崩溃，没有错误日志。

我如何显示从后台的当前活动页面的警报。

错误消息说您需要将

target

添加到

executeScript

的参数中。始终查找API方法的确切用法。

Answer 1

您的代码使用
1. await

   ，但该函数并未使用

   async

   声明，这是一个语法错误，导致服务工作者未能使注册失败。当前清单v3上有错误，因此它甚至没有显示故障的原因，因此您必须手动使用/捕捉。

   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.js的bg-loader.js中的try-catch包装器，请参见thisexample thisexample
   .
。
2. 注意，活动选项卡可能是无法注射的，例如默认的启动页面或chrome：// page（设置，书签等）或chrome-extension：// page。相反，您可以打开一个小窗口：

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

   WOXXOM建议的解决方案在Chrome中起作用，但在Firefox中不起作用，因为那里不支持
data:

url（作为顶级位置）。

出于这个原因，我发布了一个软件包，该软件包使用最佳可用方法向用户显示消息，无论是通过

chrome.windows

带有外部HTML还是本地HTML。当可用时，它也可能使用data:

repository：

https：//github.com/fregante/webext-alert

Answer 2

注意，有一个可单击的“确定”按钮，就像

action.openPopup