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?

mix
  • 6,943
  • 15
  • 61
  • 90
  • 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. – mix Nov 28 '16 at 05: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`. – rsanchez Nov 28 '16 at 05: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! – mix Nov 28 '16 at 06:06
  • `getURL` is allowed in content scripts. I don't know why you think it's not. – rsanchez Nov 28 '16 at 06:19
  • And yeah, I have answers sorted by votes, you may have them sorted differently. – rsanchez Nov 28 '16 at 06:21
  • You state that you are making changes to the CSS you wish to inject from code that is run in a `browserAction` popup. Yet, you then state that you are refusing to use `tabs.injectCSS` because you are wanting to inject the code from a content script (after reading the options saved in the popup). This appears inconsistent. The code in the popup knows the values of the options and, from what you have written, has enough information to create the CSS to be injected. Thus, using `tabs.injectCSS` (a `code` property) is a viable option. In fact, using a content script is potentially a complication. – Makyen Nov 28 '16 at 06:55
  • @makyen I'm sorry if I was confusing on the popup. I am using a CSS content script to load a core set of CSS rules for a specific set of sites. Then I use the popup as the location for changing default options. Changes to those defaults require the injection of additional CSS. I need this info when the extension starts, so I need to be able to get at this from the content script (Javascript). – mix Nov 28 '16 at 09:22
  • @mix, Nothing that you explained in your comment precludes using a background script to perform the injection of the additional CSS using [`tabs.insertCSS()`](https://developer.chrome.com/extensions/tabs#method-insertCSS) (which I erroneously called `injectCSS()` in my prior comment). If it is necessary to do in the content script is dependent on if you use some information from the page content (i.e. the DOM) to build the CSS. I'm not trying to argue that you are doing it wrong, just that from what you have stated you have closed off a possible solution space which is not actually precluded. – Makyen Nov 28 '16 at 10:28

1 Answers1

-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.

Pankaj Phartiyal
  • 1,691
  • 1
  • 12
  • 23