Remove Red Notification Dot from Trello Favicon

remove-red-notification-dot-from-trello-favicon.js

// ==UserScript==
// @name         Remove Red Notification Dot From Trello Favicon
// @namespace    https://iandunn.name
// @version      0.1
// @description  Trello adds a red dot to their favicon when new notifications are available, which I find useless and distracting. This restores the original icon after a few seconds, so that you normally see the favicon without the dot.
// @author       Ian Dunn
// @match        https://trello.com/*
// @grant        none
// ==/UserScript==

/*
 * @todo
 *
 * Just wait until document loaded, then save reference to faviconElement in init, rather than having to query the DOM every time revertFavicon runs.
 *
 * Maybe add a way to choose different favicons instead of hardcoding the blue one, or detect their chosen one.
 * Can't rely on the one shown when page is loaded, though, because that could already have the red dot.
 * Maybe trello has the favicon in a JS var somewhere you can access. Look for the code that runs when notifications are marked as read.
 */

( function() {
	'use strict';

	var app = window.removeRedNotificationDotFromTrelloFavicon = {
		defaultFavicon : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADtUlEQVR4Xu1bXUhUQRT+Lqi1/uSam2RimoIYEpkGQmUWkU9BsIY+RKUURVSQPiVYFglJUEYFURlt9BiYD0VqDyq+JKRRIvQSuv5k2Wpr/lzTYGN2vWa413uvc50d3PFxPb/fnJk5Z849EtT+4tMfIinLjthEG9YnyohLDUHY2lBVet7+MdAtY7TfgpF+F5yddRj6fMafidKiH7flX0dabgXS9vDmEp09nxqAvg9V6Gq6vFDQ/wBk23uRfyGJThPH3LPTM2h+PISOumTFyn8ArHbnF65L0z2nAoIPABL2h8orOF47c00jkdBYc5NsBx8ABVUepO02Vwnv0roagVfVkgRy2hc/OM27vStin+PsIwm7jv5A3inbiijgXWhrrUsyHP4jTsD9Dfg5CMjj6i5aooCYBCA6HrBtXh4UK62rqxESjt+fQkKGRY+FyR+fo/LkESRvikNmRjqsURFLsrW864B7YgqlNQ70bj+mR8U8DRNdg92yhPJmjx7Lin834+mta3pIF9G4J2SUVlbDsWa/Ln5mumamZ3UBQFaj5/UTXcarEREQdhSd14wElrqIrdoAuPpQX5SCwwfoU+NnLxtQ3PAdiFVJNlnqmlspbQC+tKOl7CDycrKoIoAwt7Z3Yt/tt0Bqjn9ZLHXpBuB9HTxNd6mdJwLc45OIKSgHdtr9y2OpSzcAbQ6Pp82xuGpcJiRS7gkPckv8y2OpSwDgQ0D7DGC5Kix1iQgQESC2gDgDxCEobgFxDYo8QPM9gGVywlKXSIREIiQSIZEIiUSIt0TIxBehsYkpWO2X1F+fuLwFuHwTZHk3jzhRX5hq3gv0m2HNrhRfmSAAM/oCY5PTyCw8p9mD4O8WmNuXNJ0h4vzFKzd0d6G4iwDlsZlEwp2yElgjw719yOjI8CXfoUnPoffrMK7WvtC18oowbgHwGujqA8aG5jrRv9QBsKzzdaKtG9W7TircfAOwzN6DETYBAFflsJGlM4lWRICIAK0vRFhmgiaFtRExYguILaC1BQJQohoJYVpa7S0QgBKV1ikj/NoABKBENeIALa02AAEoUWmdMsKvCwAikGWJasQBWlrdABBFrEpUWqeM8BsCgFWJasQBKtoZ+Y+hj6WplPHI7P1YOhinRZTF8H4uH/QDE0E/MkPCIRi3wfzQFAEg6MfmCAhBPTipnIqrHYQlR2cVELzD03srVt0gJdnzzk6N4emFyQq5HbZk2xG/1YYIq4wNKaEIs4TwmM/4tWmQjM8PWDDa70JPh+r4/F/AA0DGjWnhvQAAAABJRU5ErkJggg==',

		/**
		 * Main entry point
		 */
		init : function() {
			setInterval( app.revertFavicon, 5000 );
		},

		/**
		 * Revert to the original favicon
		 */
		revertFavicon : function() {
			var faviconElement = document.querySelector( "link[rel='icon']" );

			if ( ! faviconElement ) {
				return;
			}

			faviconElement.href = app.defaultFavicon;
		}
	};

	app.init();
} )();