ferdium / ferdium-app

All your services in one place, built by the community
https://ferdium.org
Apache License 2.0
2.78k stars 168 forks source link

Manual Darkreader addition results in mobx error - Gmail recipe #1269

Open rbreaves opened 1 year ago

rbreaves commented 1 year ago

Preflight Checklist

Ferdium Version

6.4.0

Recipe Name

Gmail

Recipe Version

1.5.1

Last Known working version of the recipe

No response

Steps to reproduce

So first off I have taken the darkreader source from this url https://[unpkg.com/darkreader@4.9.58/darkreader.js](https://unpkg.com/darkreader@4.9.58/darkreader.js) and added it to my recipes folder.

And then I add this code at the very bottom, below the error message, to the user.js file in my recipe folder as well.

The error results in this

The error

[mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[Autorun@2]' TypeError: Cannot read properties of null (reading 'removeAttribute')
    at removeDynamicTheme (VM9201 darkreader.js:7361:34)
    at disable (VM9201 darkreader.js:7514:9)
    at v.update (VM9161 recipe.js:1:8046)
    at VM9161 recipe.js:1:3778
    at reactionRunner (VM9164 mobx.cjs.development.js:2463:5)
    at trackDerivedFunction (VM9164 mobx.cjs.development.js:1676:18)
    at Reaction.track (VM9164 mobx.cjs.development.js:2192:18)
    at Reaction.onInvalidate_ (VM9164 mobx.cjs.development.js:2444:12)
    at Reaction.runReaction_ (VM9164 mobx.cjs.development.js:2157:16)
    at runReactionsHelper (VM9164 mobx.cjs.development.js:2305:29)
reportExceptionInDerivation_ | @ | VM9164 mobx.cjs.development.js:2221
-- | -- | --
  | track | @ | VM9164 mobx.cjs.development.js:2201
  | (anonymous) | @ | VM9164 mobx.cjs.development.js:2444
  | runReaction_ | @ | VM9164 mobx.cjs.development.js:2157
  | runReactionsHelper | @ | VM9164 mobx.cjs.development.js:2305
  | reactionScheduler | @ | VM9164 mobx.cjs.development.js:2281
  | runReactions | @ | VM9164 mobx.cjs.development.js:2288
  | schedule_ | @ | VM9164 mobx.cjs.development.js:2139
  | autorun | @ | VM9164 mobx.cjs.development.js:2465
  | initialize | @ | VM9161 recipe.js:1
  | RecipeController | @ | VM9161 recipe.js:1
  | (anonymous) | @ | VM9161 recipe.js:1
  | (anonymous) | @ | VM9161 recipe.js:3
  | Module._compile | @ | VM9124 loader:1269
  | Module._extensions..js | @ | VM9124 loader:1324
  | Module.load | @ | VM9124 loader:1124
  | Module._load | @ | VM9124 loader:965
  | f._load | @ | VM9156 asar_bundle:2
  | o._load | @ | VM9159 renderer_init:2
  | (anonymous) | @ | VM9159 renderer_init:2
  | (anonymous) | @ | VM9159 renderer_init:2
  | ___electron_webpack_init__ | @ | VM9159 renderer_init:2
  | (anonymous) | @ | VM9159 renderer_init:2
  | compileForInternalLoader | @ | VM9008 loaders:334
  | compileForPublicLoader | @ | VM9008 loaders:270
  | loadBuiltinModule | @ | VM9121 helpers:56
  | Module._load | @ | VM9124 loader:941
  | f._load | @ | VM9156 asar_bundle:2
  | executeUserEntryPoint | @ | VM9155 run_main:81
  | (anonymous) | @ | VM9104 run_main_module:23

user.js

function loadDarkReader(callback) {
  var darkReaderScript = document.createElement('script');
  darkReaderScript.src = 'darkreader.js';
  darkReaderScript.type = 'application/javascript';
  document.head.appendChild(darkReaderScript);

  // Execute the callback function after DarkReader is loaded
  darkReaderScript.onload = callback;
}

// Function to execute after DarkReader is loaded
function initializeDarkMode() {
  // Enable dark mode
  function enable() {
    DarkReader.disable({
      brightness: 100,
      contrast: 90,
      sepia: 10
    });
    btn.textContent = '🔆';
  }

  // Disable dark mode
  function disable() {
    DarkReader.enable({
      brightness: 100,
      contrast: 90,
      sepia: 10
    });
    btn.textContent = '🔅';
  }

  const namespace = 'i2p-schimon-dimmer';
  const btn = document.createElement(namespace);

  // Create button
  (function createButton() {
    // Create element
    document.body.append(btn);
    // Set content
    btn.textContent = '🔆';
    btn.id = namespace;
    btn.style.all = 'unset';
    // Set position
    btn.style.position = 'fixed';
    btn.style.bottom = 0;
    btn.style.left = 0;
    // Set appearance
    btn.style.marginTop = '100px';
    btn.style.marginRight = '10px';
    btn.style.minWidth = '50px';
    btn.style.minHeight = '50px';
    btn.style.fontSize = '20px';
    btn.style.zIndex = 10000;
    btn.style.opacity = 0.5;
    btn.onmouseover = () => {
      document.getElementById(namespace).style.opacity = 0.9;
    };
    btn.onmouseout = () => {
      document.getElementById(namespace).style.opacity = 0.3;
    };
    // Center character
    btn.style.justifyContent = 'center';
    btn.style.alignItems = 'center';
    btn.style.display = 'flex';
    // Disable selection marks
    btn.style.outline = 'none';
    btn.style.userSelect = 'none';
    btn.style.cursor = 'default';
    // Set button behavior
    btn.onclick = () => {
      if (getPreference('dimmer') === 'true') {
        setPreference('dimmer', 'false');
        disable();
      } else {
        setPreference('dimmer', 'true');
        enable();
      }
    };
    try {
      if (getPreference('dimmer') === 'true') {
        enable();
      } else {
        disable();
      }
    } catch (err) {
      console.warn('No support for local storage API');
      console.error(err);
    }
  })();

  // Set hotkey
  document.onkeyup = function(e) {
    if (e.metaKey && e.shiftKey && e.which == 66) { // Command + Shift + B
      toggle();
    }
  };

  // Toggle mode
  function toggle() {
    if (getPreference('dimmer') === 'true') {
      setPreference('dimmer', 'false');
      disable();
    } else {
      setPreference('dimmer', 'true');
      enable();
    }
  }

  // Set mode temporarily per session or until storage is cleared

  function getPreference(key) {
    return window.localStorage.getItem(key);
  }

  function setPreference(key, value) {
    return window.localStorage.setItem(key, value);
  }
}

// Load DarkReader and initialize dark mode
loadDarkReader(initializeDarkMode);

// manually load the toggle button after 10 seconds
setTimeout(initializeDarkMode, 10000);

Expected Behavior

I expect the toggle button to work and load darkreader's javascript file.

Actual Behavior

mobx gives an error and darkreader fails to work.

Screenshots

image

Additional Information

No response

rbreaves commented 1 year ago

Also entire reason this exists is as a workaround for this error.

https://github.com/ferdium/ferdium-app/issues/1152

I have a simple css file as well - but it does not go far enough. I want it working as well as dark reader fixes things. I am convinced this is a mobx related issue - maybe a strict-mode sorta thing, I do not know, but I do not see strict-mode errors in my normal chrome browser like I do with Ferdium.

I think in general we should fast track the addition of this extension for global inclusion even before figuring out how to get all extensions working.