darkreader 4.9.71 → 4.9.75

package/darkreader.js

@@ -1,5 +1,5 @@
 /**
- * Dark Reader v4.9.71
+ * Dark Reader v4.9.75
  * https://darkreader.org/
  */
 
@@ -464,6 +464,22 @@
             });
         });
     }
+    function loadAsBlob(url, mimeType) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        return [4, getOKResponse(url, mimeType)];
+                    case 1:
+                        response = _a.sent();
+                        return [4, response.blob()];
+                    case 2:
+                        return [2, _a.sent()];
+                }
+            });
+        });
+    }
     function readResponseAsDataURL(response) {
         return __awaiter(this, void 0, void 0, function () {
             var blob, dataURL;
@@ -835,6 +851,17 @@
         }
         return {add: add, cancel: cancel};
     }
+    var delayTokens = new Set();
+    function requestAnimationFrameOnce(token, callback) {
+        if (delayTokens.has(token)) {
+            return;
+        }
+        delayTokens.add(token);
+        requestAnimationFrame(function () {
+            delayTokens.delete(token);
+            callback();
+        });
+    }
 
     function getDuration(time) {
         var duration = 0;
@@ -2590,24 +2617,24 @@
         }
     });
 
+    var MAX_FRAME_DURATION = 1000 / 60;
     var AsyncQueue = (function () {
         function AsyncQueue() {
             this.queue = [];
             this.timerId = null;
-            this.frameDuration = 1000 / 60;
         }
-        AsyncQueue.prototype.addToQueue = function (entry) {
-            this.queue.push(entry);
-            this.startQueue();
+        AsyncQueue.prototype.addTask = function (task) {
+            this.queue.push(task);
+            this.scheduleFrame();
         };
-        AsyncQueue.prototype.stopQueue = function () {
+        AsyncQueue.prototype.stop = function () {
             if (this.timerId !== null) {
                 cancelAnimationFrame(this.timerId);
                 this.timerId = null;
             }
             this.queue = [];
         };
-        AsyncQueue.prototype.startQueue = function () {
+        AsyncQueue.prototype.scheduleFrame = function () {
             var _this = this;
             if (this.timerId) {
                 return;
@@ -2618,8 +2645,8 @@
                 var cb;
                 while ((cb = _this.queue.shift())) {
                     cb();
-                    if (Date.now() - start >= _this.frameDuration) {
-                        _this.startQueue();
+                    if (Date.now() - start >= MAX_FRAME_DURATION) {
+                        _this.scheduleFrame();
                         break;
                     }
                 }
@@ -2637,53 +2664,97 @@
                     2,
                     new Promise(function (resolve, reject) {
                         return __awaiter(_this, void 0, void 0, function () {
-                            var dataURL, error_1, image_1, error_2;
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
+                            var dataURL_1, _a, blob_1, _b, image_1, _c, error_1;
+                            var _d, _e;
+                            return __generator(this, function (_f) {
+                                switch (_f.label) {
                                     case 0:
+                                        _f.trys.push([0, 14, , 15]);
                                         if (!url.startsWith("data:"))
                                             return [3, 1];
-                                        dataURL = url;
-                                        return [3, 4];
+                                        _a = url;
+                                        return [3, 3];
                                     case 1:
-                                        _a.trys.push([1, 3, , 4]);
-                                        return [4, getImageDataURL(url)];
+                                        return [4, getDataURL(url)];
                                     case 2:
-                                        dataURL = _a.sent();
-                                        return [3, 4];
+                                        _a = _f.sent();
+                                        _f.label = 3;
                                     case 3:
-                                        error_1 = _a.sent();
-                                        reject(error_1);
-                                        return [2];
+                                        dataURL_1 = _a;
+                                        if (
+                                            !(
+                                                (_d =
+                                                    tryConvertDataURLToBlobSync(
+                                                        dataURL_1
+                                                    )) !== null && _d !== void 0
+                                            )
+                                        )
+                                            return [3, 4];
+                                        _b = _d;
+                                        return [3, 6];
                                     case 4:
-                                        _a.trys.push([4, 6, , 7]);
-                                        return [4, urlToImage(dataURL)];
+                                        return [4, loadAsBlob(url)];
                                     case 5:
-                                        image_1 = _a.sent();
-                                        imageManager.addToQueue(function () {
+                                        _b = _f.sent();
+                                        _f.label = 6;
+                                    case 6:
+                                        blob_1 = _b;
+                                        if (
+                                            !dataURL_1.startsWith(
+                                                "data:image/svg+xml"
+                                            )
+                                        )
+                                            return [3, 8];
+                                        return [4, loadImage(dataURL_1)];
+                                    case 7:
+                                        image_1 = _f.sent();
+                                        return [3, 13];
+                                    case 8:
+                                        return [
+                                            4,
+                                            tryCreateImageBitmap(blob_1)
+                                        ];
+                                    case 9:
+                                        if (
+                                            !(
+                                                (_e = _f.sent()) !== null &&
+                                                _e !== void 0
+                                            )
+                                        )
+                                            return [3, 10];
+                                        _c = _e;
+                                        return [3, 12];
+                                    case 10:
+                                        return [4, loadImage(dataURL_1)];
+                                    case 11:
+                                        _c = _f.sent();
+                                        _f.label = 12;
+                                    case 12:
+                                        image_1 = _c;
+                                        _f.label = 13;
+                                    case 13:
+                                        imageManager.addTask(function () {
                                             var analysis =
                                                 analyzeImage(image_1);
                                             resolve(
                                                 __assign(
                                                     {
                                                         src: url,
-                                                        dataURL:
-                                                            analysis.isLarge
-                                                                ? ""
-                                                                : dataURL,
-                                                        width: image_1.naturalWidth,
-                                                        height: image_1.naturalHeight
+                                                        blob: blob_1,
+                                                        dataURL: dataURL_1,
+                                                        width: image_1.width,
+                                                        height: image_1.height
                                                     },
                                                     analysis
                                                 )
                                             );
                                         });
-                                        return [3, 7];
-                                    case 6:
-                                        error_2 = _a.sent();
-                                        reject(error_2);
-                                        return [3, 7];
-                                    case 7:
+                                        return [3, 15];
+                                    case 14:
+                                        error_1 = _f.sent();
+                                        reject(error_1);
+                                        return [3, 15];
+                                    case 15:
                                         return [2];
                                 }
                             });
@@ -2693,7 +2764,7 @@
             });
         });
     }
-    function getImageDataURL(url) {
+    function getDataURL(url) {
         return __awaiter(this, void 0, void 0, function () {
             var parsedURL;
             return __generator(this, function (_a) {
@@ -2716,7 +2787,33 @@
             });
         });
     }
-    function urlToImage(url) {
+    function tryCreateImageBitmap(blob) {
+        return __awaiter(this, void 0, void 0, function () {
+            var err_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4, createImageBitmap(blob)];
+                    case 1:
+                        return [2, _a.sent()];
+                    case 2:
+                        err_1 = _a.sent();
+                        logWarn(
+                            "Unable to create image bitmap for type "
+                                .concat(blob.type, ": ")
+                                .concat(String(err_1))
+                        );
+                        return [2, null];
+                    case 3:
+                        return [2];
+                }
+            });
+        });
+    }
+    var INCOMPLETE_DOC_LOADING_IMAGE_LIMIT = 256;
+    var loadingImagesCount = 0;
+    function loadImage(url) {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 return [
@@ -2729,7 +2826,17 @@
                         image.onerror = function () {
                             return reject("Unable to load image ".concat(url));
                         };
-                        image.src = url;
+                        if (
+                            ++loadingImagesCount <=
+                                INCOMPLETE_DOC_LOADING_IMAGE_LIMIT ||
+                            isReadyStateComplete()
+                        ) {
+                            image.src = url;
+                        } else {
+                            addReadyStateCompleteListener(function () {
+                                return (image.src = url);
+                            });
+                        }
                     })
                 ];
             });
@@ -2756,10 +2863,16 @@
         if (!canvas) {
             createCanvas();
         }
-        var naturalWidth = image.naturalWidth,
-            naturalHeight = image.naturalHeight;
-        if (naturalHeight === 0 || naturalWidth === 0) {
-            logWarn("logWarn(Image is empty ".concat(image.currentSrc, ")"));
+        var sw;
+        var sh;
+        if (image instanceof HTMLImageElement) {
+            sw = image.naturalWidth;
+            sh = image.naturalHeight;
+        } else {
+            sw = image.width;
+            sh = image.height;
+        }
+        if (sw === 0 || sh === 0) {
             return {
                 isDark: false,
                 isLight: false,
@@ -2768,7 +2881,7 @@
                 isTooLarge: false
             };
         }
-        if (naturalWidth * naturalHeight > LARGE_IMAGE_PIXELS_COUNT) {
+        if (sw * sh > LARGE_IMAGE_PIXELS_COUNT) {
             return {
                 isDark: false,
                 isLight: false,
@@ -2776,25 +2889,15 @@
                 isLarge: true
             };
         }
-        var naturalPixelsCount = naturalWidth * naturalHeight;
+        var sourcePixelsCount = sw * sh;
         var k = Math.min(
             1,
-            Math.sqrt(MAX_ANALYSIS_PIXELS_COUNT / naturalPixelsCount)
+            Math.sqrt(MAX_ANALYSIS_PIXELS_COUNT / sourcePixelsCount)
         );
-        var width = Math.ceil(naturalWidth * k);
-        var height = Math.ceil(naturalHeight * k);
+        var width = Math.ceil(sw * k);
+        var height = Math.ceil(sh * k);
         context.clearRect(0, 0, width, height);
-        context.drawImage(
-            image,
-            0,
-            0,
-            naturalWidth,
-            naturalHeight,
-            0,
-            0,
-            width,
-            height
-        );
+        context.drawImage(image, 0, 0, sw, sh, 0, 0, width, height);
         var imageData = context.getImageData(0, 0, width, height);
         var d = imageData.data;
         var TRANSPARENT_ALPHA_THRESHOLD = 0.05;
@@ -2841,10 +2944,86 @@
             isLarge: false
         };
     }
-    function getFilteredImageDataURL(_a, theme) {
+    var isBlobURLSupported = null;
+    var canUseProxy = false;
+    var blobURLCheckRequested = false;
+    var blobURLCheckAwaiters = [];
+    document.addEventListener(
+        "__darkreader__inlineScriptsAllowed",
+        function () {
+            return (canUseProxy = true);
+        },
+        {once: true}
+    );
+    function requestBlobURLCheck() {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!canUseProxy) {
+                            return [2];
+                        }
+                        if (!blobURLCheckRequested) return [3, 2];
+                        return [
+                            4,
+                            new Promise(function (resolve) {
+                                return blobURLCheckAwaiters.push(resolve);
+                            })
+                        ];
+                    case 1:
+                        return [2, _a.sent()];
+                    case 2:
+                        blobURLCheckRequested = true;
+                        return [
+                            4,
+                            new Promise(function (resolve) {
+                                document.addEventListener(
+                                    "__darkreader__blobURLCheckResponse",
+                                    function (e) {
+                                        isBlobURLSupported =
+                                            e.detail.blobURLAllowed;
+                                        resolve();
+                                        blobURLCheckAwaiters.forEach(
+                                            function (r) {
+                                                return r();
+                                            }
+                                        );
+                                        blobURLCheckAwaiters.splice(0);
+                                    },
+                                    {once: true}
+                                );
+                                document.dispatchEvent(
+                                    new CustomEvent(
+                                        "__darkreader__blobURLCheckRequest"
+                                    )
+                                );
+                            })
+                        ];
+                    case 3:
+                        _a.sent();
+                        return [2];
+                }
+            });
+        });
+    }
+    function isBlobURLCheckResultReady() {
+        return isBlobURLSupported != null || !canUseProxy;
+    }
+    function onCSPError(err) {
+        if (err.blockedURI === "blob") {
+            isBlobURLSupported = false;
+            document.removeEventListener("securitypolicyviolation", onCSPError);
+        }
+    }
+    document.addEventListener("securitypolicyviolation", onCSPError);
+    var objectURLs = new Set();
+    function getFilteredImageURL(_a, theme) {
         var dataURL = _a.dataURL,
             width = _a.width,
             height = _a.height;
+        if (dataURL.startsWith("data:image/svg+xml")) {
+            dataURL = escapeXML(dataURL);
+        }
         var matrix = getSVGFilterMatrixValue(theme);
         var svg = [
             '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="'
@@ -2864,11 +3043,91 @@
                 .concat(dataURL, '" />'),
             "</svg>"
         ].join("");
-        return "data:image/svg+xml;base64,".concat(btoa(svg));
+        if (!isBlobURLSupported) {
+            return "data:image/svg+xml;base64,".concat(btoa(svg));
+        }
+        var bytes = new Uint8Array(svg.length);
+        for (var i = 0; i < svg.length; i++) {
+            bytes[i] = svg.charCodeAt(i);
+        }
+        var blob = new Blob([bytes], {type: "image/svg+xml"});
+        var objectURL = URL.createObjectURL(blob);
+        objectURLs.add(objectURL);
+        return objectURL;
+    }
+    var xmlEscapeChars = {
+        "<": "&lt;",
+        ">": "&gt;",
+        "&": "&amp;",
+        "'": "&apos;",
+        '"': "&quot;"
+    };
+    function escapeXML(str) {
+        return str.replace(/[<>&'"]/g, function (c) {
+            var _a;
+            return (_a = xmlEscapeChars[c]) !== null && _a !== void 0 ? _a : c;
+        });
+    }
+    var dataURLBlobURLs = new Map();
+    function tryConvertDataURLToBlobSync(dataURL) {
+        var colonIndex = dataURL.indexOf(":");
+        var semicolonIndex = dataURL.indexOf(";", colonIndex + 1);
+        var commaIndex = dataURL.indexOf(",", semicolonIndex + 1);
+        var encoding = dataURL
+            .substring(semicolonIndex + 1, commaIndex)
+            .toLocaleLowerCase();
+        var mediaType = dataURL.substring(colonIndex + 1, semicolonIndex);
+        if (encoding !== "base64" || !mediaType) {
+            return null;
+        }
+        var characters = atob(dataURL.substring(commaIndex + 1));
+        var bytes = new Uint8Array(characters.length);
+        for (var i = 0; i < characters.length; i++) {
+            bytes[i] = characters.charCodeAt(i);
+        }
+        return new Blob([bytes], {type: mediaType});
+    }
+    function tryConvertDataURLToBlobURL(dataURL) {
+        return __awaiter(this, void 0, void 0, function () {
+            var blobURL, blob, response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!isBlobURLSupported) {
+                            return [2, null];
+                        }
+                        blobURL = dataURLBlobURLs.get(dataURL);
+                        if (blobURL) {
+                            return [2, blobURL];
+                        }
+                        blob = tryConvertDataURLToBlobSync(dataURL);
+                        if (!!blob) return [3, 3];
+                        return [4, fetch(dataURL)];
+                    case 1:
+                        response = _a.sent();
+                        return [4, response.blob()];
+                    case 2:
+                        blob = _a.sent();
+                        _a.label = 3;
+                    case 3:
+                        blobURL = URL.createObjectURL(blob);
+                        dataURLBlobURLs.set(dataURL, blobURL);
+                        return [2, blobURL];
+                }
+            });
+        });
     }
     function cleanImageProcessingCache() {
-        imageManager && imageManager.stopQueue();
+        imageManager && imageManager.stop();
         removeCanvas();
+        objectURLs.forEach(function (u) {
+            return URL.revokeObjectURL(u);
+        });
+        objectURLs.clear();
+        dataURLBlobURLs.forEach(function (u) {
+            return URL.revokeObjectURL(u);
+        });
+        dataURLBlobURLs.clear();
     }
 
     var gradientLength = "gradient".length;
