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

【问题标题】：Chrome extension - how to apply dark mode CSS correctly (as soon as possible)?Chrome 扩展 - 如何正确应用暗模式 CSS（尽快）？
【发布时间】：2020-12-26 16:47:52
【问题描述】：

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

  "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 秒后加载，没关系。

【问题讨论】：

标签： javascript html css google-chrome-extension darkmode

【解决方案1】：

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

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

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

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

【讨论】：

第一个很有魅力，谢谢！我将在插件的 beta 版本中测试第二个。干杯。

【解决方案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');

【讨论】：

在我的情况下，我从 localStorage 读取，所以 darkMode.js 看起来像 document.body.classList.add(localStorage.getItem("darkMode"));