在 Manifest v3 中 chrome.alarms 过去后，无法在选项卡中从 service_worker 注入 CSS 样式

Question

当我尝试在 chrome.alarms.onAlarm 中使用 Chrome.scripting API 注入 CSS 文件时，从选项卡中的 service_worker js 文件回调

chrome.alarms.onAlarm.addListener(function() {
    chrome.scripting.insertCSS({
        target: { tabId: tabs.id },
        files: ["inject.css"]
    });
});

但它不起作用，但是当我尝试时 chrome.action.setBadgeText 它同样可以正常工作 chrome.notifications API 似乎无法在这个块内工作

chrome.alarms.onAlarm.addListener(function() {
    chrome.action.setBadgeText({text: 'yes'});
    
});

我的manifest.json文件

{
    "name": "TimeCode",
    "description": "A extension to inject some specific functionallity in leetcode",
    "version": "1.0",
    "manifest_version": 3,
    "icons": {
    
        "32": "./images/output-onlinepngtools1.png",
        "48": "./images/output-onlinepngtools2.png",
        "128": "./images/output-onlinepngtools3.png"
    },
    "background": {
        "service_worker": "./background.js"
    },
    "action": {
        "default_title": "Set timer to your leetcode problem",
        "default_popup": "popup.html",
        "default_icons": {
            "32": "./images/output-onlinepngtools1.png",
            "48": "./images/output-onlinepngtools2.png",
            "128": "./images/output-onlinepngtools3.png"
        }
    },
    "permissions": [
        "activeTab",
        "tabs",
        "storage",
        "scripting",
        "alarms",
        "notifications",
        "storage"
    ],
    "host_permissions": [
        "https://leetcode.com/problems/*"
    ]
}

我的后台文件

const tabId = async function getCurrentTab() {
    let queryOptions = { active: true, currentWindow: true };
    let [tab] = await chrome.tabs.query(queryOptions);
    return tab;
}
  
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === 'complete' && /^http/.test(tab.url)) {
        chrome.scripting.executeScript({
            target: { tabId: tabId },
            files: ["./foreground.js"]})
        .then(() => {console.log("INJECTED THE FOREGROUND SCRIPT.");})
        .catch(err => console.log(err));}
});

chrome.alarms.onAlarm.addListener(function() {
    chrome.action.setBadgeText({text: 'yes'}),
    chrome.scripting.insertCSS({
        target: { tabId: tabId },
        files: ["inject.css"]
    }),
    chrome.notifications.create({
        type:     'basic',
        iconUrl:  'timeout.png',
        title:    'Time out',
        message:  'Set Time limit has passed',
        buttons: [{title: 'Continue.'}],
        priority: 2});
    
});
  
chrome.notifications.onButtonClicked.addListener(function() {
    chrome.storage.sync.get(['minutes'], function(item) {
         chrome.action.setBadgeText({text: 'ON'});
    chrome.alarms.create({delayInMinutes: item.minutes});
    });
});

popup.js 文件

'use strict';

function setAlarm(event) {
  let minutes = parseFloat(event.target.value);
  chrome.action.setBadgeText({text: 'ON'});
  chrome.alarms.create({delayInMinutes: minutes});
  chrome.storage.sync.set({minutes: minutes});
  window.close();
}

function clearAlarm() {
  chrome.action.setBadgeText({text: 'OFF'});
  chrome.alarms.clearAll();
  window.close();
}

//An Alarm delay of less than the minimum 1 minute will fire
// in approximately 1 minute increments if released
document.getElementById('Easy').addEventListener('click', setAlarm);
document.getElementById('Medium').addEventListener('click', setAlarm);
document.getElementById('Hard').addEventListener('click', setAlarm);
document.getElementById('cancelAlarm').addEventListener('click', clearAlarm);

Answer 1

您下面的代码只是将一个函数分配给全局 tabId，而不是它的返回值（选项卡的 ID）：

const tabId = async function getCurrentTab() { ... }

解决办法是单独声明这个函数，在需要的地方通过await调用：

async function getCurrentTab() {
    let queryOptions = { active: true, currentWindow: true };
    let [tab] = await chrome.tabs.query(queryOptions);
    return tab;
}

将 async 添加到您的侦听器并调用函数：

chrome.alarms.onAlarm.addListener(async function() {
    chrome.scripting.insertCSS({
        target: { tabId: (await getCurrentTab()).id },
        files: ["inject.css"]
    }),
});

在 Manifest v3 中 chrome.alarms 过去后，无法在选项卡中从 service_worker 注入 CSS 样式

Unable to inject CSS style from service_worker in tab after chrome.alarms has elapsed in Manifest v3

javascript

google-chrome

google-chrome-extension

chrome-extension-manifest-v3