[Bug] Dark Reader tries to access resources bloked by content blockers, leading to access of undefined or null resources

Bug Report

Bug Description

Content blocking extensions like uBlock Origin, Ad Block, Ad Block Plus, and others can block resources after they were loaded by network system but before they enter the DOM. Dark Reader does not account for this and tries to access resources which are undefined or null, logging various errors.

There are multiple different manifestations of this bug, but they always come after error Failed to load resource: net::ERR_BLOCKED_BY_CLIENT in tab’s console.

This bugs results in the following errors in the extension console (incomplete list):

• Uncaught TypeError: Cannot read property 'cssRules' of null
• Uncaught TypeError: Cannot read property 'whenDefined' of null in addUndefinedResolver()
• Uncaught (in promise) TypeError: Failed to fetch in getImageDetails()

Steps To Reproduce

I have not found a way to reproduce this bug reliably on the first try. Here is a method which produces an error within ~1 minute:

1. Check out current master branch and apply the following rudimentarry patch to log evidence of the race
2. Load extension into the browser and open the extension background console/errors page and look for error
3. Load a large complex site like GitHub or Reddit and keep doing stuff and reloading it untill error is logged
4. Once the error is logged, open site console and look for log messages which were added by the patch.
5. If you could not reproduce the error, delete extension and go to step 2.

diff --git a/src/inject/dynamic-theme/style-manager.ts b/src/inject/dynamic-theme/style-manager.ts
index 58714093..16585569 100644
--- a/src/inject/dynamic-theme/style-manager.ts
+++ b/src/inject/dynamic-theme/style-manager.ts
@@ -9,6 +9,8 @@ import {bgFetch} from './network';
 import {createStyleSheetModifier} from './stylesheet-modifier';
 import {isShadowDomSupported, isSafari, isThunderbird, isChromium} from '../../utils/platform';

+let counter = 0;
+
 declare global {
     interface HTMLStyleElement {
         sheet: CSSStyleSheet;
@@ -325,14 +327,17 @@ export function manageStyle(element: StyleElement, {update, loadingStart, loadin
         function buildOverrides() {
             const force = forceRenderStyle;
             forceRenderStyle = false;
+            const count = counter;
+            counter++;
             sheetModifier.modifySheet({
-                prepareSheet: prepareOverridesSheet,
+                prepareSheet: () => {console.log('prepareSheet called', count); return prepareOverridesSheet() },
                 sourceCSSRules: rules,
                 theme,
                 ignoreImageAnalysis,
                 force,
                 isAsyncCancelled: () => cancelAsyncOperations,
             });
+            console.log('After sheetModifier.modifySheet', count);
             isOverrideEmpty = syncStyle.sheet.cssRules.length === 0;
             if (sheetModifier.shouldRebuildStyle()) {
                 // "update" function schedules rebuilding the style

Expected Behavior

No errors being logged.

No errors being logged, console messages appear in order:

Actual Behavior

Only “After sheetModifier.modifySheet” message is logged, followed by error.

Screenshots

System Information

• OS: Windows 10
• Browser: Chrome 92
• Dark Reader Version: current master

Additional Context

There are no clear visible regressions for the user, aside from, possibly flash of white content before extension changes the site to dark.

[bershanskiy]

This bug is not directly related to MV3, but it prevents me from doing regression testing, so I added it to “Manifest V3 Migration” project anyway.

[bershanskiy]

I am no longer able to reproduce this bug and I believe it has been fixed, closing. Feel free to re-open.