Hook up a user script to run after more details have been loaded


#1

I’m creating a user script to be able to hide mnemonics and I got it working with a locally saved copy of the review/lesson page. However to get it working with the live thing I need to hook it up so it’s executed when the full info of the item in question has been loaded (after pressing the more info button).

I haven’t time to look at this any more today so I thought I ask in case someone has done this before.  So, does anyone know how I can do this in an easy way?


#2
Answering my own question, the waitForKeyElements() utility seems to be the way to go:
http://stackoverflow.com/questions/12897446/greasemonkey-wait-for-page-to-load-before-executing-code-techniques

#3

Glad to see you are helping yourself, keep it up.


#4

If you’re still interested, you could look at existing userscripts to see how they do it.

For example my Phonetic-Semantic Composition one, which does actually use waitForKeyElements().


#5

If you want to hide well-defined page elements, a better approach often involves CSS.

#traverse .to .element { display: none !important; }

Better than waitForKeyElements would be to use MutationObserver. You want to stay away from using timers like that as much as possible. Not only is that not performant, but you’ll run into graphical inconsistencies where the items will flash onto the screen for a moment before being removed.


#6

Unfortunately the elements I want to hide are not really well-defined and I want to hide them when the user clicks a certain link. What I do is find the element I want to hide using javascript functions such as getElementById, getElementsByClassName and similar and then hide them via element.style.display="none"

In addition to waitForKeyElements I also use attrchange to detect when some attributes are changed and this  function is based on MutationObserver.

I should probably see if I can use attrchange to replace waitForKeyElements completely or create something myself that does the same as waitForKeyElements but using MutationObserver instead of timers. I’ve seen the graphical inconsistencies yo mention and it would be nice to get rid of them.


#7

I finally got around to replace waitForKeyElements and attrchange with MutationObserver and the script runs much smoother now without any graphical glitches, it doesn’t depend on any external code or libraries (I could get rid of jQuery), and the code itself looks much cleaner and nicer. 

Thanks a lot for the suggestion kiko, this was really useful and I learned a bit of new stuff as well which is always fun.