Search code examples
javascriptuserscripts

Trying to write a Fluid App userscript to disable notion sidebar auto popup behavior


Edit - working solution

Trying to disable the javascript event was a no-go, instead I ended up adding an additional element into the DOM that toggled the visibility of the sidebar with css which worked. It's not the prettiest solution as I'm just learning, but it does solve the problem.

It doesn't work as a Fluid userscript but does work as a Greasemonkey/Tampermonkey script in the browser. Full code is on Github - would love someone with more knowledge to improve on it.

Original Post

I'm a newbie in JS but am trying to learn by doing.

I use notion and am very annoyed by the sidebar that pops up whenever the mouse hovers over the left side of the app.

I read somewhere that I can use the Fluid app to push userscripts and that it might be possible to disable that functionality with custom styling.

But I can't seem to figure out how to get either the JS or CSS to disable mouseover events.

I think I found where the event is being listened for, but I'm not sure about next steps for how to remove that listener funtion, or to stop the function call.

This is where I think the event is being triggered, can anyone advise?

enter image description here


Solution

  • So I wasn't able to solve this using the initial methods and ended up trying a totally different approach which worked.

    Wasn't able to figure out how to get it to work in Fluid App yet, but I did manage a greasemonkey userscript.

    Instead of trying to change the event listener function, I just control the visibility of the sidebar.

    I add a button into the DOM, and give that button a trigger that toggles notions sidebar visibility. Click the button and the sidebar is invisible and nothing pops as you hover over the left side.

    It's not the prettiest solution, because it doesn't remove notion's existing button for the sidebar, and if you don't minimize the sidebar with notion's own button, then the formatting can be a bit wonky, but as a hack it totally works.

    I'm very new to JS and coding in general, so this is prob very inefficient. But if it helps anyone, here's the code in Github – I would love for someone to help me make this better.