darkreader 4.9.83 → 4.9.85

package/README.md

@@ -43,7 +43,7 @@ Please note that if you encounter error `Too many open files (os error 24)`, the
 
 ### Bundling with official Firefox store signatures (experimental)
 
-Prior to publication, extension stores provide digital signatures for extensions. These digital signatures certify the integrity of the archive (that extension bundle did not get corrupted or bit-rotted) and that extension store preformed very basic extension validation.
+Prior to publication, extension stores provide digital signatures for extensions. These digital signatures certify the integrity of the archive (that extension bundle did not get corrupted or bit-rotted) and that extension store performed very basic extension validation.
 
 Dark Reader repository contains these digital signatures and you can add them to the extension bundle. The following will build Dark Reader for Firefox version 4.9.63:
 ```
@@ -147,7 +147,7 @@ Step 1: change Dark Reader's settings.
 - Click on the Dark Reader icon.
 - Click on the `Dev tools` button (in the bottom-right corner).
 - Click on the `Preview new design button`.
-- Enable the `Enable on restricted pages` setting under `Settings` -> `Site list`.
+- Enable the `Enable on restricted pages` setting under `Settings` -> `Advanced`.
 
 Step 2: change Firefox's settings.
 

package/darkreader.js

@@ -1,5 +1,5 @@
 /**
- * Dark Reader v4.9.83
+ * Dark Reader v4.9.85
  * https://darkreader.org/
  */
 
@@ -127,6 +127,7 @@
     const isMatchMediaChangeEventListenerSupported =
         typeof MediaQueryList === "function" &&
         typeof MediaQueryList.prototype.addEventListener === "function";
+    const isLayerRuleSupported = typeof CSSLayerBlockRule === "function";
     (() => {
         const m = userAgent.match(/chrom(?:e|ium)(?:\/| )([^ ]+)/);
         if (m && m[1]) {
@@ -1040,12 +1041,14 @@
                 escapedSelector = escapedSelector.replaceAll(/\s+/g, "\\s*");
                 escapedSelector = escapedSelector.replaceAll(/::/g, "::?");
                 const regexp = new RegExp(
-                    `${escapedSelector}\\s*{[^}]*?${shorthand}:\\s*([^;}]+)`
+                    `${escapedSelector}\\s*{[^}]*${shorthand}:\\s*([^;}]+)`
                 );
                 const match = sourceCSSText.match(regexp);
                 if (match) {
                     iterate(shorthand, match[1]);
                 }
+            } else if (shorthand === "background") {
+                iterate("background-color", "#ffffff");
             }
         }
     }
@@ -1068,9 +1071,11 @@
     }
     function replaceCSSRelativeURLsWithAbsolute($css, cssBasePath) {
         return $css.replace(cssURLRegex, (match) => {
-            const pathValue = getCSSURLValue(match);
             try {
-                return `url('${getAbsoluteURL(cssBasePath, pathValue)}')`;
+                const url = getCSSURLValue(match);
+                const absoluteURL = getAbsoluteURL(cssBasePath, url);
+                const escapedURL = absoluteURL.replaceAll("'", "\\'");
+                return `url('${escapedURL}')`;
             } catch (err) {
                 return match;
             }
@@ -1156,7 +1161,7 @@
         if (layerRules.has(rule)) {
             return true;
         }
-        if (rule instanceof CSSLayerBlockRule) {
+        if (isLayerRuleSupported && rule instanceof CSSLayerBlockRule) {
             layerRules.add(rule);
             return true;
         }
@@ -2104,11 +2109,38 @@
         return modifyBackgroundColor(rgb, theme);
     }
 
+    const excludedSelectors = [
+        "pre",
+        "pre *",
+        "code",
+        '[aria-hidden="true"]',
+        '[class*="fa-"]',
+        ".fa",
+        ".fab",
+        ".fad",
+        ".fal",
+        ".far",
+        ".fas",
+        ".fass",
+        ".fasr",
+        ".fat",
+        ".icofont",
+        '[style*="font-"]',
+        '[class*="icon"]',
+        '[class*="Icon"]',
+        '[class*="symbol"]',
+        '[class*="Symbol"]',
+        ".glyphicon",
+        '[class*="material-symbol"]',
+        '[class*="material-icon"]',
+        "mu",
+        '[class*="mu-"]',
+        ".typcn",
+        '[class*="vjs-"]'
+    ];
     function createTextStyle(config) {
         const lines = [];
-        lines.push(
-            '*:not(pre, pre *, code, .far, .fa, .glyphicon, [class*="vjs-"], .fab, .fa-github, .fas, .material-icons, .icofont, .typcn, mu, [class*="mu-"], .glyphicon, .icon) {'
-        );
+        lines.push(`*:not(${excludedSelectors.join(", ")}) {`);
         if (config.useFont && config.fontFamily) {
             lines.push(`  font-family: ${config.fontFamily} !important;`);
         }
@@ -2348,18 +2380,10 @@
                 isDark: false,
                 isLight: false,
                 isTransparent: false,
-                isLarge: false,
-                isTooLarge: false
-            };
-        }
-        if (sw * sh > LARGE_IMAGE_PIXELS_COUNT) {
-            return {
-                isDark: false,
-                isLight: false,
-                isTransparent: false,
-                isLarge: true
+                isLarge: false
             };
         }
+        const isLarge = sw * sh > LARGE_IMAGE_PIXELS_COUNT;
         const sourcePixelsCount = sw * sh;
         const k = Math.min(
             1,
@@ -2412,7 +2436,7 @@
             isTransparent:
                 transparentPixelsCount / totalPixelsCount >=
                 TRANSPARENT_IMAGE_THRESHOLD,
-            isLarge: false
+            isLarge
         };
     }
     let isBlobURLSupported = null;
@@ -2745,6 +2769,11 @@
             `    border-color: ${modifyBorderColor({r: 128, g: 128, b: 128}, theme)};`
         );
         lines.push("}");
+        lines.push("mark {");
+        lines.push(
+            `    color: ${modifyForegroundColor({r: 0, g: 0, b: 0}, theme)};`
+        );
+        lines.push("}");
         lines.push("::placeholder {");
         lines.push(
             `    color: ${modifyForegroundColor({r: 169, g: 169, b: 169}, theme)};`
@@ -2766,6 +2795,10 @@
         if (theme.selectionColor) {
             lines.push(getModifiedSelectionStyle(theme));
         }
+        if (isLayerRuleSupported) {
+            lines.unshift("@layer {");
+            lines.push("}");
+        }
         return lines.join("\n");
     }
     function getSelectionColor(theme) {
@@ -3100,9 +3133,9 @@
                 const logSrc = imageDetails.src.startsWith("data:")
                     ? "data:"
                     : imageDetails.src;
-                if (isLarge) {
-                    logInfo(`Not modifying too large image ${logSrc}`);
-                    result = null;
+                if (isLarge && isLight && !isTransparent && theme.mode === 1) {
+                    logInfo(`Hiding large light image ${logSrc}`);
+                    result = "none";
                 } else if (
                     isDark &&
                     isTransparent &&
@@ -3518,7 +3551,11 @@
             };
         }
         getModifierForVarDependant(property, sourceValue) {
-            if (sourceValue.match(/^\s*(rgb|hsl)a?\(/)) {
+            const isConstructedColor = sourceValue.match(/^\s*(rgb|hsl)a?\(/);
+            const isSimpleConstructedColor = sourceValue.match(
+                /^rgba?\(var\(--[\-_A-Za-z0-9]+\)(\s*,?\/?\s*0?\.\d+)?\)$/
+            );
+            if (isConstructedColor && !isSimpleConstructedColor) {
                 const isBg = property.startsWith("background");
                 const isText = isTextColorProperty(property);
                 return (theme) => {
@@ -3537,21 +3574,34 @@
                     return modifier(value, theme);
                 };
             }
-            if (property === "background-color") {
+            if (
+                property === "background-color" ||
+                (isSimpleConstructedColor && property === "background")
+            ) {
                 return (theme) => {
+                    const defaultFallback = tryModifyBgColor(
+                        isConstructedColor ? "255, 255, 255" : "#ffffff",
+                        theme
+                    );
                     return replaceCSSVariablesNames(
                         sourceValue,
                         (v) => wrapBgColorVariableName(v),
-                        (fallback) => tryModifyBgColor(fallback, theme)
+                        (fallback) => tryModifyBgColor(fallback, theme),
+                        defaultFallback
                     );
                 };
             }
             if (isTextColorProperty(property)) {
                 return (theme) => {
+                    const defaultFallback = tryModifyTextColor(
+                        isConstructedColor ? "0, 0, 0" : "#000000",
+                        theme
+                    );
                     return replaceCSSVariablesNames(
                         sourceValue,
                         (v) => wrapTextColorVariableName(v),
-                        (fallback) => tryModifyTextColor(fallback, theme)
+                        (fallback) => tryModifyTextColor(fallback, theme),
+                        defaultFallback
                     );
                 };
             }
@@ -3904,7 +3954,9 @@
             return input;
         }
         const inputLength = input.length;
-        const replacements = matches.map((m) => replacer(m.value));
+        const replacements = matches.map((m) =>
+            replacer(m.value, matches.length)
+        );
         const parts = [];
         parts.push(input.substring(0, matches[0].start));
         for (let i = 0; i < matchesCount; i++) {
@@ -3929,11 +3981,19 @@
         }
         return {name, fallback};
     }
-    function replaceCSSVariablesNames(value, nameReplacer, fallbackReplacer) {
+    function replaceCSSVariablesNames(
+        value,
+        nameReplacer,
+        fallbackReplacer,
+        finalFallback
+    ) {
         const matchReplacer = (match) => {
             const {name, fallback} = getVariableNameAndFallback(match);
             const newName = nameReplacer(name);
             if (!fallback) {
+                if (finalFallback) {
+                    return `var(${newName}, ${finalFallback})`;
+                }
                 return `var(${newName})`;
             }
             let newFallback;
@@ -3977,7 +4037,10 @@
         return value.includes("var(");
     }
     function isConstructedColorVar(value) {
-        return value.match(/^\s*(rgb|hsl)a?\(/);
+        return (
+            value.match(/^\s*(rgb|hsl)a?\(/) ||
+            value.match(/^(((\d{1,3})|(var\([\-_A-Za-z0-9]+\))),?\s*?){3}$/)
+        );
     }
     function isTextColorProperty(property) {
         return (
@@ -4021,10 +4084,11 @@
     function tryModifyBorderColor(color, theme) {
         return handleRawColorValue(color, theme, modifyBorderColor);
     }
-    function insertVarValues(source, varValues, stack = new Set()) {
+    function insertVarValues(source, varValues, fullStack = new Set()) {
         let containsUnresolvedVar = false;
-        const matchReplacer = (match) => {
+        const matchReplacer = (match, count) => {
             const {name, fallback} = getVariableNameAndFallback(match);
+            const stack = count > 1 ? new Set(fullStack) : fullStack;
             if (stack.has(name)) {
                 containsUnresolvedVar = true;
                 return null;
@@ -4155,6 +4219,11 @@
                     "}"
                 ].join("\n");
             })
+            .concat([
+                "[data-darkreader-inline-invert] {",
+                "    filter: invert(100%) hue-rotate(180deg);",
+                "}"
+            ])
             .join("\n");
     }
     function getInlineStyleElements(root) {
@@ -4292,7 +4361,21 @@
         attrObservers.clear();
     }
     const inlineStyleCache = new WeakMap();
+    const svgInversionCache = new WeakSet();
+    const svgAnalysisConditionCache = new WeakMap();
     const themeProps = ["brightness", "contrast", "grayscale", "sepia", "mode"];
+    function shouldAnalyzeSVGAsImage(svg) {
+        if (svgAnalysisConditionCache.has(svg)) {
+            return svgAnalysisConditionCache.get(svg);
+        }
+        const shouldAnalyze = Boolean(
+            svg &&
+                (svg.getAttribute("class")?.includes("logo") ||
+                    svg.parentElement?.getAttribute("class")?.includes("logo"))
+        );
+        svgAnalysisConditionCache.set(svg, shouldAnalyze);
+        return shouldAnalyze;
+    }
     function getInlineStyleCacheKey(el, theme) {
         return INLINE_STYLE_ATTRS.map(
             (attr) => `${attr}="${el.getAttribute(attr)}"`
@@ -4401,6 +4484,49 @@
                 return;
             }
         }
+        const isSVGElement = element instanceof SVGElement;
+        const svg = isSVGElement
+            ? element.ownerSVGElement ??
+              (element instanceof SVGSVGElement ? element : null)
+            : null;
+        if (isSVGElement && theme.mode === 1 && svg) {
+            if (svgInversionCache.has(svg)) {
+                return;
+            }
+            if (shouldAnalyzeSVGAsImage(svg)) {
+                svgInversionCache.add(svg);
+                const analyzeSVGAsImage = () => {
+                    let svgString = svg.outerHTML;
+                    svgString = svgString.replaceAll(
+                        '<style class="darkreader darkreader--sync" media="screen"></style>',
+                        ""
+                    );
+                    const dataURL = `data:image/svg+xml;base64,${btoa(svgString)}`;
+                    getImageDetails(dataURL).then((details) => {
+                        if (
+                            (details.isDark && details.isTransparent) ||
+                            (details.isLarge &&
+                                details.isLight &&
+                                !details.isTransparent)
+                        ) {
+                            svg.setAttribute(
+                                "data-darkreader-inline-invert",
+                                ""
+                            );
+                        } else {
+                            svg.removeAttribute(
+                                "data-darkreader-inline-invert"
+                            );
+                        }
+                    });
+                };
+                analyzeSVGAsImage();
+                if (!isDOMReady()) {
+                    addDOMReadyListener(analyzeSVGAsImage);
+                }
+                return;
+            }
+        }
         if (element.hasAttribute("bgcolor")) {
             let value = element.getAttribute("bgcolor");
             if (
@@ -4433,7 +4559,7 @@
             }
             setCustomProp("color", "color", value);
         }
-        if (element instanceof SVGElement) {
+        if (isSVGElement) {
             if (element.hasAttribute("fill")) {
                 const SMALL_SVG_LIMIT = 32;
                 const value = element.getAttribute("fill");

package/index.d.ts

@@ -153,7 +153,7 @@ declare namespace DarkReader {
 
         /**
          * A toggle to disable the proxying of `document.styleSheets`.
-         * This is a API-Exclusive option, as it can break legitmate websites,
+         * This is a API-Exclusive option, as it can break legitimate websites,
          * who are using the Dark Reader API.
          */
         disableStyleSheetsProxy: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "darkreader",
-  "version": "4.9.83",
+  "version": "4.9.85",
   "description": "Dark mode for every website",
   "scripts": {
     "api": "node --max-old-space-size=3072 tasks/cli.js build --api",
@@ -9,6 +9,7 @@
     "code-style": "npm run lint",
     "debug": "node --max-old-space-size=3072 tasks/cli.js build --debug",
     "debug:watch": "node --max-old-space-size=3072 tasks/cli.js build --debug --watch --chrome --firefox",
+    "debug:watch:mv3": "node --max-old-space-size=3072 tasks/cli.js build --debug --watch --chrome-mv3",
     "dependencies:upgrade": "node tasks/dependencies.js",
     "lint": "eslint --ignore-pattern '!.eslint-plugin-local.js' -- 'src/**/*.ts' 'src/**/*.tsx' 'tasks/**/*.js' 'tests/[!coverage]**/*.js' 'tests/**/*.ts' '.eslintrc.js' 'index.d.ts'",
     "lint:bundle": "(node ./tasks/check-exists.js ./build/debug/chrome || node tasks/build.js --debug --api --chrome) && eslint -- 'build/debug/chrome/**/*.js' 'darkreader.js'",
@@ -58,21 +59,21 @@
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.5",
     "@rollup/plugin-typescript": "11.1.6",
-    "@types/chrome": "0.0.266",
-    "@types/eslint": "8.56.7",
+    "@types/chrome": "0.0.267",
+    "@types/eslint": "8.56.10",
     "@types/jasmine": "5.1.4",
     "@types/jest": "29.5.12",
     "@types/karma": "6.3.8",
     "@types/karma-coverage": "2.0.3",
-    "@types/node": "20.12.6",
+    "@types/node": "20.12.7",
     "@types/ws": "8.5.10",
-    "@typescript-eslint/eslint-plugin": "7.6.0",
-    "@typescript-eslint/parser": "7.6.0",
+    "@typescript-eslint/eslint-plugin": "7.7.1",
+    "@typescript-eslint/parser": "7.7.1",
     "chokidar": "3.6.0",
     "eslint": "8.57.0",
     "eslint-plugin-compat": "4.2.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-local": "4.2.1",
+    "eslint-plugin-local": "4.2.2",
     "globby": "14.0.1",
     "jasmine-core": "5.1.2",
     "jest": "29.7.0",
@@ -88,14 +89,14 @@
     "less": "4.2.0",
     "malevic": "0.20.1",
     "prettier": "3.2.5",
-    "puppeteer-core": "22.6.3",
-    "rollup": "4.14.1",
+    "puppeteer-core": "22.7.1",
+    "rollup": "4.17.1",
     "rollup-plugin-istanbul": "5.0.0",
     "ts-jest": "29.1.2",
     "tslib": "2.6.2",
-    "typescript": "5.4.4",
+    "typescript": "5.4.5",
     "web-ext": "7.11.0",
-    "ws": "8.16.0",
+    "ws": "8.17.0",
     "yazl": "2.5.1"
   }
 }