@@ -3509,24 +3768,35 @@
                               ? void 0
                               : _a.baseURI) || location.origin;
                 url = getAbsoluteURL(baseURL, url);
-                var absoluteValue = 'url("'.concat(url, '")');
                 return function (filter) {
                     return __awaiter(_this, void 0, void 0, function () {
-                        var imageDetails, awaiters_1, err_1, bgImageValue;
+                        var imageDetails,
+                            awaiters_1,
+                            err_1,
+                            bgImageValue,
+                            blobURL;
                         return __generator(this, function (_a) {
                             switch (_a.label) {
                                 case 0:
                                     if (isURLEmpty) {
                                         return [2, "url('')"];
                                     }
+                                    imageDetails = null;
                                     if (!imageDetailsCache.has(url))
                                         return [3, 1];
                                     imageDetails = imageDetailsCache.get(url);
-                                    return [3, 7];
+                                    return [3, 9];
                                 case 1:
-                                    _a.trys.push([1, 6, , 7]);
-                                    if (!awaitingForImageLoading.has(url))
+                                    _a.trys.push([1, 8, , 9]);
+                                    if (!!isBlobURLCheckResultReady())
                                         return [3, 3];
+                                    return [4, requestBlobURLCheck()];
+                                case 2:
+                                    _a.sent();
+                                    _a.label = 3;
+                                case 3:
+                                    if (!awaitingForImageLoading.has(url))
+                                        return [3, 5];
                                     awaiters_1 =
                                         awaitingForImageLoading.get(url);
                                     return [
@@ -3535,16 +3805,16 @@
                                             return awaiters_1.push(resolve);
                                         })
                                     ];
-                                case 2:
+                                case 4:
                                     imageDetails = _a.sent();
                                     if (!imageDetails) {
                                         return [2, null];
                                     }
-                                    return [3, 5];
-                                case 3:
+                                    return [3, 7];
+                                case 5:
                                     awaitingForImageLoading.set(url, []);
                                     return [4, getImageDetails(url)];
-                                case 4:
+                                case 6:
                                     imageDetails = _a.sent();
                                     imageDetailsCache.set(url, imageDetails);
                                     awaitingForImageLoading
@@ -3553,13 +3823,13 @@
                                             return resolve(imageDetails);
                                         });
                                     awaitingForImageLoading.delete(url);
-                                    _a.label = 5;
-                                case 5:
+                                    _a.label = 7;
+                                case 7:
                                     if (isCancelled()) {
                                         return [2, null];
                                     }
-                                    return [3, 7];
-                                case 6:
+                                    return [3, 9];
+                                case 8:
                                     err_1 = _a.sent();
                                     logWarn(err_1);
                                     if (awaitingForImageLoading.has(url)) {
@@ -3570,14 +3840,31 @@
                                             });
                                         awaitingForImageLoading.delete(url);
                                     }
