Dashboard Progress Plus Discontinued… Here’s the replacement: Please check out the newer script created and maintained by @prouleau, which you can find here: [image] [Userscript] Dashboard Progress Plus 2 API And Third-Party Apps warning This is a third-party script/app and is not created by the WaniKani team. By using this, you understand that it can stop working at any time or be discontinued indefinitely. Requirements: [ General Script Installation instructions ] point_left You’ll need a script host plugin like TamperMonkey [ Open Framework Installation ] Download the script here: Dashboard Progress Plus I am taking over the maintenance of @rfindley script Dashboard Progress Plus because the original autho… Archived Info :warning: This is a third-party script/app and is not created by the WaniKani team. By using this, you understand that it can stop working at any time or be discontinued indefinitely. [ General Script Installation instructions ] :point_left: You’ll need a script host plugin like TamperMonkey [ Open Framework Installation ] [ Download / Install “Dashboard Progress Plus” ] Features: Visually indicate SRS stages of items, including Locked and Lessons Adds a “90%” kanji box. When all items in the box reach Guru, you will level up. [image] [Settings] [image] [image]

Most recent update broke it down again :cry:

Making this comment as a way to keep track of the things I have been able to fix and how and the things that need to be addressed. It will be edited as needed. It looks like they completely removed JQuery this time and also the popover css (and probably other bootstrap css too). This means that @requireing Bootstrap as suggested by @reconman won’t work as Bootstrap will give you an error that it requires JQuery. Including JQuery using Open Framework isn’t a straightforward fix because scripts that are @required are placed and run before the userscript itself, meaning Bootstrap will error before Open Framework is ever called on. The solution is to remove the @require, make startup async and await wkof.load_script using the bootstrap.js url. This function then needs to be called after the promise for Open Framework ready is resolved. For the css it might be a good idea to create an @resource bootstrapcss ... and use GM_addStyle and GM_getResourceText to inject that into the page. Or one could just grab the parts of bootstrap css that are needed and inject those like any other css from the script. Additional note about using the GM functions They need to be @granted so that will then sandbox the userscript, meaning that you might run into issues with accessing things on window. For example, we can no longer check for !window.wkof at the start of the script, we instead need to do !wkof, otherwise the first expression evaluates to true even when open framework is installed and working. Final Edit: Ok, it seems these are the changes that get the script working again. We need to make sure JQuery is injected before Bootstrap.js, fix the missing icon for the lock, provide the CSS for .popover things, and handle turbo loads. Injecting bootstrap I added the GM_addElement call into the startup function before insertcss to handle loading the bootstrap, so don’t forget to @grant it and make the change to the open framework confirmation condition mentioned above. I found out that wkof.load_script is better for this; we make startup async and add the following instead: await wkof.load_script('https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js', /* use_cache */ true); Fixing the missing lock icon To fix the missing lock icon we can use an svg in place of webfont for the pseudo-element content. Instead of font-size we set the width and height, instead of color property we set the fill attribute. When I was testing this the lock icon was way out of place so I changed the top property to 8px from -6px and that looked good. Needed to add a high z-index. Similar edits for the lesson badge positioning although I can’t quite get the “L” centered for the kanji (but it is for the radicals, which makes it even more strange) // Locked and Lesson icons; UIcons by Flaticon - https://www.flaticon.com/uicons '.level-progress-dashboard__items[data-lock-icon="y"] .dpp-progress[data-srs-lvl="-1"] .subject-character::before {'+ ' content:url(\'data:image/svg+xml; utf-8, \');position:absolute;left:-4px;top:8px;z-index: 99;-webkit-text-stroke:1px black;}'+ '.level-progress-dashboard__items[data-lesson-icon="y"] .dpp-progress[data-srs-lvl="0"] .subject-character::before {'+ ' content:"L";font-size:12px;font-weight:bold;color:black;position:absolute;left:-4px;top:10px;border-radius:50%;border:1px solid black;width:14px;height:14px;display:inline-block;padding:0;margin:0;line-height:14px;background-color:#ff8;text-align:center;z-index:99;}'+ Handling Turbo Loads To handle turbo loads we need to do the following until Open Framework itself is written to handle turbo loads. We wrap the Open Framework initialization in a function that we will call in an event handler for turbo:load. We use setTimeout to make the callback execute on the next tick of the event loop just to ensure the page has a chance to load most things (it seems like turbo-frames are the only things that might not be loaded in even after a turbo:load, so in those cases a script that modifies things in a turbo-frame should be sure to listen to turbo:frame-load and possibly turbo:before-frame-render as well). I have the bare call to main() commented out because it can cause issues with multiple calls, that is, main() is called once then called again by the event listener right after. Oh, and we also need to change the @match to be for wanikani.com/* not specifically the dashboard. function main() { wkof.include('Jquery, ItemData, Menu, Settings'); wkof.ready('document,Jquery,ItemData,Menu,Settings').then(load_settings).then(startup); } // main(); window.addEventListener("turbo:load", () => { if (!/^https:\/\/www\.wanikani\.com(\/dashboard.*)?\/?$/.test(document.url)) return; setTimeout(main, 0); }); The css that is needed for just popover stuff so you don't have to include all of bootstrap css .popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; padding: 1px; line-height: 1.42857143; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; word-wrap: normal; white-space: normal; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; box-shadow: 0 5px 10px rgba(0, 0, 0, .2); line-break: auto; } .popover.top { margin-top: -10px; } .popover.right { margin-left: 10px; } .popover.bottom { margin-top: 10px; } .popover.left { margin-left: -10px; } .popover-title { padding: 8px 14px; margin: 0; font-size: 14px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; } .popover-content { padding: 9px 14px; } .popover > .arrow, .popover > .arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } .popover > .arrow { border-width: 11px; } .popover > .arrow:after { content: ""; border-width: 10px; } .popover.top > .arrow { bottom: -11px; left: 50%; margin-left: -11px; border-top-color: #999; border-top-color: rgba(0, 0, 0, .25); border-bottom-width: 0; } .popover.top > .arrow:after { bottom: 1px; margin-left: -10px; content: " "; border-top-color: #fff; border-bottom-width: 0; } .popover.right > .arrow { top: 50%; left: -11px; margin-top: -11px; border-right-color: #999; border-right-color: rgba(0, 0, 0, .25); border-left-width: 0; } .popover.right > .arrow:after { bottom: -10px; left: 1px; content: " "; border-right-color: #fff; border-left-width: 0; } .popover.bottom > .arrow { top: -11px; left: 50%; margin-left: -11px; border-top-width: 0; border-bottom-color: #999; border-bottom-color: rgba(0, 0, 0, .25); } .popover.bottom > .arrow:after { top: 1px; margin-left: -10px; content: " "; border-top-width: 0; border-bottom-color: #fff; } .popover.left > .arrow { top: 50%; right: -11px; margin-top: -11px; border-right-width: 0; border-left-color: #999; border-left-color: rgba(0, 0, 0, .25); } .popover.left > .arrow:after { right: 1px; bottom: -10px; content: " "; border-right-width: 0; border-left-color: #fff; }

