[Userscript] Script loading fix

WaniKani API And Third-Party Apps
1

I implemented a simple script that forces a page reload whenever the page content is replaced without loading scripts.

Greasy Fork link

8 Likes
2

Thank you!

3

would it be possible do make it so that it only does the refreshes when the mainpage and the reviews load? it’s kind of annoying when I look for some kanji through the search, and it does the refresh there also

4

It would be possible, but scripts can operate on those pages too, and disabling reload would prevent the scripts from loading. I may add some settings later, this is just a simple brute force solution.

5

Updated to version 1.0.1:
Optimized script to be faster and reload page only once.

1 Like
6

You could also utilize the Turbo Events library to do this (disclaimer: I am the author of said library).

My initial reaction was disappointment, since it’s like putting duct tape over a skin cut—sure, it gets the job done but knowing when to take it off is going to become even less obvious.
But after stepping away and thinking to myself that even I am currently refreshing pages to get certain scripts that haven’t updated yet to function, I figured I’d weigh in and offer some insight I’ve gained from creating and using the library, since for better or worse, this is what people are trying to deal with right now.

Basically, turbo:before-visit and turbo:visit (the latter to handle history navigation as well) should entirely cover your use case, making it so that you don’t need to create a mutation observer.

The whole thing could be accomplished with the following (or less):

function createPageNavigationListener() {
    const silentState = wkof.turbo.silenceWarnings;
    try {
        wkof.turbo.silenceWarnings = true;
        wkof.turbo.add_event_listeners([wkof.turbo.events.before_visit,wkof.turbo.events.visit], forcePageLoad, {noTimeout: true});
    } finally {
        wkof.turbo.silenceWarnings = silentState;
    }
}

function forcePageLoad(event,url) {
    event.preventDefault();
    event.stopImmediatePropagation();
    window.location.href = url;
}

wkof.ready('TurboEvents').then(() => {
    wkof.turbo.add_typical_page_listener(createPageNavigationListener, {noTimeout: true});
});

The {noTimeout: true} option (which will eventually be renamed timeout: 'none', though I’ll keep it backwards compatible for quite a while) is necessary on the listeners calling forcePageLoad() because otherwise the cancelation won’t work. The default behavior (i.e., wrapping the callback with a setTimeout) makes it play well with standard page loads, but this scenario wants to modify the event before it happens, so we don’t want that.

Alternatively, you could circumvent the library and just add these listeners separately with
document.documentElement.addEventListener(eventName, callback).
Entirely your call, and I won’t feel bad about it if you do. The logic would work the same.
Script loads → creates turbo:load listener (if window.Turbo?.session.history.pageLoaded is not true, otherwise runs the callback immediately) → callback creates the turbo:before-visit and turbo:visit listeners → those listeners stop the event and force page nav.
And you’ll have to get the URL from event.detail.url, since it won’t be passed directly like my wrapper does.

3 Likes