How To: Make a View Password Bookmarklet

How To: Make a View Password Bookmarklet

Charles's photo
ยทSep 2, 2020ยท

2 min read

One thing I learned years ago was how to use JavaScript to make bookmarklets/applets. One I made and find quite useful, especially when developing my own apps, is a "View passwords" applet.

To make your own applet you need to make sure your code is wrapped in an anonymous and self invoking function. This way you don't contaminate the page with your own variables and mess anything else up.

Here's the code for it. It's quite simple:

javascript: (function () {
    var allPasswordFields = document.querySelectorAll('input[type=password]');
    if (allPasswordFields !== undefined)
        for (i = 0; i < allPasswordFields.length; i++)
            allPasswordFields[i].type = 'text';

Once you've got your code snippet created simply right click your browser tab to create a new bookmark. For this, give it a name like "Show Passwords" and then paste your code snippet into the URL input.

Now, simply go to a website or page you know has a password input on it and click your new bookmark button and boom, it's now a text field and you can see it.

This comes in handy for websites that require you to verify your passwords match and is yelling at you that they don't. Or, if you just like to see it as you type it. A lot of sites are making this a default behavior now with the option to view your password. But, even if they don't, now you have a slick way to change it without using the developer console!

Have fun with it and figure out your own useful bookmarklet. If you come up with something interesting I'd love to hear about it. I'm always trying to find ways to automate and simplify my life.

Photo by chris panas on Unsplash

Share this