我正在构建一个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文件的工作。有人知道我该怎么做吗？谢谢
您已经"run_at": "document_end"在中定义了manifest.json，这意味着inject.css将在DOM完成后立即但在加载诸如图像和框架之类的子资源之前将其注入。
看一下run_at，您可以设置"run_at": "document_start"，这意味着这些文件是在css中的任何文件之后，但在构造任何其他DOM或运行任何其他脚本之前注入的。但是，在这种情况下，如果异步方法（chrome.storage.sync.get）执行得足够快，则由于未构建DOM，因此无法获得正确的正确结果。
我建议您inject.css在构建DOM之前先注入，然后侦听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);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句