-                                    return [2, absoluteValue];
-                                case 7:
-                                    bgImageValue =
-                                        getBgImageValue_1(
+                                    return [3, 9];
+                                case 9:
+                                    if (imageDetails) {
+                                        bgImageValue = getBgImageValue_1(
                                             imageDetails,
                                             filter
-                                        ) || absoluteValue;
-                                    return [2, bgImageValue];
+                                        );
+                                        if (bgImageValue) {
+                                            return [2, bgImageValue];
+                                        }
+                                    }
+                                    if (!url.startsWith("data:"))
+                                        return [3, 11];
+                                    return [4, tryConvertDataURLToBlobURL(url)];
+                                case 10:
+                                    blobURL = _a.sent();
+                                    if (blobURL) {
+                                        return [
+                                            2,
+                                            'url("'.concat(blobURL, '")')
+                                        ];
+                                    }
+                                    _a.label = 11;
+                                case 11:
+                                    return [2, 'url("'.concat(url, '")')];
                             }
                         });
                     });
@@ -3590,21 +3877,20 @@
                     isLarge = imageDetails.isLarge,
                     width = imageDetails.width;
                 var result;
+                var logSrc = imageDetails.src.startsWith("data:")
+                    ? "data:"
+                    : imageDetails.src;
                 if (isLarge) {
-                    logInfo(
-                        "Not modifying too large image ".concat(
-                            imageDetails.src
-                        )
-                    );
-                    result = 'url("'.concat(imageDetails.src, '")');
+                    logInfo("Not modifying too large image ".concat(logSrc));
+                    result = null;
                 } else if (
                     isDark &&
                     isTransparent &&
                     filter.mode === 1 &&
                     width > 2
                 ) {
-                    logInfo("Inverting dark image ".concat(imageDetails.src));
-                    var inverted = getFilteredImageDataURL(
+                    logInfo("Inverting dark image ".concat(logSrc));
+                    var inverted = getFilteredImageURL(
                         imageDetails,
                         __assign(__assign({}, filter), {
                             sepia: clamp(filter.sepia + 10, 0, 100)
@@ -3612,14 +3898,12 @@
                     );
                     result = 'url("'.concat(inverted, '")');
                 } else if (isLight && !isTransparent && filter.mode === 1) {
-                    logInfo("Dimming light image ".concat(imageDetails.src));
-                    var dimmed = getFilteredImageDataURL(imageDetails, filter);
+                    logInfo("Dimming light image ".concat(logSrc));
+                    var dimmed = getFilteredImageURL(imageDetails, filter);
                     result = 'url("'.concat(dimmed, '")');
                 } else if (filter.mode === 0 && isLight) {
-                    logInfo(
-                        "Applying filter to image ".concat(imageDetails.src)
-                    );
-                    var filtered = getFilteredImageDataURL(
+                    logInfo("Applying filter to image ".concat(logSrc));
+                    var filtered = getFilteredImageURL(
                         imageDetails,
                         __assign(__assign({}, filter), {
                             brightness: clamp(filter.brightness - 10, 5, 200),
@@ -3628,11 +3912,7 @@
                     );
                     result = 'url("'.concat(filtered, '")');
                 } else {
-                    logInfo(
-                        "Not modifying too large image ".concat(
-                            imageDetails.src
-                        )
-                    );
+                    logInfo("Not modifying the image ".concat(logSrc));
                     result = null;
                 }
                 return result;
@@ -3805,6 +4085,7 @@
         function VariablesStore() {
             this.varTypes = new Map();
             this.rulesQueue = [];
+            this.inlineStyleQueue = [];
             this.definedVars = new Set();
             this.varRefs = new Map();
             this.unknownColorVars = new Set();
@@ -3818,6 +4099,7 @@
         VariablesStore.prototype.clear = function () {
             this.varTypes.clear();
             this.rulesQueue.splice(0);
+            this.inlineStyleQueue.splice(0);
             this.definedVars.clear();
             this.varRefs.clear();
             this.unknownColorVars.clear();
@@ -3837,13 +4119,21 @@
         VariablesStore.prototype.addRulesForMatching = function (rules) {
             this.rulesQueue.push(rules);
         };
+        VariablesStore.prototype.addInlineStyleForMatching = function (style) {
+            this.inlineStyleQueue.push(style);
+        };
         VariablesStore.prototype.matchVariablesAndDependents = function () {
             var _this = this;
+            if (
+                this.rulesQueue.length === 0 &&
+                this.inlineStyleQueue.length === 0
+            ) {
+                return;
+            }
             this.changedTypeVars.clear();
             this.initialVarTypes = new Map(this.varTypes);
             this.collectRootVariables();
-            this.collectVariablesAndVarDep(this.rulesQueue);
-            this.rulesQueue.splice(0);
+            this.collectVariablesAndVarDep();
             this.collectRootVarDependents();
             this.varRefs.forEach(function (refs, v) {
                 refs.forEach(function (r) {
@@ -4176,29 +4466,49 @@
                 this.typeChangeSubscriptions.get(varName).delete(callback);
             }
         };
-        VariablesStore.prototype.collectVariablesAndVarDep = function (
-            ruleList
-        ) {
+        VariablesStore.prototype.collectVariablesAndVarDep = function () {
             var _this = this;
-            ruleList.forEach(function (rules) {
+            this.rulesQueue.forEach(function (rules) {
                 iterateCSSRules(rules, function (rule) {
-                    rule.style &&
-                        iterateCSSDeclarations(
-                            rule.style,
-                            function (property, value) {
-                                if (isVariable(property)) {
-                                    _this.inspectVariable(property, value);
-                                }
-                                if (isVarDependant(value)) {
-                                    _this.inspectVarDependant(property, value);
-                                }
-                            }
-                        );
+                    if (rule.style) {
+                        _this.collectVarsFromCSSDeclarations(rule.style);
+                    }
                 });
             });
+            this.inlineStyleQueue.forEach(function (style) {
+                _this.collectVarsFromCSSDeclarations(style);
+            });
+            this.rulesQueue.splice(0);
+            this.inlineStyleQueue.splice(0);
+        };
+        VariablesStore.prototype.collectVarsFromCSSDeclarations = function (
+            style
+        ) {
+            var _this = this;
+            iterateCSSDeclarations(style, function (property, value) {
+                if (isVariable(property)) {
+                    _this.inspectVariable(property, value);
+                }
+                if (isVarDependant(value)) {
+                    _this.inspectVarDependant(property, value);
+                }
+            });
+        };
+        VariablesStore.prototype.shouldProcessRootVariables = function () {
+            var _a;
+            return (
+                this.rulesQueue.length > 0 &&
+                ((_a = document.documentElement.getAttribute("style")) ===
+                    null || _a === void 0
+                    ? void 0
+                    : _a.includes("--"))
+            );
         };
         VariablesStore.prototype.collectRootVariables = function () {
             var _this = this;
+            if (!this.shouldProcessRootVariables()) {
+                return;
+            }
             iterateCSSDeclarations(
                 document.documentElement.style,
                 function (property, value) {
@@ -4247,6 +4557,9 @@
         };
         VariablesStore.prototype.collectRootVarDependents = function () {
             var _this = this;
+            if (!this.shouldProcessRootVariables()) {
+                return;
+            }
             iterateCSSDeclarations(
                 document.documentElement.style,
                 function (property, value) {
@@ -4654,7 +4967,7 @@
         return replaced;
     }
 
-    var overrides = {
+    var overrides$1 = {
         "background-color": {
             customProp: "--darkreader-inline-bgcolor",
             cssProp: "background-color",
@@ -4721,7 +5034,14 @@
             dataAttr: "data-darkreader-inline-stopcolor"
         }
     };
-    var overridesList = Object.values(overrides);
+    var shorthandOverrides = {
+        background: {
+            customProp: "--darkreader-inline-bg",
+            cssProp: "background",
+            dataAttr: "data-darkreader-inline-bg"
+        }
+    };
+    var overridesList = Object.values(overrides$1);
     var normalizedPropList = {};
     overridesList.forEach(function (_a) {
         var cssProp = _a.cssProp,
@@ -4740,7 +5060,10 @@
         return "[".concat(attr, "]");
     }).join(", ");
     function getInlineOverrideStyle() {
-        return overridesList
+        var allOverrides = overridesList.concat(
+            Object.values(shorthandOverrides)
+        );
+        return allOverrides
             .map(function (_a) {
                 var dataAttr = _a.dataAttr,
                     customProp = _a.customProp,
@@ -4815,6 +5138,7 @@
                     shadowRootDiscovered
                 );
             });
+            variablesStore.matchVariablesAndDependents();
         }
         var treeObserver = createOptimizedTreeObserver(root, {
             onMinorMutations: function (_a) {
@@ -4847,6 +5171,7 @@
                     elementStyleDidChange(target);
                 }
             });
+            variablesStore.matchVariablesAndDependents();
         });
         var attrObserver = new MutationObserver(function (mutations) {
             if (timeoutId) {
@@ -4931,16 +5256,13 @@
         ignoreInlineSelectors,
         ignoreImageSelectors
     ) {
+        var _a;
         var cacheKey = getInlineStyleCacheKey(element, theme);
         if (cacheKey === inlineStyleCache.get(element)) {
             return;
         }
-        var unsetProps = new Set(Object.keys(overrides));
+        var unsetProps = new Set(Object.keys(overrides$1));
         function setCustomProp(targetCSSProp, modifierCSSProp, cssVal) {
-            var isPropertyVariable = targetCSSProp.startsWith("--");
-            var _a = isPropertyVariable ? {} : overrides[targetCSSProp],
-                customProp = _a.customProp,
-                dataAttr = _a.dataAttr;
             var mod = getModifiableCSSDeclaration(
                 modifierCSSProp,
                 cssVal,
@@ -4952,30 +5274,65 @@
             if (!mod) {
                 return;
             }
-            var value = mod.value;
-            if (typeof value === "function") {
-                value = value(theme);
-            }
-            if (isPropertyVariable && typeof value === "object") {
-                var typedValue = value;
-                typedValue.declarations.forEach(function (_a) {
-                    var property = _a.property,
-                        value = _a.value;
-                    !(value instanceof Promise) &&
-                        element.style.setProperty(property, value);
-                });
-            } else {
+            function setStaticValue(value) {
+                var _a;
+                var _b =
+                        (_a = overrides$1[targetCSSProp]) !== null &&
+                        _a !== void 0
+                            ? _a
+                            : shorthandOverrides[targetCSSProp],
+                    customProp = _b.customProp,
+                    dataAttr = _b.dataAttr;
                 element.style.setProperty(customProp, value);
                 if (!element.hasAttribute(dataAttr)) {
                     element.setAttribute(dataAttr, "");
                 }
                 unsetProps.delete(targetCSSProp);
             }
+            function setVarDeclaration(mod) {
+                var prevDeclarations = [];
+                function setProps(declarations) {
+                    prevDeclarations.forEach(function (_a) {
+                        var property = _a.property;
+                        element.style.removeProperty(property);
+                    });
+                    declarations.forEach(function (_a) {
+                        var property = _a.property,
+                            value = _a.value;
+                        if (!(value instanceof Promise)) {
+                            element.style.setProperty(property, value);
+                        }
+                    });
+                    prevDeclarations = declarations;
+                }
+                setProps(mod.declarations);
+                mod.onTypeChange.addListener(setProps);
+            }
+            function setAsyncValue(promise) {
+                promise.then(function (value) {
+                    if (
+                        value &&
+                        targetCSSProp === "background" &&
+                        value.startsWith("var(--darkreader-bg--")
+                    ) {
+                        setStaticValue(value);
+                    }
+                });
+            }
+            var value =
+                typeof mod.value === "function" ? mod.value(theme) : mod.value;
+            if (typeof value === "string") {
+                setStaticValue(value);
+            } else if (value instanceof Promise) {
+                setAsyncValue(value);
+            } else if (typeof value === "object") {
+                setVarDeclaration(value);
+            }
         }
         if (ignoreInlineSelectors.length > 0) {
             if (shouldIgnoreInlineStyle(element, ignoreInlineSelectors)) {
                 unsetProps.forEach(function (cssProp) {
-                    element.removeAttribute(overrides[cssProp].dataAttr);
+                    element.removeAttribute(overrides$1[cssProp].dataAttr);
                 });
                 return;
             }
@@ -5054,19 +5411,24 @@
                     return;
                 }
                 if (
-                    overrides.hasOwnProperty(property) ||
+                    overrides$1.hasOwnProperty(property) ||
                     (property.startsWith("--") && !normalizedPropList[property])
                 ) {
                     setCustomProp(property, property, value);
+                } else if (
+                    property === "background" &&
+                    value.includes("var(")
+                ) {
+                    setCustomProp("background", "background", value);
                 } else {
-                    var overridenProp = normalizedPropList[property];
+                    var overriddenProp = normalizedPropList[property];
                     if (
-                        overridenProp &&
-                        !element.style.getPropertyValue(overridenProp) &&
-                        !element.hasAttribute(overridenProp)
+                        overriddenProp &&
+                        !element.style.getPropertyValue(overriddenProp) &&
+                        !element.hasAttribute(overriddenProp)
                     ) {
                         if (
-                            overridenProp === "background-color" &&
+                            overriddenProp === "background-color" &&
                             element.hasAttribute("bgcolor")
                         ) {
                             return;
@@ -5086,8 +5448,15 @@
                 element.style.getPropertyValue("fill")
             );
         }
+        if (
+            (_a = element.getAttribute("style")) === null || _a === void 0
+                ? void 0
+                : _a.includes("--")
+        ) {
+            variablesStore.addInlineStyleForMatching(element.style);
+        }
         forEach(unsetProps, function (cssProp) {
-            element.removeAttribute(overrides[cssProp].dataAttr);
+            element.removeAttribute(overrides$1[cssProp].dataAttr);
         });
         inlineStyleCache.set(element, getInlineStyleCacheKey(element, theme));
     }
@@ -5254,25 +5623,9 @@
             }
             renderId++;
             function setRule(target, index, rule) {
+                var e_1, _a;
                 var selector = rule.selector,
                     declarations = rule.declarations;
-                var getDeclarationText = function (dec) {
-                    var property = dec.property,
-                        value = dec.value,
-                        important = dec.important,
-                        sourceValue = dec.sourceValue;
-                    return ""
-                        .concat(property, ": ")
-                        .concat(value == null ? sourceValue : value)
-                        .concat(important ? " !important" : "", ";");
-                };
-                var cssRulesText = "";
-                declarations.forEach(function (declarations) {
-                    cssRulesText += "".concat(
-                        getDeclarationText(declarations),
-                        " "
-                    );
-                });
                 var selectorText = selector;
                 if (
                     isChromium &&
@@ -5284,9 +5637,40 @@
                 ) {
                     selectorText = ".darkreader-unsupported-selector";
                 }
-                var ruleText = ""
-                    .concat(selectorText, " { ")
-                    .concat(cssRulesText, " }");
+                var ruleText = "".concat(selectorText, " {");
+                try {
+                    for (
+                        var declarations_1 = __values(declarations),
+                            declarations_1_1 = declarations_1.next();
+                        !declarations_1_1.done;
+                        declarations_1_1 = declarations_1.next()
+                    ) {
+                        var dec = declarations_1_1.value;
+                        var property = dec.property,
+                            value = dec.value,
+                            important = dec.important;
+                        if (value) {
+                            ruleText += " "
+                                .concat(property, ": ")
+                                .concat(value)
+                                .concat(important ? " !important" : "", ";");
+                        }
+                    }
+                } catch (e_1_1) {
+                    e_1 = {error: e_1_1};
+                } finally {
+                    try {
+                        if (
+                            declarations_1_1 &&
+                            !declarations_1_1.done &&
+                            (_a = declarations_1.return)
+                        )
+                            _a.call(declarations_1);
+                    } finally {
+                        if (e_1) throw e_1.error;
+                    }
+                }
+                ruleText += " }";
                 target.insertRule(ruleText, index);
             }
             var asyncDeclarations = new Map();
@@ -6600,10 +6984,22 @@
         unsubscribeFromDefineCustomElements();
     }
 
-    var adoptedStyleOverrides = new WeakMap();
-    var overrideList = new WeakSet();
+    var overrides = new WeakSet();
+    function hasAdoptedStyleSheets(node) {
+        return (
+            Array.isArray(node.adoptedStyleSheets) &&
+            node.adoptedStyleSheets.length > 0
+        );
+    }
     function createAdoptedStyleSheetOverride(node) {
         var cancelAsyncOperations = false;
+        function iterateSourceSheets(iterator) {
+            node.adoptedStyleSheets.forEach(function (sheet) {
+                if (!overrides.has(sheet)) {
+                    iterator(sheet);
+                }
+            });
+        }
         function injectSheet(sheet, override) {
             var newSheets = __spreadArray(
                 [],
@@ -6611,54 +7007,74 @@
                 false
             );
             var sheetIndex = newSheets.indexOf(sheet);
-            var existingIndex = newSheets.indexOf(override);
-            if (sheetIndex === existingIndex - 1) {
-                return;
-            }
-            if (existingIndex >= 0) {
-                newSheets.splice(existingIndex, 1);
+            var overrideIndex = newSheets.indexOf(override);
+            if (overrideIndex >= 0) {
+                newSheets.splice(overrideIndex, 1);
             }
             newSheets.splice(sheetIndex + 1, 0, override);
             node.adoptedStyleSheets = newSheets;
         }
-        function destroy() {
-            cancelAsyncOperations = true;
+        function clear() {
             var newSheets = __spreadArray(
                 [],
                 __read(node.adoptedStyleSheets),
                 false
             );
-            node.adoptedStyleSheets.forEach(function (adoptedStyleSheet) {
-                if (overrideList.has(adoptedStyleSheet)) {
-                    var existingIndex = newSheets.indexOf(adoptedStyleSheet);
-                    if (existingIndex >= 0) {
-                        newSheets.splice(existingIndex, 1);
-                    }
-                    adoptedStyleOverrides.delete(adoptedStyleSheet);
-                    overrideList.delete(adoptedStyleSheet);
+            for (var i = newSheets.length - 1; i >= 0; i--) {
+                var sheet = newSheets[i];
+                if (overrides.has(sheet)) {
+                    newSheets.splice(i, 1);
+                    overrides.delete(sheet);
                 }
+            }
+            if (node.adoptedStyleSheets.length !== newSheets.length) {
+                node.adoptedStyleSheets = newSheets;
+            }
+        }
+        function destroy() {
+            cancelAsyncOperations = true;
+            clear();
+            if (frameId) {
+                cancelAnimationFrame(frameId);
+                frameId = null;
+            }
+        }
+        var rulesChangeKey = 0;
+        function getRulesChangeKey() {
+            var count = 0;
+            iterateSourceSheets(function (sheet) {
+                count += sheet.cssRules.length;
             });
-            node.adoptedStyleSheets = newSheets;
+            if (count === 1) {
+                var rule = node.adoptedStyleSheets[0].cssRules[0];
+                return rule instanceof CSSStyleRule ? rule.style.length : count;
+            }
+            return count;
         }
         function render(theme, ignoreImageAnalysis) {
-            node.adoptedStyleSheets.forEach(function (sheet) {
-                if (overrideList.has(sheet)) {
-                    return;
+            clear();
+            var _loop_1 = function (i) {
+                var sheet = node.adoptedStyleSheets[i];
+                if (overrides.has(sheet)) {
+                    return "continue";
                 }
-                var rules = sheet.rules;
+                var rules = sheet.cssRules;
                 var override = new CSSStyleSheet();
-                function prepareOverridesSheet() {
-                    for (var i = override.cssRules.length - 1; i >= 0; i--) {
-                        override.deleteRule(i);
+                var prepareSheet = function () {
+                    for (
+                        var i_1 = override.cssRules.length - 1;
+                        i_1 >= 0;
+                        i_1--
+                    ) {
+                        override.deleteRule(i_1);
                     }
                     injectSheet(sheet, override);
-                    adoptedStyleOverrides.set(sheet, override);
-                    overrideList.add(override);
+                    overrides.add(override);
                     return override;
-                }
+                };
                 var sheetModifier = createStyleSheetModifier();
                 sheetModifier.modifySheet({
-                    prepareSheet: prepareOverridesSheet,
+                    prepareSheet: prepareSheet,
                     sourceCSSRules: rules,
                     theme: theme,
                     ignoreImageAnalysis: ignoreImageAnalysis,
@@ -6667,11 +7083,145 @@
                         return cancelAsyncOperations;
                     }
                 });
+            };
+            for (var i = node.adoptedStyleSheets.length - 1; i >= 0; i--) {
+                _loop_1(i);
+            }
+            rulesChangeKey = getRulesChangeKey();
+        }
+        function checkForUpdates() {
+            return getRulesChangeKey() !== rulesChangeKey;
+        }
+        var frameId = null;
+        function watch(callback) {
+            frameId = requestAnimationFrame(function () {
+                if (checkForUpdates()) {
+                    var sheets = node.adoptedStyleSheets.filter(function (s) {
+                        return !overrides.has(s);
+                    });
+                    callback(sheets);
+                }
+                watch(callback);
+            });
+        }
+        return {
+            render: render,
+            destroy: destroy,
+            watch: watch
+        };
+    }
+    var StyleSheetCommandBuilder = (function () {
+        function StyleSheetCommandBuilder(onChange) {
+            this.cssRules = [];
+            this.commands = [];
+            this.onChange = onChange;
+        }
+        StyleSheetCommandBuilder.prototype.insertRule = function (
+            cssText,
+            index
+        ) {
+            if (index === void 0) {
+                index = 0;
+            }
+            this.commands.push({
+                type: "insert",
+                index: index,
+                cssText: cssText
+            });
+            this.cssRules.splice(
+                index,
+                0,
+                new StyleSheetCommandBuilder(this.onChange)
+            );
+            this.onChange();
+            return index;
+        };
+        StyleSheetCommandBuilder.prototype.deleteRule = function (index) {
+            this.commands.push({type: "delete", index: index});
+            this.cssRules.splice(index, 1);
+            this.onChange();
+        };
+        StyleSheetCommandBuilder.prototype.replaceSync = function (cssText) {
+            this.commands.splice(0);
+            this.commands.push({type: "replace", cssText: cssText});
+            if (cssText === "") {
+                this.cssRules.splice(0);
+            } else {
+                throw new Error(
+                    "StyleSheetCommandBuilder.replaceSync() is not fully supported"
+                );
+            }
+            this.onChange();
+        };
+        StyleSheetCommandBuilder.prototype.getDeepCSSCommands = function () {
+            var deep = [];
+            this.commands.forEach(function (command) {
+                deep.push({
+                    type: command.type,
+                    cssText: command.type !== "delete" ? command.cssText : "",
+                    path: command.type === "replace" ? [] : [command.index]
+                });
+            });
+            this.cssRules.forEach(function (rule, i) {
+                var childCommands = rule.getDeepCSSCommands();
+                childCommands.forEach(function (c) {
+                    return c.path.unshift(i);
+                });
+            });
+            return deep;
+        };
+        StyleSheetCommandBuilder.prototype.clearDeepCSSCommands = function () {
+            this.commands.splice(0);
+            this.cssRules.forEach(function (rule) {
+                return rule.clearDeepCSSCommands();
+            });
+        };
+        return StyleSheetCommandBuilder;
+    })();
+    function createAdoptedStyleSheetFallback(onChange) {
+        var cancelAsyncOperations = false;
+        var sourceCSSRules = [];
+        var lastTheme;
+        var lastIgnoreImageAnalysis;
+        function updateCSS(cssRules) {
+            sourceCSSRules = cssRules;
+            if (lastTheme && lastIgnoreImageAnalysis) {
+                render(lastTheme, lastIgnoreImageAnalysis);
+            }
+        }
+        var builder = new StyleSheetCommandBuilder(onChange);
+        function render(theme, ignoreImageAnalysis) {
+            lastTheme = theme;
+            lastIgnoreImageAnalysis = ignoreImageAnalysis;
+            var prepareSheet = function () {
+                builder.replaceSync("");
+                return builder;
+            };
+            var sheetModifier = createStyleSheetModifier();
+            sheetModifier.modifySheet({
+                prepareSheet: prepareSheet,
+                sourceCSSRules: sourceCSSRules,
+                theme: theme,
+                ignoreImageAnalysis: ignoreImageAnalysis,
+                force: false,
+                isAsyncCancelled: function () {
+                    return cancelAsyncOperations;
+                }
             });
         }
+        function commands() {
+            var commands = builder.getDeepCSSCommands();
+            builder.clearDeepCSSCommands();
+            return commands;
+        }
+        function destroy() {
+            cancelAsyncOperations = true;
+        }
         return {
             render: render,
-            destroy: destroy
+            destroy: destroy,
+            updateCSS: updateCSS,
+            commands: commands
         };
     }
 
@@ -6698,6 +7248,14 @@
             CSSStyleSheet.prototype,
             "removeRule"
         );
+        var replaceDescriptor = Object.getOwnPropertyDescriptor(
+            CSSStyleSheet.prototype,
+            "replace"
+        );
+        var replaceSyncDescriptor = Object.getOwnPropertyDescriptor(
+            CSSStyleSheet.prototype,
+            "replaceSync"
+        );
         var documentStyleSheetsDescriptor = enableStyleSheetsProxy
             ? Object.getOwnPropertyDescriptor(Document.prototype, "styleSheets")
             : null;
@@ -6730,6 +7288,7 @@
         var childNodesDescriptor = shouldProxyChildNodes
             ? Object.getOwnPropertyDescriptor(Node.prototype, "childNodes")
             : null;
+        var cleaners = [];
         var cleanUp = function () {
             Object.defineProperty(
                 CSSStyleSheet.prototype,
@@ -6751,11 +7310,25 @@
                 "removeRule",
                 removeRuleDescriptor
             );
+            Object.defineProperty(
+                CSSStyleSheet.prototype,
+                "replace",
+                replaceDescriptor
+            );
+            Object.defineProperty(
+                CSSStyleSheet.prototype,
+                "replaceSync",
+                replaceSyncDescriptor
+            );
             document.removeEventListener("__darkreader__cleanUp", cleanUp);
             document.removeEventListener(
                 "__darkreader__addUndefinedResolver",
                 addUndefinedResolver
             );
+            document.removeEventListener(
+                "__darkreader__blobURLCheckRequest",
+                checkBlobURLSupport
+            );
             if (enableStyleSheetsProxy) {
                 Object.defineProperty(
                     Document.prototype,
@@ -6784,6 +7357,10 @@
                     childNodesDescriptor
                 );
             }
+            cleaners.forEach(function (clean) {
+                return clean();
+            });
+            cleaners.splice(0);
         };
         var addUndefinedResolverInner = function (tag) {
             customElements.whenDefined(tag).then(function () {
@@ -6805,6 +7382,11 @@
             addUndefinedResolver,
             {passive: true}
         );
+        document.addEventListener(
+            "__darkreader__blobURLCheckRequest",
+            checkBlobURLSupport,
+            {once: true}
+        );
         var updateSheetEvent = new Event("__darkreader__updateSheet");
         function proxyAddRule(selector, style, index) {
             addRuleDescriptor.value.call(this, selector, style, index);
@@ -6860,6 +7442,36 @@
                 this.ownerNode.dispatchEvent(updateSheetEvent);
             }
         }
+        function proxyReplace(cssText) {
+            var _this = this;
+            var returnValue = replaceDescriptor.value.call(this, cssText);
+            if (
+                this.ownerNode &&
+                !(
+                    this.ownerNode.classList &&
+                    this.ownerNode.classList.contains("darkreader")
+                ) &&
+                returnValue &&
+                returnValue instanceof Promise
+            ) {
+                returnValue.then(function () {
+                    return _this.ownerNode.dispatchEvent(updateSheetEvent);
+                });
+            }
+            return returnValue;
+        }
+        function proxyReplaceSync(cssText) {
+            replaceSyncDescriptor.value.call(this, cssText);
+            if (
+                this.ownerNode &&
+                !(
+                    this.ownerNode.classList &&
+                    this.ownerNode.classList.contains("darkreader")
+                )
+            ) {
+                this.ownerNode.dispatchEvent(updateSheetEvent);
+            }
+        }
         function proxyDocumentStyleSheets() {
             var _this = this;
             var getCurrentValue = function () {
@@ -6955,31 +7567,99 @@
                 NodeList.prototype
             );
         }
+        function checkBlobURLSupport() {
+            return __awaiter(this, void 0, void 0, function () {
+                var svg, bytes, i, blob, objectURL, blobURLAllowed, image_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            svg =
+                                '<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"><rect width="1" height="1" fill="transparent"/></svg>';
+                            bytes = new Uint8Array(svg.length);
+                            for (i = 0; i < svg.length; i++) {
+                                bytes[i] = svg.charCodeAt(i);
+                            }
+                            blob = new Blob([bytes], {type: "image/svg+xml"});
+                            objectURL = URL.createObjectURL(blob);
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            image_1 = new Image();
+                            return [
+                                4,
+                                new Promise(function (resolve, reject) {
+                                    image_1.onload = function () {
+                                        return resolve();
+                                    };
+                                    image_1.onerror = function () {
+                                        return reject();
+                                    };
+                                    image_1.src = objectURL;
+                                })
+                            ];
+                        case 2:
+                            _a.sent();
+                            blobURLAllowed = true;
+                            return [3, 4];
+                        case 3:
+                            _a.sent();
+                            blobURLAllowed = false;
+                            return [3, 4];
+                        case 4:
+                            document.dispatchEvent(
+                                new CustomEvent(
+                                    "__darkreader__blobURLCheckResponse",
+                                    {detail: {blobURLAllowed: blobURLAllowed}}
+                                )
+                            );
+                            return [2];
+                    }
+                });
+            });
+        }
         Object.defineProperty(
             CSSStyleSheet.prototype,
             "addRule",
-            Object.assign({}, addRuleDescriptor, {value: proxyAddRule})
+            __assign(__assign({}, addRuleDescriptor), {value: proxyAddRule})
         );
         Object.defineProperty(
             CSSStyleSheet.prototype,
             "insertRule",
-            Object.assign({}, insertRuleDescriptor, {value: proxyInsertRule})
+            __assign(__assign({}, insertRuleDescriptor), {
+                value: proxyInsertRule
+            })
         );
         Object.defineProperty(
             CSSStyleSheet.prototype,
             "deleteRule",
-            Object.assign({}, deleteRuleDescriptor, {value: proxyDeleteRule})
+            __assign(__assign({}, deleteRuleDescriptor), {
+                value: proxyDeleteRule
+            })
         );
         Object.defineProperty(
             CSSStyleSheet.prototype,
             "removeRule",
-            Object.assign({}, removeRuleDescriptor, {value: proxyRemoveRule})
+            __assign(__assign({}, removeRuleDescriptor), {
+                value: proxyRemoveRule
+            })
+        );
+        Object.defineProperty(
+            CSSStyleSheet.prototype,
+            "replace",
+            __assign(__assign({}, replaceDescriptor), {value: proxyReplace})
+        );
+        Object.defineProperty(
+            CSSStyleSheet.prototype,
+            "replaceSync",
+            __assign(__assign({}, replaceSyncDescriptor), {
+                value: proxyReplaceSync
+            })
         );
         if (enableStyleSheetsProxy) {
             Object.defineProperty(
                 Document.prototype,
                 "styleSheets",
-                Object.assign({}, documentStyleSheetsDescriptor, {
+                __assign(__assign({}, documentStyleSheetsDescriptor), {
                     get: proxyDocumentStyleSheets
                 })
             );
@@ -6988,7 +7668,7 @@
             Object.defineProperty(
                 CustomElementRegistry.prototype,
                 "define",
-                Object.assign({}, customElementRegistryDefineDescriptor, {
+                __assign(__assign({}, customElementRegistryDefineDescriptor), {
                     value: proxyCustomElementRegistryDefine
                 })
             );
@@ -6997,7 +7677,7 @@
             Object.defineProperty(
                 Element.prototype,
                 "getElementsByTagName",
-                Object.assign({}, getElementsByTagNameDescriptor, {
+                __assign(__assign({}, getElementsByTagNameDescriptor), {
                     value: proxyGetElementsByTagName
                 })
             );
@@ -7006,7 +7686,9 @@
             Object.defineProperty(
                 Node.prototype,
                 "childNodes",
-                Object.assign({}, childNodesDescriptor, {get: proxyChildNodes})
+                __assign(__assign({}, childNodesDescriptor), {
+                    get: proxyChildNodes
+                })
             );
         }
     }
@@ -7075,6 +7757,9 @@
     var INSTANCE_ID = generateUID();
     var styleManagers = new Map();
     var adoptedStyleManagers = [];
+    var adoptedStyleFallbacks = new Map();
+    var adoptedStyleNodeIds = new WeakMap();
+    var adoptedStyleChangeTokens = new WeakMap();
     var filter = null;
     var fixes = null;
     var isIFrame$1 = null;
@@ -7411,6 +8096,56 @@
             );
         });
         handleAdoptedStyleSheets(document);
+        variablesStore.matchVariablesAndDependents();
+        if (isFirefox) {
+            var MATCH_VAR_1 = Symbol();
+            var onAdoptedCSSChange_1 = function (e) {
+                var _a = e.detail,
+                    node = _a.node,
+                    id = _a.id,
+                    cssRules = _a.cssRules,
+                    entries = _a.entries;
+                if (Array.isArray(entries)) {
+                    entries.forEach(function (e) {
+                        var cssRules = e[2];
+                        variablesStore.addRulesForMatching(cssRules);
+                    });
+                    variablesStore.matchVariablesAndDependents();
+                } else if (cssRules) {
+                    variablesStore.addRulesForMatching(cssRules);
+                    requestAnimationFrameOnce(MATCH_VAR_1, function () {
+                        return variablesStore.matchVariablesAndDependents();
+                    });
+                }
+                var tuples = Array.isArray(entries)
+                    ? entries
+                    : node && cssRules
+                      ? [[node, id, cssRules]]
+                      : [];
+                tuples.forEach(function (_a) {
+                    var _b = __read(_a, 3),
+                        node = _b[0],
+                        id = _b[1],
+                        cssRules = _b[2];
+                    adoptedStyleNodeIds.set(node, id);
+                    var fallback = getAdoptedStyleSheetFallback(node);
+                    fallback.updateCSS(cssRules);
+                });
+            };
+            document.addEventListener(
+                "__darkreader__adoptedStyleSheetsChange",
+                onAdoptedCSSChange_1
+            );
+            cleaners.push(function () {
+                return document.removeEventListener(
+                    "__darkreader__adoptedStyleSheetsChange",
+                    onAdoptedCSSChange_1
+                );
+            });
+            document.dispatchEvent(
+                new CustomEvent("__darkreader__startAdoptedStyleSheetsWatcher")
+            );
+        }
     }
     var loadingStylesCounter = 0;
     var loadingStyles = new Set();
@@ -7501,16 +8236,94 @@
         }
         changeMetaThemeColorWhenAvailable(filter);
     }
+    var pendingAdoptedVarMatch = false;
     function handleAdoptedStyleSheets(node) {
-        try {
-            if (Array.isArray(node.adoptedStyleSheets)) {
-                if (node.adoptedStyleSheets.length > 0) {
-                    var newManger = createAdoptedStyleSheetOverride(node);
-                    adoptedStyleManagers.push(newManger);
-                    newManger.render(filter, ignoredImageAnalysisSelectors);
+        var theme = filter;
+        if (isFirefox) {
+            var fallback = getAdoptedStyleSheetFallback(node);
+            fallback.render(theme, ignoredImageAnalysisSelectors);
+            return;
+        }
+        if (hasAdoptedStyleSheets(node)) {
+            node.adoptedStyleSheets.forEach(function (s) {
+                variablesStore.addRulesForMatching(s.cssRules);
+            });
+            var newManger_1 = createAdoptedStyleSheetOverride(node);
+            adoptedStyleManagers.push(newManger_1);
+            newManger_1.render(theme, ignoredImageAnalysisSelectors);
+            newManger_1.watch(function (sheets) {
+                sheets.forEach(function (s) {
+                    variablesStore.addRulesForMatching(s.cssRules);
+                });
+                newManger_1.render(theme, ignoredImageAnalysisSelectors);
+                pendingAdoptedVarMatch = true;
+            });
+            potentialAdoptedStyleNodes.delete(node);
+        } else if (!potentialAdoptedStyleNodes.has(node)) {
+            potentialAdoptedStyleNodes.add(node);
+        }
+    }
+    var potentialAdoptedStyleNodes = new Set();
+    var potentialAdoptedStyleFrameId = null;
+    function watchPotentialAdoptedStyleNodes() {
+        potentialAdoptedStyleFrameId = requestAnimationFrame(function () {
+            var changed = false;
+            potentialAdoptedStyleNodes.forEach(function (node) {
+                if (node.isConnected) {
+                    handleAdoptedStyleSheets(node);
+                    changed = true;
+                } else {
+                    potentialAdoptedStyleNodes.delete(node);
                 }
+            });
+            if (changed || pendingAdoptedVarMatch) {
+                variablesStore.matchVariablesAndDependents();
+                pendingAdoptedVarMatch = false;
             }
-        } catch (err) {}
+            watchPotentialAdoptedStyleNodes();
+        });
+    }
+    function stopWatchingPotentialAdoptedStyleNodes() {
+        potentialAdoptedStyleFrameId &&
+            cancelAnimationFrame(potentialAdoptedStyleFrameId);
+        potentialAdoptedStyleNodes.clear();
+        if (isFirefox) {
+            document.dispatchEvent(
+                new CustomEvent("__darkreader__stopAdoptedStyleSheetsWatcher")
+            );
+        }
+    }
+    function getAdoptedStyleChangeToken(node) {
+        if (adoptedStyleChangeTokens.has(node)) {
+            return adoptedStyleChangeTokens.get(node);
+        }
+        var token = Symbol();
+        adoptedStyleChangeTokens.set(node, token);
+        return token;
+    }
+    function getAdoptedStyleSheetFallback(node) {
+        var fallback = adoptedStyleFallbacks.get(node);
+        if (!fallback) {
+            fallback = createAdoptedStyleSheetFallback(function () {
+                var token = getAdoptedStyleChangeToken(node);
+                requestAnimationFrameOnce(token, function () {
+                    var id = adoptedStyleNodeIds.get(node);
+                    var commands =
+                        fallback === null || fallback === void 0
+                            ? void 0
+                            : fallback.commands();
+                    var data = {id: id, commands: commands};
+                    document.dispatchEvent(
+                        new CustomEvent(
+                            "__darkreader__adoptedStyleSheetCommands",
+                            {detail: JSON.stringify(data)}
+                        )
+                    );
+                });
+            });
+            adoptedStyleFallbacks.set(node, fallback);
+        }
+        return fallback;
     }
     function watchForUpdates() {
         var managedStyles = Array.from(styleManagers.keys());
@@ -7566,6 +8379,7 @@
                 handleAdoptedStyleSheets(shadowRoot);
             }
         );
+        watchPotentialAdoptedStyleNodes();
         watchForInlineStyles(
             function (element) {
                 overrideInlineStyle(
@@ -7710,6 +8524,7 @@
         document.dispatchEvent(new CustomEvent("__darkreader__cleanUp"));
         removeNode(document.head.querySelector(".darkreader--proxy"));
     }
+    var cleaners = [];
     function removeDynamicTheme() {
         document.documentElement.removeAttribute("data-darkreader-mode");
         document.documentElement.removeAttribute("data-darkreader-scheme");
@@ -7739,10 +8554,19 @@
         cleanLoadingLinks();
         forEach(document.querySelectorAll(".darkreader"), removeNode);
         adoptedStyleManagers.forEach(function (manager) {
-            manager.destroy();
+            return manager.destroy();
         });
         adoptedStyleManagers.splice(0);
+        adoptedStyleFallbacks.forEach(function (fallback) {
+            return fallback.destroy();
+        });
+        adoptedStyleFallbacks.clear();
+        stopWatchingPotentialAdoptedStyleNodes();
         metaObserver && metaObserver.disconnect();
+        cleaners.forEach(function (clean) {
+            return clean();
+        });
+        cleaners.splice(0);
     }
     function cleanDynamicThemeCache() {
         variablesStore.clear();