CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome-extension
Zach O
Zach O

Reputation: 19

Insert CSS from Chrome Extension

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?

Upvotes: 1

Views: 2910

Answers (1)

pinoyyid
pinoyyid

Reputation: 22286

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.

Upvotes: 2

Related Questions