Systematically Clear Twitter Mobile Notifications

Recently I decided to clear out my mobile notifications on Twitter in their entirety. This sounds simple enough, but I had about 102 handles being sent to my phone and there was no way to tell which from the site. Feel free to look. Since there was no easy way to clear all mobile notifications without just turning them off entirely I set out to do it programmatically.

First thing I needed to know was how to trigger native click events, luckily Mozilla has a page for that. With this under my arm I headed into my browser and opened up the command console. Luckily Twitter identifies users being followed with a "notifying" class name, but it is higher in the hierarchy than one might expect. After a lot of messing around I learned that I could not do it all in one fell swoop because any delays using JavaScript's setTimeout() method got cleared out when the page changed (at least on Chrome), I assume this is a security measure, and it's generally pretty good that it's there. In this case, however, it became quite a nuisance. I also learned that I couldn't just keep "clicking" the "Turn off mobile notifications" button without first opening the actual drop-down. I would wager a guess that this is another security measure of sorts.

In the end I had to run a line of code 102 times to clear out the notifications, but that's not too bad (considering it is just up-arrow, enter over and over) compared to hunting this all manually. This little script simply opens the drop-down for the first user in the list that you are receiving notifications for, and then "clicks" the "Turn off mobile notifications" button after 1 second. You can run it in a console, or in the browser's URL bar by first prefixing it with "javascript:", just remember to scroll all the way to the bottom of your following page before you use it (so everyone can load). If Twitter just had a more friendly interface in this area, none of this would even be necessary.

(function(){var e=new MouseEvent('click',{'view':window,'bubbles':true,'cancelable':true});var a=document.getElementsByClassName("notifying");if(a[0]){a[0].getElementsByClassName("dropdown-toggle")[0].dispatchEvent(e);setTimeout(function(){a[0].getElementsByClassName("device-notifications-off-text")[0].dispatchEvent(e);},1000);}})();

Here is something a little more readable so you can get an idea for how it works:

(function()
{
  var e = new MouseEvent('click', {'view':window,
                                 'bubbles':true,
                                 'cancelable':true});
  var a = document.getElementsByClassName("notifying");

  if (a[0]) {
    a[0].getElementsByClassName("dropdown-toggle")[0].dispatchEvent(e);
    setTimeout(function()
      {
        a[0].getElementsByClassName("device-notifications-off-text")[0].dispatchEvent(e);
      },1000);
  }
})();