Awesome, thanks @LupoMiki! Is there a particular spot where we should copy and paste the above into the current userscript? Asking as someone who is completely illiterate when it comes to code lol

Hmm, unfortunately I cannot recommend any novices try to splice this code in, there’s no easy copy-paste step without knowing at least a little of what you’re doing. Hopefully by providing this outline it makes it easier for rfindley to implement, test, and push the fix with his limited time. I also can’t simply provide the full script text in a folded section here as I have a number of personal edits to the script not related to these changes.

After today’s update to the website, I only had to add one more require for jquery: // @require https://code.jquery.com/jquery-3.7.1.min.js // @require https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js I don’t think the bootstrap CSS is actually needed as the popovers look normal to me. Edit: Nevermind, only a few look normal, but not all of them.

That’s good about the popovers; they were pretty broken for me. And yes, I knew I could add the jQuery require but since Open Framework specifically has a jQuery module for this, I figured that’s the approach to take (also less code that’s injected, these requires aren’t free).

@LupoMikti Adding a // @grant GM_addStyle in TamperMonkey makes Chrome load the Dashboard Progress Plus script before the Open Framework for me, so I get a popup telling me to install it first. The CSS of the popovers is only slightly broken in my version, but I have no idea why the ones for items on the left look normal and the ones on the right are transparent and move the elements to the side. I compared the CSS properties of the correct ones and the bad ones and can’t see any difference. [image]

Nevermind, was able to fix it by adding a few CSS properties from the original bootstrap.css. Here’s my patched version: Dashboard Progress Plus Patch - Pastebin.com

[image] reconman: makes Chrome load the Dashboard Progress Plus script before the Open Framework for me, so I get a popup telling me to install it first. So this isn’t what actually is happening. When you grant the GM functions, then the script is sandboxed by the script manager and it no longer has fully shared access with the window of the webpage the script is being applied to. Instead, it uses Tampermonkey’s window which is then merged in some way with the actual window at runtime. One way to fix it is to replace instances of window.wkof with just wkof. I mention this in my comment with the explanations, just not in detail as someone more familiar with writing scripts likely knows the information already. I also mentioned adding the provided popover css without GM_addStyle as a possibility because the script itself already adds css without it (one could just add in the popover css to that section as well) which would fit better with your approach and not run into the sandboxing issue. However, since @requires aren’t free (they literally paste the contents into the injected script at runtime, so too many of them can affect performance and debugging), methods that do not go that route are preferred by me, but ultimately it is up to rfindley which approach to do.

One more broken thing: Seems like FontAwesome was removed from the website, so the locked icon in the custom CSS (\f023) is now just a rectangle. An alternative would be to use the :lock: emoji instead, but that looks out of place.

[Userscript] Dashboard Progress Plus

WaniKani API And Third-Party Apps

prouleau August 6, 2026, 8:04pm 598

This script is discontinued by the author. I have taken over the script. You should try this version:

Topic		Replies	Views
Making Progress on the Dashboard, Take 2 Announcements	287	17621	February 19, 2021
[Unsupported] Userscript: Dashboard Level Progress Detail (srs stages on progress bars) API And Third-Party Apps	59	8617	October 1, 2018
[Userscript] Dashboard Level Progress Detail. update to broken script API And Third-Party Apps	62	10923	December 29, 2020
[Userscript] Dashboard Progress Plus 2 API And Third-Party Apps	54	2293	August 11, 2026
[Userscript] Total Progress Bar (Allows Level Progress Removal)(aka 2Cool4Progress) API And Third-Party Apps	94	13752	January 28, 2026

[Userscript] Dashboard Progress Plus

Related topics