javascript - 在页面完全呈现之前将 CSS 样式从 chrome 扩展应用到页面 'instantly'

Question

我是制作 chrome(甚至浏览器)扩展的新手，我正在尝试制作一个将一些自定义 CSS 规则应用于某些页面元素的扩展。它似乎按预期工作一般，有一些轻微的烦恼。

即，当我使用 JS 应用任何 CSS 样式规则时，页面在浏览器中完全呈现到应用我的扩展的 CSS 规则之间似乎存在延迟。

我发现解决这个问题的一种方法是将我想要立即应用的 CSS 文件添加到 list 文件中，在 content_scripts 下。 ，像这样:

"content_scripts": [
    {
      "run_at": "document_start",
      "all_frames": true,
      "matches": ["<all_urls>"],
      "js": ["filter.js"],
      "css": ["filter.css"]
    }
   ],

但现在的问题是，我想在应用之前检查用户是否在我的扩展程序的弹出窗口中按下了“启用”按钮。为此，请在 filter.js和后台脚本，我检查 chrome 存储等以查看用户是否将启用标志设置为 true。

然后我使用 chrome.tabs.insertCSS插入我的 CSS 文件的方法。

在用户按下扩展禁用的情况下，浏览器仍会以 filter.css 的效果呈现页面直到它运行 JS 来移除效果。发生这种情况时，用户已经看到了 filter.css 的效果。我不想要。

我想要的是浏览器在页面显示给用户之前立即应用或不应用我的样式(取决于用户是否启用/禁用)。

到目前为止注入(inject) CSS 的方法都导致了延迟。必须可以立即添加或删除 CSS，因为我使用了诸如 Dark Reader 之类的扩展，它们似乎能够立即应用它们的样式，而无需在没有 CSS 的情况下显示浏览器内容。

理想情况下，有一种方法可以在 list 中进行条件检查，但我知道这是不可能的。我还可以做些什么？

任何帮助，将不胜感激!

谢谢阅读!

Answer 1

终于设法解决了我的问题。问题不在于插入 CSS 的任何函数，而只是我正在运行代码以在 window.onload 函数中注入(inject) CSS。 :facepalm: