在 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.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

您下面的代碼只是將Promise分配給全局 tabId，而不是選項卡的 id：

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

解決方案是單獨聲明這個 function 並在需要的地方通過await調用它：

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

將async添加到您的偵聽器並調用 function：

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