I was wondering if it was possible to add CSS to pages through a CSS file, similarly to adding JS to pages through a JS file (contentscript). So, I could just define what pages said CSS file would work on and then it would take effect just like a contentscript. I understand that it is possible to add CSS through a JavaScript file, but it would be more convenient to do it this way instead if possible. If it's not possible, then of course I must use contentscript, but I would first like to know before I rule out any possibilities. I've searched and received no answers - either I'm searching wrong or it really isn't possible. Chrome extensions have come a long way, though, so I'm still not ruling it out until someone who knows can tell me yes & how or no. Thanks for any responses.
Add a comment
|
3 Answers
Your manifest file must contain a content script pointing to a CSS file, that will load when a url matches your selected url fields...
"content_scripts": [ {
"css": [ "scrollbars.css" ],
"matches": [ "http://www.google.com/*" ]
} ],
This is the same method you would use to inject javascript code, except you would point to a js file instead...
2 Comments
ferik
Does this still work in recent Chrome? I feel a regression bug was introduced that breaks CSS insertion through content script.
David
Definitely still works... developer.chrome.com/extensions/content_scripts.html
manifest.json:
"web_accessible_resources": [
"css/style.css"
],
content-script.js:
var a = chrome.extension.getURL("css/style.css");
$('<link rel="stylesheet" type="text/css" href="' + a + '" >').appendTo("head");
My extension using jQuery
Comments
similarly like we add JavaScript in content_scripts also add CSS
Method-1
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["css/style.css"],
"js": ["jquery-1.10.2.min.js","content.js","my.min.js"]
}],
add one more thing on web_accessible_resources
"web_accessible_resources": [
"css/style.css"
]
if you used any external JavaScript then also add URL in permission tab.
"permissions": ["tabs", <all_urls>","http://*/","http://example.com/"]
Method-2
also same this thing using vai programming injection and insertCSS().
chrome.tabs.insertCSS(integer tabId, object details, function callback)
NOTE : web_accessible_resources add .css is not mandatory but as of chrome extension forum is good practice.
2 Comments
Xan
Requires editing to be useful. Remark about
web_accessible_resources is confusing (and not needed for CSS included as above). Remark about external JS is completely out of place and also not always true. Now, mention of method #2 is actually very useful as it wasn't mentioned here before. I would recommend changing the code from signature to a minimal sample.
Divyesh Kanzariya
@Xan add
web_accessible_resources to specify css is not mandatory that not mean you downvote for that and also you can edit that :) and make more useful to other.