1

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?

Zach O
  • 19
  • 1
  • 3
  • Make sure you are putting your code in a 'content script' and not a 'background page' or 'event page'. – Mike Edwards Nov 05 '13 at 06:21
  • 1
    refer http://stackoverflow.com/questions/7619095/how-to-inject-css-into-webpage-through-chrome-extension?rq=1 – Sridhar R Nov 05 '13 at 06:22
  • 1
    If you still face problems, describe the problem (and your attempts) in more detail and post some code. – gkalpak Nov 05 '13 at 06:34

1 Answers1

2

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.

pinoyyid
  • 21,499
  • 14
  • 64
  • 115