Можно ли манипулировать скриптом содержимого CSS из фонового скрипта в расширениях Chrome

Question

Есть ли способ заранее манипулировать файлом скриптового содержимого CSS (например, vars)?

Я делаю расширение Chrome, которое позволяет пользователям настраивать темы для определенных веб-сайтов.В настоящее время я храню самые последние данные из выбранной темы в background.js.Затем сценарий содержимого JS отправляет сообщение через порт и получает данные (также вводится сценарий содержимого CSS).Затем сценарий содержимого JS устанавливает CSS-переменные для сценария содержимого CSS.Проблема, с которой я сталкиваюсь в настоящее время, заключается в том, что процесс идет слишком медленно, даже если для "run_at" установлено значение "document_start", кажется, что задержка составляет от одной до двух секунд, большая часть задержки, по-видимому, связана с портами, обменивающимися данными, но неCSS файл (background.js файл не получает данные из chrome.storage, но получает их из переменной, которая обновляется каждый раз через chrome.storage.onChanged) .

background.js

let lastSelectedTheme;
let lastCustomThemes;
let lastDefaultThemes;
let selectedThemeInfo = {
    name: "dark",
    background: "#151515",
    secondaryBackground: "#191a1c",
    topBar: "#000000",
    normalTextColor: "#ffffff",
    lighterTextColor: "#e8e8e8"
};

(() => {
    getValue("customThemes").then(res => {
        lastCustomThemes = res;
    });
    getValue("defaultThemes").then(res => {
        lastDefaultThemes = res;
    });
})();

function onMessageReceived(request, sender, sendResponse) {
    if (request.name === "content") {
        sendResponse(selectedThemeInfo);
    }
}

chrome.storage.onChanged.addListener(onStorageChange);

content.js

const port = chrome.runtime.sendMessage({ name: "content" }, messageReceived);
const root = document.documentElement;

function messageReceived(message) {
    if (message) {
        style(message);
    } else {
        console.warn("No selected theme.");
    }
}