Question

我正在做一个扩展，用于在特定站点上切换暗模式。

（几乎）可以正常工作，但是存在CSS加载速度不够快的问题。该用户可能会遇到从明亮的UI切换到黑暗的闪烁屏幕。

inject.js （如果已启用，请加载CSS）

if(localStorage.getItem("dark_enabled") == 'true'){
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = chrome.runtime.getURL('styles.css');
    head.appendChild(link);
}

content.js （“句柄”切换按钮）

$("#toggle_darkmode").click(function() {
        status_bool = localStorage.getItem("dark_enabled") == 'true';
        status_bool = !status_bool;
        localStorage.setItem("dark_enabled", status_bool);
        location.reload();
});

manifest.json

{  
  "content_scripts":[  
     {  
        "js":["inject.js", "jquery-3.3.1.min.js", "content.js"]
     }
  ],
  ...
  "web_accessible_resources":["styles.css"]
}

我尝试仅使用纯JS进行注入，然后将注入部分移至单独的文件中，并使其首先加载。它速度更快，但仍在闪烁。我想知道如何修改它以使其更快？

在Chrome扩展程序中更快地加载CSS

0 个答案: