在Chrome扩展中更快地加载CSS

我正在做一个扩展,用来在一个特定的站点上切换黑暗模式。

它的工作(几乎)很好,但有一个问题,CSS加载不够快。用户可能会体验到从浅色用户界面切换到深色的闪烁屏幕。

注入.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);
}

内容.js (手柄切换按钮)

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

清单.json

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

我尝试只使用纯JS进行注入,并将注入部分移动到一个单独的文件中,使其首先加载。速度更快但仍在闪烁。我想知道我怎样才能修改它使它更快?