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

Question

当我尝试使用Chrome.scripting API在chrome.alarms.onAlarm内注入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 doen似乎在这个块中不起作用

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"]
    }),
});