Применение стилей не вызывает эффекта на элементы

chrome.tabs.onUpdated.addListener(async (tabId, currentTab, tab) => {
 
 
    let target = { tabId: tabId }
 
    const injectedObject = { 
        files: [ "scripts/content.js" ],
        target : target
    }
 
   chrome.scripting.insertCSS({
            target: { tabId: tabId },
            files: [
                "assets/css/main.css"
            ]
   }).then(() => { console.log("CSS Injected") })
 
   chrome.scripting.executeScript(
                injectObject
            ).then(injectionResults => {
                for (const {frameId, result} of injectionResults){
                    console.log(`Frame: ${frameId}, result: ${result}`)
                }
            }).catch((error) => { console.log(`An error occur at draft menu. Details: ${error}`) })
   }
}

async function addMenu () {
     const pageHeader = document 
    let  subscribe = document.querySelector("yt-subscribe-button-view-model")
    if (!subscribe){
        subscribe = await subscribeBlock(cb, pageHeader)// случай динамической загрузки - отслеживание изменений, метод не приведён.
    }
    let hasMenu = subscribe.parentNode.getElementsByClassName("last-seen-align")
 
    if (!hasMenu.length){
        const menu = document.createElement(
            "div", {
                "class": "last-seen-align"
            }
        )
        const lastSeenBtn =  document.createElement(
            "button", {
                "class": "last-seen-btn"
            }
        )
        const commonDiv = subscribe.parentNode
        menu.appendChild(lastSeenBtn)
        commonDiv.appendChild(menu)
}

import { createElement } from 'react';
 
function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello'
  );
}