在dom加载之前，chrome扩展注入动态css
在dom加载之前，chrome扩展注入动态css
提问于 2016-04-16 19:51:16
我正在构建一个铬扩展，我想注入动态(从一个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文件起作用。有人知道我是怎么做到的吗？谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-04-17 01:51:00
您已经在您的"run_at": "document_end"中定义了inject.css，这意味着在DOM完成之后，但是在加载图像和帧等子资源之前，立即注入。
看看在…，您可以设置"run_at": "document_start"，这意味着在css的任何文件之后注入文件，但是在构建任何其他DOM或运行任何其他脚本之前，都会注入b。但是，在这种情况下，如果异步方法(chrome.storage.sync.get)执行得足够快，它就无法得到正确的结果，因为DOM不是构造的。
我建议您在构造DOM之前注入inject.css，然后侦听DOMContentLoaded事件以执行inject.js逻辑。
DOMContentLoaded事件是在初始的HTML被完全加载和解析后触发的，而不需要等待样式表、图像和子框架来完成加载。
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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36668945
复制相关文章
相似问题
腾讯云开发者
