I’m trying to understand the mechanics of how user-style browser extensions (like Stylus) inject their CSS. According to my understanding, stylesheets with a ‘user style’ CSS origin have a priority lower than those with an ‘author style’ CSS origin, but higher than those with a ‘user agent’ CSS origin. (See e.g. https://web.dev/learn/css/the-cascade).
My question revolves around two points:
- How do user-style browser extensions inject their CSS?
On the one hand, it seems logical that they should use extension APIs like chrome.tabs.insertCSS with cssOrigin: ‘user’ to properly signal that the stylesheet comes from the user. However, given that user styles have lower priority than author styles, wouldn’t this predict that most of the time user styles applied via browser extensions would be ineffective, as they’d be overridden by author styles? This prediction doesn’t fit my experience, as user styles applied through extensions like Stylus often successfully override author styles.
- Is there a way to find out programmatically if a stylesheet is a user style?
Given the differences in CSS origins, I am looking for a method to programmatically determine if a stylesheet was injected as a user style rather than an author style. Does the browser expose any API that allow for this differentiation? If not, are there heuristics or patterns that can help infer the origin of a stylesheet?