Context:
- I am creating a Chrome extension that hides certain elements of certain sites
- In this specific case, I'm trying to hide the main feed of YouTube's home and trending pages
- The script has no trouble on all other sites, including Twitter, Facebook etc.
- But on YouTube, it's causing the page to crash
- Roughly speaking, what the script does is:
- Observes any mutation on
document(childList: true, subtree: true, characterData: false) - Searches for the existence of certain nodes in the document
- Changes some of their styles to hide them (or if already hidden, does nothing)
- Adds a small menu into the node with a button to unhide the node
- The MutationObserver is never disconnected because it needs to keep watching in the case of single-page apps where the page stays the same but different nodes come and go
- So it keeps checking that the hidden nodes are still hidden every time there's any new mutation to the document or its subtree (heavy load on performance, I know - but it works fine on every other site)
- Observes any mutation on
YouTube issue:
- YouTube always throws up a warning as follows, even when I am not running my script on it (in other words, YouTube's code is already a bit suspect):
[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
- The specific event is either
touchstartorwheel. This error can display in the 100s of times even when I am not running my script. - When I run my script, this error seems to blow up even more, and display more times than usual
- Eventually, the entire page crashes or takes far longer to load than it should (but it does sometimes eventually make it all the way, showing that my extension is not completely breaking down)
- There's also another warning that tends to show,
[Violation] 'readystatechange' handler took <N>ms - This warning shows far fewer times than the other (see screenshot below)
- Interestingly, usually loading youtube.com home page when starting off in a new tab is fine, and my extension successfully hides (i.e. changes styles on + injects some extra HTML into) the node it's meant to hide
- I then get a crash or extremely slow page load when I try to navigate within YouTube, e.g. specifically going to the Trending page using the left-hand side menu, OR occasionally when I hit refresh on the page
Things I've tried:
- Overriding the default addEventListener method on EventTarget.prototype, which I have so far failed to do successfully - not sure I understand how to do this despite trying a few methods from SO
- Blocking the script that this error originates from (
desktop_polymer_inlined_html_polymer_flags_v2.js) using the Chrome WebRequest API, but that doesn't work because it breaks the whole page
Questions:
- Is it likely that this 'non-passive event listener' warning is interplaying with my script to cause the crashing of the page? Or that my script is causing more listeners to be added than the page would usually?
- How can I stop this error from happening (e.g. how do I prevent the event listeners from being created by YouTube's JS)?
- Does anyone know anything about the way YouTube is built that would make it crash if you try to 1) modify a style on an element directly 2) add another element into a parent element 3) continually check styles on an element? Builtwith.com was not much help.
- Is there something else I am missing here? Another way I can change my content script to make it interplay better with YouTube?*
*I know a tempting answer will be 'don't observe the document'/'observe it less' but this is more or less non-negotiable in terms of the way the browser extension needs to work.
Screenshot:
Chrome profiling:
- Note: having looked into them individually, none of the functions that are taking up the huge amount of time are part of my extension. So perhaps YouTube is reacting badly to the DOM modifications that my extension performs.
