chrome.tabs.insertCSS(tabId, { code : '@import url("custom.css");' });
OR
chrome.tabs.insertCSS(tabId, { file : 'importer.css' });
importer.css:
@import url("custom.css");
a { color:red!important; } /* this rule applied successfully though. */
Seems like there is an issue with getting the CSS to work as intended.
Any ideas on why it's not functioning properly and how to troubleshoot it?
Edit:
I might be searching in the wrong place for clues, but as per the source code, it suggests that the injected CSS is parsed using the regular style sheet parser. In theory, if the @import directive works in standard CSS documents, it should function the same way in injected CSS.
Refer here for more information on script injection
void ScriptInjection::InjectCss(blink::WebLocalFrame* frame) {
std::vector<std::string> css_sources =
injector_->GetCssSources(run_location_);
for (std::vector<std::string>::const_iterator iter = css_sources.begin();
iter != css_sources.end();
++iter) {
frame->document().insertStyleSheet(blink::WebString::fromUTF8(*iter));
}
}
Edit:
Here is a piece of sample code that seems to be encountering issues:
Directory structure:
ext.root
|-- custom.css
|-- custom.css.js
|-- importer.css
|-- manifest.json
manifest.json:
{
"background": {
"scripts": [ "custom.css.js" ],
"persistent": true
},
"manifest_version": 2,
"name": "custom.css",
"version": "1.0",
"web_accessible_resources" : [ "*" ],
"permissions" : [ "webNavigation", "http://*/", "https://*/" ]
}
custom.css.js:
chrome.webNavigation.onCommitted.addListener(function(details) {
console.log('inserting css');
console.log(chrome.runtime.getURL("custom.css"));
chrome.tabs.insertCSS(details.tabId, { file : 'importer.css' });
chrome.tabs.insertCSS(details.tabId, { code : '@import url("custom.css");' });
chrome.tabs.insertCSS(details.tabId, { code : '@import url(custom.css);' });
chrome.tabs.insertCSS(details.tabId, { code : '@import url("' + chrome.runtime.getURL("custom.css") + '");' });
chrome.tabs.insertCSS(details.tabId, { code : '@import url(' + chrome.runtime.getURL("custom.css") + ');' });
chrome.tabs.insertCSS(details.tabId, { code : '@import "custom.css";' });
chrome.tabs.insertCSS(details.tabId, { code : '@import custom.css;' });
chrome.tabs.insertCSS(details.tabId, { code : '@import "' + chrome.runtime.getURL("custom.css") + '";' });
chrome.tabs.insertCSS(details.tabId, { code : '@import ' + chrome.runtime.getURL("custom.css") + ';' });
});
importer.css:
@import "custom.css";
@import "chrome-extension://__MSG_@@extension_id__/custom.css";
@import custom.css;
@import chrome-extension://__MSG_@@extension_id__/custom.css;
@import url("custom.css");
@import url("chrome-extension://__MSG_@@extension_id__/custom.css");
@import url(custom.css);
@import url(chrome-extension://__MSG_@@extension_id__/custom.css);
body { background-color: red!important; } /* change page background color to red */
custom.css (Rules in this file are supposed to be applied but not):
body { border: 20px solid red!important; } /* add a 20px border around the body. */
a { background-color: blue!important; } /* change all link's background color to blue. */