在页面完全呈现之前将CSS样式从chrome扩展名立即应用到页面

问题描述 投票:0回答:1

我对制作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的浏览器内容。

理想情况下,有一种方法可以对清单进行条件检查,但我知道这是不可能的。我还能做什么?

任何帮助将不胜感激!

感谢阅读!

我对制作chrome(或什至是浏览器)扩展名是陌生的,我正在尝试制作将某些自定义CSS规则应用于某些页面元素的扩展名。它似乎总体上可以正常工作,只是有些许...

javascript html css browser google-chrome-extension
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.