Как изменить CSS с помощью Javascript в расширении Chrome? [закрыто] ⇐ CSS

[Anonymous]

Я пытаюсь создать расширение Chrome, которое изменит дизайн Gmail, сделав его более компактным. Я пытался использовать Javascript, чтобы изменить CSS веб-страницы, но это не помогло/изменить CSS.
Я пытался использовать content.js, чтобы изменить CSS веб-страницы.
Это появилось в консоли после того, как я попытался запустить код в Gmail.
[img]https://i.sstatic.net /cWL37KVg.png[/img]

Content.js:
(function() {
console.log("content.js")
const cssUrl = chrome.runtime.getURL('compact.css');
const link = document.createElement('link');
link.href = cssUrl;
link.rel = 'stylesheet';
document.head.appendChild(link);
console.log('CSS injected:', cssUrl);

function waitForElement(selector, callback) {
const observer = new MutationObserver(mutations => {
for (let mutation of mutations) {
if (mutation.addedNodes.length > 0) {
if (document.querySelector(selector)) {
observer.disconnect();
callback();
break;
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
}

function compactMessageList() {
const messageList = document.querySelector('div[role="main"]');
if (messageList) {
console.log('Message list found:', messageList);
messageList.style.setProperty('grid-template-rows', 'auto !important');
messageList.style.setProperty('padding', '5px !important');
} else {
console.log('Message list not found');
}
}

waitForElement('div[role="main"]', compactMessageList);

})();

Compact.css:
body {
background-color: red !important;
}

div[role="main"] {
font-size: 10px !important;
line-height: 1.2 !important;
}

div[role="main"] .ae4.UI {
padding: 2px !important;
margin: 2px !important;
background-color: #f0f0f0 !important; /*background*/
}

div[role="main"] .Cp .aDP .aeF .aeJ {
padding: 5px !important;
margin: 2px !important;
border-bottom: 1px solid #ccc !important;
}

div[role="main"] .Cp .aDP .aeF .aeJ .bog {
padding: 1px 0 !important;
margin: 0 !important;
color: #333 !important; /*textcolor*/
}

div[role="main"] .Cp .aDP .aeF .aeJ .xY {
padding: 1px 0 !important;
margin: 0 !important;
}

div[role="main"] .Cp .aDP .aeF .aeJ[tabindex="0"] {
background-color: #d0e0ff !important;
}

div[role="main"] .Cp .aDP .aeF .aeJ .xY .y6 {
display: flex;
justify-content: space-between;
}

div[role="main"] .Cp .aDP .aeF .aeJ .xY .y6 .zF {
font-size: 10px !important;
padding: 2px !important;
margin: 0 !important;
}

div[role="main"] .Cp .aDP .aeF .aeJ .xY .y6 .bA4 {
color: red !important; /* Red color for labels */
font-weight: bold !important;
}

Manifest.json:
{
"manifest_version": 3,
"name": "Compact Gmail",
"version": "1.0",
"description": "",
"permissions": [
"activeTab",
"storage"
],
"content_scripts": [
{
"matches": ["https://mail.google.com/*"],
"js": ["content.js"]
}
]
}


Подробнее здесь: https://stackoverflow.com/questions/786 ... -extension