Runtime modification of Chrome extension resident stylesheet

Question

We're writing a Chrome extension that creates information pop-ups. We would like to be able to toggle the font-size at the user's request at runtime.

The strange thing is, the stylesheet, which is included in the Chrome extension manifest, does not show up in the page head list of stylesheets.

I presume the stylesheet must be referenced using a chrome.extension.getStylesheet or some such operator.

Once we have an object pointer to the relevant stylesheet, it is our intent to adjust the font-size of the corresponding element.

Any help?

Sam

Answer 1

The stylesheet injected through the manifest file cannot be edited via an API.

If you want to dynamically change the value, use chrome.tabs.insertCSS (see optionally inject content scripts for a breakdown of the several ways to call insertCSS in time) or chrome.declarativeContent.RequestContentScript. The latter does not accept arbitrary code yet. Luckily, the number of sensible font sizes are limited, so you could hard-code different stylesheets for (e.g.) font sizes 7 up to 40 and be done.

If the stylesheet is only useful for a few pages, and the value is dynamically calculated in a content script, then creating and injecting a <style> is also a good option.

If you use exactly the same CSS selector, then the last stylesheet will always take precedence over the previous one (if the selectors are different, then CSS specificity will determine what happens).