☰

Twitter - add unread notifications count in the tab title

Adds unread notifications count in the tab title

  1. // ==UserScript==
  2. // @name        Twitter - add unread notifications count in the tab title
  3. // @namespace   darkred
  4. // @version     2018.2.27
  5. // @description Adds unread notifications count in the tab title
  6. // @author      darkred
  7. // @license     MIT
  8. // @include     https://twitter.com/*
  9. // @grant       none
  10. // @require     https://greasyfork.org/scripts/21927-arrive-js/code/arrivejs.js
  11. // @supportURL  https://github.com/darkred/Userscripts/issues
  12. // ==/UserScript==
  13.  
  14.  
  15.  
  16. // .count > .count-inner
  17. // Notifications counter
  18.  
  19. // .dm-new > .count-inner
  20. // DM counter
  21.  
  22.  
  23. var notificationsCounter;
  24.  
  25. function addCounterInTitle() {
  26. 	// alert(0);
  27. 	// counter = parseInt(document.querySelector('.count-inner').innerHTML);									// the Notifications counter value
  28. 	notificationsCounter = parseInt(document.querySelector('.count > .count-inner').innerHTML);					// the Notifications counter value
  29. 	// if (counter > 0 && document.title.indexOf('|') > 3) {		// if the '|' symbol is the default separator of username and 'Twitter' when viewing profiles, e.g.:  Twitter Support (@Support) | Twitter. In here the position of `|` is 27.
  30. 	if (notificationsCounter > 0) {		// if the '|' symbol is the default separator of username and 'Twitter' when viewing profiles, e.g.:  Twitter Support (@Support) | Twitter. In here the position of `|` is 27.
  31. 		if (/[0-9]+\ \|\ .*/.test(document.title)){			// if our counter is already added to title
  32. 			var defaultTitle = document.title.match(/[0-9]+\ \|\ (.*)/)[1];
  33. 			document.title = notificationsCounter + ' | ' + defaultTitle;
  34. 			return;
  35. 		} else {
  36. 			document.title = notificationsCounter + ' | ' + document.title;				// add the counter to the title
  37. 			return;
  38. 		}
  39. 	} else if (notificationsCounter === 0) {
  40. 		document.title = /[0-9]+\ \|\ (.*)/g.exec(document.title)[1];		// remove title's added counter
  41. 	}
  42. }
  43.  
  44.  
  45.  
  46. // After the 'Notifications' counter is first visible in the page (= the selector below is for the element: 'the 1st avatar thumbnail in the "Who to follow" panel')
  47. document.arrive('div.js-account-summary:nth-child(1) > div:nth-child(2) > a:nth-child(1) > img:nth-child(1)', function () {
  48. 	addCounterInTitle();
  49. });
  50.  
  51.  
  52.  
  53. // Whenever there are new unread tweets in the timeline..
  54. document.arrive('.new-tweets-bar', function () {
  55. 	var target = document.querySelector('.new-tweets-bar'); // ..οbserve the unread counter for changes(increase)
  56. 	var observer = new MutationObserver(function (mutations) {
  57. 		addCounterInTitle(); 							// Refresh the counter on every such change
  58. 	});
  59. 	var config = {
  60. 		childList: true,
  61. 	};
  62. 	observer.observe(target, config);
  63. });
  64.  
  65.  
  66.  
  67. // Refresh the counter when there are no unread tweets
  68. document.leave('.new-tweets-bar', function () {
  69. 	addCounterInTitle();
  70. });
  71.  
  72.  
  73.  
  74. // Whenever viewing the 'Notifications' tab
  75. document.arrive('.NotificationsHeadingContent', function () {
  76. 	// document.querySelector('.count-inner').innerHTML = 0;			// ..reset the counter..
  77. 	document.querySelector('.count > .count-inner').innerHTML = 0;			// ..reset the counter..
  78. 	notificationsCounter = 0;
  79. 	document.title = document.title.match(/[0-9]+\ \|\ (.*)/)[1];	// ..and the tab title
  80. });
  81.  
  82.  
  83.  
  84. // Observe the 'Notifications' counter for changes
  85. var target2 = document.querySelector('.count-inner');
  86. var observer2 = new MutationObserver(function (mutations) {
  87. 	addCounterInTitle();
  88. });
  89. var config2 = {
  90. 	childList: true,
  91. };
  92. observer2.observe(target2, config2);
  93.  
  94.  
  95.  
  96.  
  97.  
  98.  
  99. function resetCounter(){
  100. 	// document.querySelector('.new-count').className = 'count';
  101. 	notificationsCounter = 0;
  102. 	document.querySelector('.count-inner').innerHTML = '';
  103. 	document.title = /[0-9]+\ \|\ (.*)/g.exec(document.title)[1];
  104. }
  105.  
  106. /// A "click" event listener attached on the "Notifications" button:
  107. // if the user clicks, rightclicks or middle-clicks the button, then reset the counter and the tab title.
  108. var target3 = document.querySelector('.people');
  109. target3.addEventListener('mousedown', resetCounter, false);