A Password Generating Bookmarklet

Shortly after I learned about bookmarklets, I started trying to think of ways to use them. The most useful that I found was to create a password generator that will generate and copy a strong password to the clipboard.

To use this, create a new bookmark and give it a name. To make mine simple and light on my bookmark bar, I named it using the lock emoji 🔒. Then, paste the script into the URL field. Now, when you click the lock, you will have a strong password copied to your clipboard.

javascript:(function() { function generatePassword(length = 24) { const upperCase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const lowerCase = 'abcdefghijklmnopqrstuvwxyz'; const numbers = '0123456789'; const specialCharacters = '!@#$%&;-~'; let password = ''; password += upperCase.charAt(Math.floor(Math.random() * upperCase.length)); password += lowerCase.charAt(Math.floor(Math.random() * lowerCase.length)); password += numbers.charAt(Math.floor(Math.random() * numbers.length)); password += specialCharacters.charAt(Math.floor(Math.random() * specialCharacters.length)); const allCharacters = upperCase + lowerCase + numbers + specialCharacters; for (let i = 4; i < length; i++) { const randomIndex = Math.floor(Math.random() * allCharacters.length); password += allCharacters[randomIndex]; } password = password.split('').sort(() => Math.random() - 0.5).join(''); return password; } function showNotification(message, avgReadingSpeed = 200) { let notification = document.createElement("div"); notification.innerText = message; notification.style.position = "fixed"; notification.style.top = "10px"; notification.style.left = "10px"; notification.style.backgroundColor = "rgba(0, 0, 0, 0.7)"; notification.style.color = "white"; notification.style.padding = "10px"; notification.style.borderRadius = "5px"; notification.style.zIndex = "99999"; notification.style.maxWidth = "90vw"; document.body.appendChild(notification); let time = (function() { let wordCount = message.trim().split(/\s+/).length; let readingTimeMillis = (wordCount / avgReadingSpeed) * 60 * 1000; return Math.max(readingTimeMillis, 3000); })(); setTimeout(function() { document.body.removeChild(notification); }, time); } function copyToClipboard(text) { const textArea = document.createElement('textarea'); textArea.value = text; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); return true; } const PASSWORD = generatePassword(); if (copyToClipboard(PASSWORD)) { showNotification("Password copied to clipboard: " + PASSWORD); } else { showNotification("There was some kind of error..."); }})();

Here’s the same code formatted for easier reading. The length of the password defaults to 24 characters. That can be adjusted where the constant “PASSWORD” is created by adding a number as an argument in the generatePassword() function.

javascript: (function () {
    function generatePassword(length = 24) {
        const upperCase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        const lowerCase = 'abcdefghijklmnopqrstuvwxyz';
        const numbers = '0123456789';
        const specialCharacters = '!@#$%&;-~';
        let password = '';
        password += upperCase.charAt(Math.floor(Math.random() * upperCase.length));
        password += lowerCase.charAt(Math.floor(Math.random() * lowerCase.length));
        password += numbers.charAt(Math.floor(Math.random() * numbers.length));
        password += specialCharacters.charAt(Math.floor(Math.random() * specialCharacters.length));
        const allCharacters = upperCase + lowerCase + numbers + specialCharacters;
        for (let i = 4; i < length; i++) {
            const randomIndex = Math.floor(Math.random() * allCharacters.length);
            password += allCharacters[randomIndex];
        }
        password = password.split('').sort(() => Math.random() - 0.5).join('');
        return password;
    }

    function showNotification(message, avgReadingSpeed = 200) {
        let notification = document.createElement("div");
        notification.innerText = message;
        notification.style.position = "fixed";
        notification.style.top = "10px";
        notification.style.left = "10px";
        notification.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
        notification.style.color = "white";
        notification.style.padding = "10px";
        notification.style.borderRadius = "5px";
        notification.style.zIndex = "99999";
        notification.style.maxWidth = "90vw";
        document.body.appendChild(notification);
        let time = (function () {
            let wordCount = message.trim().split(/\s+/).length;
            let readingTimeMillis = (wordCount / avgReadingSpeed) * 60 * 1000;
            return Math.max(readingTimeMillis, 3000);
        })();
        setTimeout(function () {
            document.body.removeChild(notification);
        }, time);
    }

    function copyToClipboard(text) {
        const textArea = document.createElement('textarea');
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        return true;
    }

    const PASSWORD = generatePassword();
    if (copyToClipboard(PASSWORD)) {
        showNotification("Password copied to clipboard: " + PASSWORD);
    } else {
        showNotification("There was some kind of error...");
    }
})();

Timothy's Dev Stuff

A Password Generating Bookmarklet