CODEWITHSUNDEEP
javascriptcssgoogle-chrome-extension
user5596482
user5596482

Reputation: 11

Runtime modification of Chrome extension resident stylesheet

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

Upvotes: 1

Views: 84

Answers (1)

Rob W
Rob W

Reputation: 348962

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

Upvotes: 1

Related Questions