我是chrome（甚至浏览器）扩展的新手，正在尝试创建将某些自定义CSS规则应用于某些页面元素的扩展。它似乎总体上可以按预期工作，但有些烦人。
也就是说，当我使用JS应用任何CSS样式规则时，在浏览器中完全呈现页面与应用扩展程序的CSS规则之间似乎存在延迟。
我发现可以解决此问题的一种方法是将要立即应用于清单文件的CSS文件添加到清单文件下content_scripts，如下所示：
"content_scripts": [
{
"run_at": "document_start",
"all_frames": true,
"matches": ["<all_urls>"],
"js": ["filter.js"],
"css": ["filter.css"]
}
],
但是现在的问题是，在应用此扩展之前，我想检查用户是否在弹出窗口中按下了“启用”按钮。为此，请在filter.js和后台脚本中检查chrome存储器等，以查看用户是否将enabled标志设置为true。
然后，我使用该chrome.tabs.insertCSS方法插入我的CSS文件。
在用户按下扩展名上的禁用的情况下，浏览器仍将使用效果渲染页面，filter.css直到运行JS删除效果为止。到这种情况发生时，用户已经看到了filter.css我不想要的效果。
我想要的是浏览器在页面显示给用户之前立即应用或不应用我的样式（取决于用户是否启用/禁用）。
到目前为止，注入CSS的方法都导致了延迟。必须有可能不加延迟地将其添加或删除CSS，因为我使用了Dark Reader之类的扩展程序，这些扩展程序似乎能够立即应用其样式，而无需显示没有CSS的浏览器内容。
理想情况下，将有一种方法可以在清单中进行条件检查，但是我知道这是不可能的。我还可以做些什么？
任何帮助，将不胜感激！
谢谢阅读！
终于设法解决了我的问题。问题不在于插入CSS的任何函数，只是我正在运行我的代码以将CSS注入window.onload函数中。：facepalm：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句