Chrome扩展执行后加载CSS

Question

我想创建一个简单的Chrome扩展来修改网站的CSS，但它仍然显示该网站的原始CSS，然后在一段时间后显示我的CSS。

我希望我的扩展立即使用我的 CSS，而不是先加载原始 CSS。

我无法使用“document_start”，因为我的扩展使用 DOM 来修改 CSS，“document_end”不起作用。

我该怎么办？

我的manifest.js：

{
    "content_scripts": [
        {
            "js": ["./scripts/script.js"],
            "matches": ["https://www.facebook.com/"]
        }
    ],
    "manifest_version": 3,
    "name": "Facebook for Concetrating",
    "description": "Facebook for Concetrating",
    "version": "1.0",
    "action": {
      "default_popup": "./popup/popup.html",
      "default_icon": "./images/icon.png"
    }
}

我的脚本文件：

// Hide Newfeed
const newfeed = document.querySelectorAll('div.x1hc1fzr.x1unhpq9.x6o7n8i > div')

for(let i = 0; i < newfeed.length; i++) {
    newfeed[i].style.display = "none";
}

Answer 1

使用样式表

您的设计问题在于您使用 JavaScript 将自定义样式直接应用于元素。并且您的脚本必须等待页面加载才能应用这些样式。

您可以通过删除应用样式的 JavaScript 并将其替换为样式表来解决此问题。

内容.css

div.x1hc1fzr.x1unhpq9.x6o7n8i > div { display: none !important; }
/* add other rules here */

然后更改清单的

content_script

部分以加载

document_start

处的样式表。这允许甚至在元素存在之前应用自定义 CSS。

manifest.json

{
    "content_scripts": [
        {
            "run_at": "document_start",
            "css": ["./scripts/content.css"],
            "js": ["./scripts/script.js"],
            "matches": ["https://www.facebook.com/"]
        }
    ],
    "manifest_version": 3,
    "name": "Facebook for Concetrating",
    "description": "Facebook for Concetrating",
    "version": "1.0",
    "action": {
      "default_popup": "./popup/popup.html",
      "default_icon": "./images/icon.png"
    },
}

文档：Manifest - 内容脚本

相关问题：如何在Chrome扩展程序中使用内容脚本文件注入CSS？