☰

AO3: Badge for Unread Inbox Messages

puts a little notification badge in the menu for unread messages in your AO3 inbox

  1. // ==UserScript==
  2. // @name         AO3: Badge for Unread Inbox Messages
  3. // @namespace    https://greasyfork.org/en/users/906106-escctrl
  4. // @version      2.0
  5. // @description  puts a little notification badge in the menu for unread messages in your AO3 inbox
  6. // @author       escctrl
  7. // @match        https://*.archiveofourown.org/*
  8. // @license      MIT
  9. // @require      https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. /****************** CONFIGURATION ******************/
  14.  
  15. // how often the script will check for unread messages (in hours)
  16. const REFRESH_INTERVAL = 12;
  17.  
  18. // if the badge should show as an icon (true), or as text (false)
  19. const BADGE_ICON = true;
  20.  
  21. // pick a background color for the badge to stand out more, or leave empty quotes ""
  22. const HIGHLIGHT_COLOR = "gold";
  23.  
  24. // if the inbox link in the sidebar should automatically filter to unread messages only
  25. const FILTER_INBOX = false;
  26.  
  27.  
  28. // ****************** NOTE ON LOCAL STORAGE ******************
  29. // For compatibility between userscript managers, this script uses local storage, which is visible from the Developer console.
  30. // If you ever uninstall the script, unfortunately its data can't be automatically deleted.
  31. // If you want to remove the data it sets, (1) visit archiveofourown.org, (2) go into the Developer console,
  32. // (3) look for the Local Storage (4) and delete the entries for "unread_inbox_count" and "unread_inbox_date".
  33. // The script also removes its data if you ever visit AO3 while logged out.
  34.  
  35.  
  36. (function($) {
  37.     'use strict';
  38.  
  39.     // first question: is the user logged in? if not, don't bother with any of this
  40.     const linkDash = $("#greeting p.icon a").attr('href') || "";
  41.     if (linkDash === "") {
  42.         localStorage.removeItem('unread_inbox_count');
  43.         localStorage.removeItem('unread_inbox_date');
  44.         return;
  45.     }
  46.  
  47.     var highlight_css = (HIGHLIGHT_COLOR !== "") ? `#greeting #inboxbadge { background-color: ${HIGHLIGHT_COLOR}; border-radius: .25em; }` : "";
  48.  
  49.     $("head").append(`<style type="text/css"> a#inboxbadge .iconify { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; }
  50.         a#inboxbadge { display: block; padding: .25em .75em !important; text-align: center; float: left; margin: 0 1em; line-height: 1.286; height: 1.286em; }
  51.         p.icon a { float: right; } ${highlight_css}</style>`);
  52.  
  53.     // build a new inbox link (filtered to unread)
  54.     const linkInbox = linkDash + "/inbox?filters[read]=false&filters[replied_to]=all&filters[date]=desc&commit=Filter";
  55.  
  56.     // the fun begins: on a page where we're seeing the unread msgs, we simply set the value
  57.     var page_url = window.location.pathname;
  58.     if (page_url.includes(linkDash)) {
  59.  
  60.         // grab unread msgs # from the sidebar
  61.         var badge = (page_url.includes("/inbox")) ? $("div#dashboard li span.current").html() : $("div#dashboard a[href$='inbox']").html();
  62.         badge = badge.match(/\d+/);
  63.  
  64.         // store the currently seen value with the current date, on every page visit, no questions asked
  65.         localStorage.setItem('unread_inbox_count', badge);
  66.         localStorage.setItem('unread_inbox_date', new Date());
  67.  
  68.         // change sidebar inbox link as well to filtered
  69.         if (FILTER_INBOX) $("div#dashboard a[href$='inbox']").attr('href', linkInbox);
  70.  
  71.         printBadge();
  72.     }
  73.     // on other pages, we check if the stored value is recent enough, otherwise we load it again
  74.     else {
  75.  
  76.         var timeStored = new Date(localStorage.getItem("unread_inbox_date") || '1970'); // the date when the storage was last refreshed
  77.         var timeNow = createDate(0, 0, REFRESH_INTERVAL*-1, 0, 0, 0); // hours before that's max allowed
  78.  
  79.         // if recent enough, simply create the badge
  80.         if (timeStored > timeNow) printBadge();
  81.  
  82.         // if not, we have to start a background load
  83.         else {
  84.             $.get(linkDash, function(response) {
  85.             }).done(function(response) {
  86.  
  87.                 // grab the number from within the response
  88.                 if ($(response).find("div#dashboard a[href$='inbox']").length > 0) {
  89.                     var badge = $(response).find("div#dashboard a[href$='inbox']").html();
  90.                     badge = badge.match(/\d+/);
  91.  
  92.                     // update the stored data with what we just received
  93.                     localStorage.setItem('unread_inbox_count', badge);
  94.                     localStorage.setItem('unread_inbox_date', new Date());
  95.  
  96.                     printBadge();
  97.                 }
  98.                 // the response has hit a different page e.g. a CF prompt
  99.                 else
  100.                     console.log("[script] Badge for Unread Inbox Messages: ajax error", response);
  101.             }).fail(function(data, textStatus, xhr) {
  102.                 //This shows status code eg. 429
  103.                 console.log("[script] Badge for Unread Inbox Messages: ajax error", data.status);
  104.             });
  105.         }
  106.     }
  107.  
  108.     // add a little round badge to the user icon in the menu (if there are unread emails)
  109.     // this is called as a function as it needs to run only when the async ajax page load has completed
  110.     function printBadge() {
  111.         const badge = localStorage.getItem('unread_inbox_count');
  112.         const displaytext = (BADGE_ICON) ? `<span class="iconify"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor"a d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg></span>&nbsp;&nbsp;${badge}`
  113.                                          : `Inbox (${badge})`;
  114.         if (badge != "0") $("#greeting p.icon").prepend(`<a id="inboxbadge" href="${linkInbox}" title="You have unread messages in you inbox">${displaytext}</a>`);
  115.     }
  116.  
  117. })(jQuery);
  118.  
  119. // convenience function to be able to pass minus values into a Date, so JS will automatically shift correctly over month/year boundaries
  120. // thanks to Phil on Stackoverflow for the code snippet https://stackoverflow.com/a/37003268
  121. function createDate(secs, mins, hours, days, months, years) {
  122.     var date = new Date();
  123.     date.setFullYear(date.getFullYear() + years);
  124.     date.setMonth(date.getMonth() + months);
  125.     date.setDate(date.getDate() + days);
  126.     date.setHours(date.getHours() + hours);
  127.     date.setMinutes(date.getMinutes() + mins);
  128.     date.setSeconds(date.getSeconds() + secs);
  129.     return date;
  130. }