I'm working on a chrome extension that allows the user to change the CSS of a page. I've attempted using the insertCSS method in the chrome.tabs api, and simply trying to append a style tag to the HTML, but i have not been successful. Can anyone tell me how either the insertCSS method works, or how to reach the web page from a .js file in the extension?
-
Make sure you are putting your code in a 'content script' and not a 'background page' or 'event page'.Mike Edwards– Mike Edwards2013-11-05 06:21:23 +00:00Commented Nov 5, 2013 at 6:21
-
1refer stackoverflow.com/questions/7619095/…Sridhar R– Sridhar R2013-11-05 06:22:26 +00:00Commented Nov 5, 2013 at 6:22
-
1If you still face problems, describe the problem (and your attempts) in more detail and post some code.gkalpak– gkalpak2013-11-05 06:34:01 +00:00Commented Nov 5, 2013 at 6:34
Add a comment
|
1 Answer
The injection code is simply
chrome.tabs.insertCSS(tabId, {
file : "mystyle.css"
});
Make sure that mystyle.css is whiletlisted in the manifest
"web_accessible_resources": [
"mystyle.css"
],
Use Chrome Devtools to check if the injection succeeded. I had a problem where I thought my CSS wasn't being injected. On investigating, it was, but my selectors were incorrect. I ended up adding !important to many of the styles.