1

好的，所以我想制作一个“深色模式”插件，但问题是我无法足够快地应用深色 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 秒后加载，没关系。

4

2 回答 2

1

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

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

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

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

于 2020-09-08T10:10:49.993 回答
0

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');
于 2021-08-16T12:53:05.137 回答