1

「ダーク モード」アドオンを作成したいのですが、ダーク CSS をすばやく適用できないという問題があります。Web ページをリロードすると、白い背景が 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 の残りの部分は 0.5 秒後にロードできますが、問題ありません。

4

2 に答える 2