Styling chrome:// URLs

[pabli24]

Why this can’t be implemented in stylus: #1582

List of all Chrome URLs: chrome://about/

How to make Stylus work on chrome:// URLs

• Enable flag chrome://flags/#extensions-on-chrome-urls (MS Edge edge://flags/#extensions-on-edge-urls)
  
• Add the --test-type command-line switch to hide the warning banner
  
• Download Stylus "Source code (zip)" from GitHub and extract the .zip file
• Add "chrome://*/*" to src/manifest.json (MS Edge "edge://*/*")

  "content_scripts": [
    {
      "matches": ["<all_urls>", "chrome://*/*"],

• Add chrome://|edge://| to src\js\urls.js

export const supported = /*@__PURE__*/ regExpTest.bind(new RegExp(
  `^(?:(?:ht|f)tps?:|file:|chrome://|edge://|${ownRoot}${
    !__.MV3 && CHROME && !chromeProtectsNTP ? '|chrome://newtab/' : ''
  })`
));

• Do preparation steps from the BUILD.md file, and then: pnpm zip-chrome-mv2
• Enable Developer mode in chrome://extensions/ and load unpacked Stylus extension (\dist) or drag and drop the stylus-chrome.zip
• Brave/Opera/Vivaldi: The address bar shows brave://settings/, but the actual URL is chrome://settings/. Make sure to use the correct URL in your style (url-prefix("chrome://settings/") or domain("settings"))
  

For Stylus v1.5.51 and older (click to expand)

• Download Stylus from GitHub (extract the .zip file)
• Add "chrome://*/*" to manifest.json (MS Edge "edge://*/*")

  "content_scripts": [
    {
      "matches": [
        "<all_urls>",
        "chrome://*/*"
      ],

• Add url.startsWith('chrome') || to \js\toolbox.js (MS Edge url.startsWith('edge') ||)

  supported: (url, allowOwn = true) => (
    url.startsWith('http') ||
    url.startsWith('ftp') ||
    url.startsWith('file') ||
    url.startsWith('chrome') ||
    allowOwn && url.startsWith(URLS.ownOrigin) ||
    !URLS.chromeProtectsNTP && url.startsWith('chrome://newtab/')
  ),

Dark Reader

• Download Dark Reader from GitHub (darkreader-chrome.zip) and unpack it.
• Add "chrome://*/*" to manifest.json
• Load unpacked Dark Reader extension
• Go to Dark Reader Settings and enable the “Enable on restricted pages” setting
  

[eugenesvk]

The latest version doesn't have CHROME, so the patch should be

export const supported = /*@__PURE__*/ regExpTest.bind(new RegExp(
  `^(?:(?:ht|f)tps?:|file:|chrome://|edge://|chrome-extension://|edge-extension://|${ownRoot})`
));

But this unfortunatly still doesn't work for extension pages, and trying to add chrome-extension to the manifest results in

 "content_scripts": [
    {
      "matches": ["chrome-extension://*/*","<all_urls>"],...}]

This error

Invalid value for 'content_scripts[0].matches[0]': Invalid scheme.
Could not load manifest.

(this is on Vivaldi 7.9.3969.3 (Official Build) (64-bit)
Chromium Version 146.0.7680.55 Extended Stable channel (may also include additional security patches)

[pabli24]

This will only work with chrome:// URLs.

I don't think there is any way to inject code from one extension to another.
Some extensions allow to edit their pages e.g. Tampermonkey have Custom CSS setting.

You could modify any extensions css code and load it as unpacked extension.
Easy way to download extensions from the Chrome Web Store as zip: https://github.com/Rob--W/crxviewer

[eugenesvk]

sad :(
Unfortunately, I do need autoupates for those extensions, so can't just fix them locally in an unpacked version
Similarly, it's not possible to inject any JS that could inject some CSS into extension pages, correct? Not even in a browser like VIvaldi that allows injecting .css/.js into its browser pages since these are separate and protected conexts?