0

I have a Chrome extension that should apply custom CSS rules to the matched website. I want to make small adjustments to the CSS that gets applied based on options set in the extension options via the default_popup html file.

I can't use a CSS content script because that can't be programmatically controlled. It's all or nothing.

So what I want is for my Javascript content script to read the saved options from chrome.storage.sync and then inject the appropriate CSS files based on the just read options.

However, to use injectCSS() requires access to chrome.tabs --- yet chrome.tabs cannot be used in a content script!

This must be a common thing. Suggestions on how to accomplish this using the Chrome extension APIs?

Improve this question
8
  • that set of answers doesn't solve my question for the following reasons: 1) the accepted answer draws from an offsite URL for the CSS -- I want to use accepted practices for Chrome extensions to avoid various offsite permissions issues (and don't want to have to ask the user for extra permissions to allow offsite file inclusion), and 2) the second answer suggests the use of Chrome's injectCSS() but doesn't address the question I have regarding that function's unavailability from a content script. Commented Nov 28, 2016 at 5:14
  • The second answer suggests NOT to use insertCSS, and its first code example shows how to inject a css located in your extension using chrome.extension.getURL. Commented Nov 28, 2016 at 5:34
  • Perhaps the answers are coming up in different orders for us. The second answer does indeed suggest insertCSS(). The third answer, which talks about flicker, does not. I expect the third answer that recommends against insertCSS because it causes rendering flicker may no longer be an issue due to Chrome updates over the last four years of development. The first answer, suggesting getURL, has the same problem as chrome.tabs: neither are allowed from content scripts! Commented Nov 28, 2016 at 6:06
  • getURL is allowed in content scripts. I don't know why you think it's not. Commented Nov 28, 2016 at 6:19
  • And yeah, I have answers sorted by votes, you may have them sorted differently. Commented Nov 28, 2016 at 6:21

1 Answer 1

Reset to default
-1

Use inline styles controlled by Javascript only. I think using external CSS doesn't guarantee that the styles get applied because of overriding selectors already present.

This can be scaled and better organised by use multiple CSS files and reading them into Javascript variables and then apply styles. Or just use stylesheets in JSON format.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.