API inconsistency: Chrome's tabs.insertCSS and scripting.insertCSS for "author" origin inject at the "user" origin position

[tophf]

When the origin is "author" (this is the default setting) Chrome's tabs.insertCSS and scripting.insertCSS incorrectly inject the extension's CSS before the document's own stylesheets [source code] i.e. at the cascade position of the "user" origin, which is a bug.

This is a problem for extensions like Stylus that apply CSS themes to websites as they can't use this API due to this bug and have to add them in a DOM <style> element, which may be used for fingerprinting by websites or interstitials like Cloudflare's.

This is broken since 2017 and was reported several years ago in https://crbug.com/40237190. The last action from Chrome devs was a suggestion to add a new parameter in the API. Such caution doesn't apply here for several reasons:

1. Inconsistency: Chrome behaves incorrectly, Firefox behaves correctly.
2. Existing extensions are unlikely to rely on the bug as their goal is to override the page which they achieve by adding !important and optionally setting the "user" origin.
3. Even if the bug has been used by one or two extensions, it shouldn't preclude Chrome devs from just fixing it.
4. The practical usefulness of a new parameter is questionable, it may end up being an unused arcane oddity.

So ideally this bug should be just fixed but just in case a possible parameter could be a boolean overridePage or authorOverride:

• false = before document style sheets - this is what Chrome devs suggested to be default.
• true = after document.adoptedStyleSheets or any future API in document - this is the default I suggest.
  It should be documented though that this parameter applies only to the "author" mode.

[carlosjeurissen]

@tophf There are a few more cross-browser differences:

1. The CSS from insertCSS gets injected AFTER the CSS from the page in Firefox and Orion, while it gets injected BEFORE in Chrome and Safari
2. The CSS from insertCSS gets injected AFTER the CSS from content_scripts in Chrome, Firefox and Orion. While Safari inserts the insertCSS BEFORE the content_scripts. @xeenon this seems like a bug
3. Chrome and Orion do not support the USER origin in content scripts
4. Orion does not support the USER origin in insertCSS

See demo web extension:
https://github.com/carlosjeurissen/webext-tech-demo-extensions/tree/main/demos/scripting-css-origin

Browser differences:

@dotproto As for the meaning of the colors.
yellow is the original page styling. While the others are from each injection type. The styling is only applied if the text appears in the block. So the final color means the injection type which won in the end.

As a sidenote, small typo in the mdn docs https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts: