Chrome 扩展 - 如何正确（尽快）应用暗模式 CSS？

Question

好的，所以我想制作一个“深色模式”附加组件，但问题是我无法足够快地应用深色 CSS。当我重新加载网页时，它以白色背景加载了 1/2 秒，然后加载了我的深色 css。这不是问题，但在晚上我的显示器在每次重新加载页面时都会闪烁（这不是很好的用户体验）。这是我到目前为止所拥有的：清单（脚本加载部分）：

  "permissions": [
    "activeTab",
    "storage",
    "https://www.example.com/*"
    
  ],
"content_scripts": [ 
  {
    "js": [ "jquery.min.js",  "content.js" ],
    "matches": [ "https://www.example.com/*"],
    "run_at": "document_start"
  },
  {
    "css": ["style.css"],
    "matches": [ "https://www.example.com/*"]
  }
  ],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },

这是content.js

chrome.storage.sync.get({
    dark: true
    }, function(items) {
    init(items.dark);
});
function init(options) {
var dark = options;
if(dark){
        $( "body" ).addClass( "darkmode" );
        if (document.readyState == 'loading') {
          $( "body" ).addClass( "darkmode" );
          document.addEventListener('DOMContentLoaded', function(){
              $( "body" ).addClass( "darkmode" );
          });
        }
    }
}

你看这里我在每个页面加载阶段添加了“addClass”只是为了确定。第一个工作正常，但问题是有时那行代码不会执行，因为 DOM 加载速度不够快。

在 style.css 文件中，我正在使用 css 更改样式，如下所示：

.darkmode .somediv .etc a {
color:#fff;
}

我只需要在页面加载后立即将网站背景更改为黑色，这样我就不会在开始时出现白色闪光。其余 CSS 可以在 1/2 秒后加载，没关系。

Answer 1

删除所有 document.readyState、DOMContentLoaded、jQuery 内容并替换为：

document.documentElement.classList.add('darkmode');

它将在 <html> 节点上添加 document_start 上已存在的 class。

请注意，更有效的方法是 register/unregister 根据存储中的开关变量动态地通过 chrome.declarativeContent API 和 RequestContentScript 操作而不是声明 content_scripts 在 manifest.json 中。此操作被标记为实验性的，但它实际上在稳定 Chrome.

中有效

Answer 2

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      .darkmode {
        background-color: #fff;
      }
    </style>
    <link rel="preload" as="script" href="darkmode.js" crossorigin />
    <script type="module" src="darkmode.js"></script>
    ...<!-- content script and CSS files... -->

darkmode.js

document.body.classList.add('darkmode');

Chrome 扩展 - 如何正确（尽快）应用暗模式 CSS？

Chrome extension - how to apply dark mode CSS correctly (as soon as possible)?

html

javascript

css

google-chrome-extension

darkmode