Question

我正在构建Chrome扩展程序，并且当用户访问该网页时，我想将动态（从storage.sync.get）css注入网页。使用我当前的实现它在技术上工作，但是，页面加载，并且在它加载后它将注入新的css，这使它看起来非常慢。我希望在dom加载之前加载css。那可能吗？

这就是我目前拥有它的方式：

inject.js：

chrome.storage.sync.get("color", function(storedTheme) {
     $('.theme-wrap').removeClass('selected');
     $('.' + storedTheme.color).addClass('selected');
     path = chrome.extension.getURL("src/options/themes/" + storedTheme.color + ".css");
      $('<link/>', {
      rel: 'stylesheet',
      type: 'text/css',
      href: path
    }).appendTo('head');
});

这是我的manifest.json content_script信息：

"content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "css": ["src/inject/inject.css", "src/inject/font-awesome.min.css"],
    "js": ["js/jquery/jquery.min.js", "src/inject/inject.js"],
    "run_at" : "document_end"
 }]

src/inject/inject.css似乎在dom之前加载，这正是我想要的，但我希望它适用于用户指定的css文件。有谁知道我怎么做到这一点？谢谢

Answer 1

您已在"run_at": "document_end"中定义manifest.json，这意味着在{DOM>完成后立即注入inject.css ，但在图片和框架之类的子资源之前加载。

看看run_at，您可以设置"run_at": "document_start"，这意味着文件是在来自css的任何文件之后注入的，但b 在构建任何其他DOM之前或运行任何其他脚本。但是，在这种情况下，如果您的异步方法（chrome.storage.sync.get）执行得足够快，则无法获得正确的结果，因为未构造DOM。

我建议您在构建DOM之前注入inject.css，然后听取DOMContentLoaded事件以执行inject.js逻辑。

当初始HTML文档已完全加载并解析时，会触发DOMContentLoaded事件，而无需等待样式表，图像和子帧完成加载。

的manifest.json

"content_scripts": [{ "matches": ["http://*/*", "https://*/*"], "css": ["src/inject/inject.css", "src/inject/font-awesome.min.css"], "js": ["js/jquery/jquery.min.js", "src/inject/inject.js"], "run_at" : "document_start" }]

inject.js

window.addEventListener("DOMContentLoaded", function() { chrome.storage.sync.get("color", function(storedTheme) { $('.theme-wrap').removeClass('selected'); $('.' + storedTheme.color).addClass('selected'); path = chrome.runtime.getURL("src/options/themes/" + storedTheme.color + ".css"); $('<link/>', { rel: 'stylesheet', type: 'text/css', href: path }).appendTo('head'); }); }, false);

chrome扩展在加载dom之前注入动态css

1 个答案: