Show Passwords Bookmarklet

by Aaron

I wrote a bookmarklet that makes password inputs show you their contents. The motivation is threefold:

  1. Pasting $('input[type="password"]').val() the console of a page with saved passwords has always amused me and the bookmarklet makes this easier to do on pages that don't have jQuery.
  2. I sometimes actually want to see the password I'm typing, either because it's fiendishly complicated or for some reason I've messed up a bunch and want to verify my typing.
  3. I wanted to play with SASS and CSS linear gradients. So I put together a tiny website and needed something to put up there on it.

Teh Codez

javascript:(function(){
    var passwords = document.querySelectorAll('input[type="password"]');
    for(var i = 0; i < passwords.length; i++){
        passwords[i].setAttribute('type', 'text');
    }
})();
  1. This is a bookmarklet, hence the javascript: protocol. In order for the browser to not navigate to a new page, bookmarklets need to return undefined, hence the anonymous function.
  2. document.querySelector and friends are very cool and they let you find elements jQuery style without needing to try and pull in jQuery to run your three lines of actual code.
  3. Unfortunately, document.querySelectorAll doesn't return a real Array so you can't use Array.forEach and are stuck using JavaScript's built in for. Sad sauce!