[Userscript] Change tab title when reviews are available

WaniKani API And Third-Party Apps
#1

Someone made a post about this a few days ago and I thought it was a great idea so I decided to quickly throw something together.

Basically, it turns this:



Into this:


When reviews are available. Similar to what other websites like gmail do when you have new mail.

Note: It uses html from the dashboard page to check this and not API calls, therefore it will only work on the dashboard.
Also, JavaScript really isn’t my cup of tea, so it’s likely it can be done better. But as it is, it works and I find it really useful, so I decided to share it.

Get it here:
https://github.com/NeonHydra/WaniKani-Title-Update/raw/master/WaniKani-Title-Update.user.js

The New And Improved List Of API and Third Party Apps
Tab Notification script stopped working, can't find an alternative
[Userscript] WaniKani Titlebar
#2

I like! I like a lot. 

job’s a good’un, thanks for sharing!

#3

Turns out that the script stopped the lesson and the review sessions loading for whatever reason so I’ve just updated it to exclude them pages from loading the script. When I originally wrote it, I tried to get it so that it would only load on the dashboard but I couldn’t for the life of me get it to work. In the end I just wrote it so it would try to find the information it needed, and if it couldn’t find it, it would assume it wasn’t on the dashboard and stop checking for it. So I don’t really understand why it’s causing such a problem on those pages. Maybe someone a bit more adept at JS could solve the mystery.

tl;dr: Something went wrong so update the script or you won’t be able to do new lessons :stuck_out_tongue:

#4

For firefox, I’ve had to alter the meta info to:

// ==UserScript==
// @name         WaniKani Title Update
// @namespace    NeonPhoenix
// @version      1.0
// @description  Updates the title of the tab when you have reviews available on WaniKani
// @author       NeonPhoenix
// @match        http://www.wanikani.com/
// @match        https://www.wanikani.com/
// @grant        none
// ==/UserScript==

Otherwise, it failed - and by that, I mean, half the header of the page elements disappeared. Lesson and review count, times, progression bar data, etc.
#5
Kaimera said... For firefox, I've had to alter the meta info to:
// ==UserScript==
// @name         WaniKani Title Update
// @namespace    NeonPhoenix
// @version      1.0
// @description  Updates the title of the tab when you have reviews available on WaniKani
// @author       NeonPhoenix
// @match        http://www.wanikani.com/
// @match        https://www.wanikani.com/
// @grant        none
// ==/UserScript==

Otherwise, it failed - and by that, I mean, half the header of the page elements disappeared. Lesson and review count, times, progression bar data, etc.
Yeah I'm getting that too, yet I don't understand why it's doing it. The script also seems to stop me from quoting posts. Seems like my attempt at JavaScript was pretty bad.

It seems it has to do with the line that requires jQuery. Taking it out makes the page look normal again but jQuery is required for the script to work.
#6

My mistake…

// ==UserScript==
// @name         WaniKani Title Update
// @namespace    NeonPhoenix
// @version      1.0
// @description  Updates the title of the tab when you have reviews available on WaniKani
// @author       NeonPhoenix
// @match        http://www.wanikani.com/dashboard
// @match        https://www.wanikani.com/dashboard
// @grant        none
// ==/UserScript==

var intervalId = setInterval(function() {checkTime()}, 6000);

function checkTime() {
    var currentTime = Math.floor((new Date()).getTime() / 1000);
    var reviewTime = parseInt($(’.next’).children(’.timeago’).attr(‘datetime’));
    if(isNaN(reviewTime)) {
        clearInterval(intervalId);
        return;
    }
    if(currentTime >= reviewTime) {
        document.title = '[Reviews] ’ + document.title;
        clearInterval(intervalId);
    }
}

window.onload = checkTime;
No point using jquery when there isn’t one xD

#7

parseInt($(’.next’).children(’.timeago’).attr(‘datetime’));

That’s jQuery and I don’t know how to do it in regular JS

#8

It worked perfectly fine for me earlier, and console.log is returning a valid reviewTime variable result rather than an undefined one.

Obviously WK is using Jquery, and userscripts can indeed conflict with two different versions of it - my only assumption here being that it’s using WK’s version rather than the one you were trying earlier (and in the onLoad method you used). GreaseMonkey in particular has some workaround for this, though it didn’t work for me when I tried it earlier hence why I ditched your onLoad method: http://wiki.greasespot.net/Third-Party_Libraries#Potential_conflict

#9

Great idea, but I think that the number of reviews in brackets looks better, like how it is on Facebook.

WaniKani (2) … (21) … (42+)

#10
NeonPhoenix said... parseInt($('.next').children('.timeago').attr('datetime'));

That's jQuery and I don't know how to do it in regular JS
 You can do it like this:

var reviewTime = +document.querySelector('.next .timeago').getAttribute('datetime');

that + converts it to an integer.
#11
Yvo said... Great idea, but I think that the number of reviews in brackets looks better, like how it is on Facebook.

WaniKani (2) ... (21) ... (42+)
I don't think there's a way to do that without using API calls, which I don't know how to do in JavaScript.
#12

I guess the best thing to do is wait for someone to do it better then. Like I said I really only made it as a quick useful thing for myself, and since it was working fine for me in chrome, I decided to share it.

#13
Sundar said...
NeonPhoenix said... parseInt($('.next').children('.timeago').attr('datetime'));

That's jQuery and I don't know how to do it in regular JS
 You can do it like this:

var reviewTime = +document.querySelector('.next .timeago').getAttribute('datetime');

that + converts it to an integer.
 Cheers

NeonPhoenix said...
Yvo said... Great idea, but I think that the number of reviews in brackets looks better, like how it is on Facebook.

WaniKani (2) ... (21) ... (42+)
I don't think there's a way to do that without using API calls, which I don't know how to do in JavaScript.
 It would indeed - you'd require passing the user information as JSON and obtaining the specific value.

Personally I opted for an alert, as it takes control of all browser tab focus and really gets 'in your face':
alert("The Crabigator is ready");
In place of the title change.

#14
Personally I opted for an alert, as it takes control of all browser tab focus and really gets 'in your face':
alert("The Crabigator is ready");
In place of the title change.

That would be helpful because I sometimes don't notice the title change. Very annoying if it pops up when you're playing a game or something though.

I did update the version on github to use raw javascript so now it works with firefox and doesn't cause any other problems, like not being able to quote posts.
#15

Would that happen in Chrome? In firefox, the popup cannot force an alt-tab from a game(let alone outside of the browser focus) - not unless you’re playing a browser-based game, then I can see the issue.

#16
Kaimera said... Would that happen in Chrome? In firefox, the popup cannot force an alt-tab from a game(let alone outside of the browser focus) - not unless you're playing a browser-based game, then I can see the issue.
 Yes, I mean with browser-based games.
#17

There are JS notification libraries (like the HTML5 notifications which were deprecated I believe), though in order to actually use them you need to request permission every session you’re on the site. These would instead display a more non-intrusive, unfocused notification to the lower right-corner of your screen of the size you desire.

Otherwise, maybe a moving title bar would be more noticeably? That’d require changing the interval a little, maybe with an eventListener. Other than that, perhaps playing a sound?