[Userscript] WK Dashboard Community Notifications

: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.

Solution for this request

Features

Adds a notification badge to your wanikani dashboard, so you know if you have forum notifications

image

Usage

Install the userscript and from then on, whenever you have notifications, it should show them. (It won’t sync them up between wanikani and the forums, but I don’t think I can do anything about that)
If it asks you if it can make cross site requests, accept it, it’s there to get the notifications

Installation

Visual Guide on How to Install a Userscript
Link to the userscript

10 Likes

Can you add a picture of it on your dashboard?

Edited, I didn’t have notifications when I posted it. But it should look basically the same as on forums.

2 Likes

Redglare, a complete noob, somehow managed to modify this so it works on BunPro :eyes: :sparkles: First time I’ve edited a script successfully :'D

image

BunPro Dashboard Community Notifications
// ==UserScript==
// @name         BunPro Dashboard Community Notifications
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Bring the community notifications to bunpro.jp
// @author       You
// @match        *://bunpro.jp/dashboard
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bunpro.jp
// @grant        GM.xmlHttpRequest
// @license      MIT
// ==/UserScript==

(async function() {
  'use strict';

  const lastChecked = JSON.parse(window.localStorage.getItem("dashboard-notifications.lastRead") ?? "0");

  const notifications = JSON.parse(
    (await GM.xmlHttpRequest({url: "https://community.bunpro.jp/notifications.json"})).response
  ).notifications;

  console.log(notifications);

  const pending = notifications.filter((notification) =>
    Date.parse(notification.created_at) > lastChecked
      && notification.read === false);
  const pendingCount = pending.length;

  if (pendingCount === 0) {
    return;
  }

  const avatar = document.querySelector(".gravatar-img");

  avatar.addEventListener("click", () => {
    window.localStorage.setItem(
      "dashboard-notifications.lastRead",
      JSON.stringify(Date.now())
    );

    notificationBadge.remove();
  });

  const styleElem = document.createElement("style");
  document.head.append(styleElem);
  styleElem.innerHTML = `
  .community-notification-badge {
    position: absolute;
    background: #6cf;
    display: block;
    width: 1rem;
    top: 1px;
    right: 87px;
    height: 1rem;
    color: white;
    font-size: 12px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    line-height: 1rem;
  }
  `;

  const notificationBadge = document.createElement("span");
  notificationBadge.classList.add("community-notification-badge");
  notificationBadge.innerHTML = pendingCount;
  avatar.after(notificationBadge);
})();
4 Likes