I have an extension that should change styles on the button, but when I try to add a style:

let css = chrome.runtime.getURL("css/black.css")
let head = document.querySelector("head")
head.insertAdjacentHTML("beforeend", `<link rel="stylesheet" href="${css}">`)

Then before loading my css, the css that loaded the site works for a second and it’s not very beautifulMy

My manifest:

    "content_scripts": [{
        "js": ["./scripts/material.js", "./scripts/content.js"],
        "matches": ["https://funpay.com/*"]
    }],
    "host_permissions": [
        "http://*/*",
        "https://*/*"
    ],
    "permissions": [
        "scripting",
        "storage",
        "cookies",
        "activeTab",
        "tabs"
    ],
    "web_accessible_resources": [{
        "resources": [ "css/black.css" ],
        "matches": ["https://funpay.com/*"]
    }]

My black.css:

body {background-color: rgb(40, 40, 40) !important;}

Is there any way to avoid this flickering?
What would it be like when uploading via manifest to content_scripts, that is, the page loads immediately with my style

From the beginning, I tried to add css to the manifest in contents scripts, but in this case I can’t remove it or interact with it in any way.