记录账号和密码

记录网站密码信息并自动填充
当前为 2024-08-05 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         记录账号和密码
// @version      0.4.2
// @description  记录网站密码信息并自动填充
// @author       niweizhuan
// @match        *://*/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_deleteValue
// @grant        GM_listValues
// @grant        GM_addStyle
// @grant        unsafeWindow
// @license      MIT
// @namespace https://bbs.tampermonkey.net.cn/
// ==/UserScript==

(function() {
    'use strict';

    // 是否自动填充密码
    var autoFillEnabled = true;
    // 如果不需要可以改为false
//*****************************************************************************************************

    // 当前显示的页面
    var currentPageIndex = 0;
    // 显示区域的 DOM 元素
    var displayAreaDiv;
    // 当前网站域名
    var currentDomain = getCurrentDomain();

    // 获取当前网站的域名
    function getCurrentDomain() {
        return window.location.hostname;
    }

    var prevPageButton;
    var nextPageButton;

    // 获取存储的数据
    function getStoredData(domain) {
        var data = GM_getValue(domain);
        return data ? JSON.parse(data) : [];
    }

    // 设置存储的数据
    function setStoredData(domain, data) {
        GM_setValue(domain, JSON.stringify(data));
    }

    // 创建显示区域
    function createDisplayArea() {
        if (displayAreaDiv) {
            document.body.removeChild(displayAreaDiv);
        }

        displayAreaDiv = document.createElement("div");
        displayAreaDiv.setAttribute("class", "passwordDisplayArea");
        displayAreaDiv.style.display = "none";
        displayAreaDiv.style.position = "fixed";
        displayAreaDiv.style.bottom = "70px";
        displayAreaDiv.style.right = "20px";
        displayAreaDiv.style.background = "skyblue";
        displayAreaDiv.style.padding = "5px";
        displayAreaDiv.style.border = "1px solid #ccc";
        displayAreaDiv.style.zIndex = "2147483647";
        displayAreaDiv.style.maxWidth = "250px";
        displayAreaDiv.style.fontSize = "14px";

        var topButtons = document.createElement("div");
        topButtons.style.display = "flex";
        topButtons.style.justifyContent = "space-between";
        topButtons.style.marginBottom = "5px";

        topButtons.appendChild(createButton("关闭", function() {
            displayAreaDiv.style.display = "none";
        }));

        topButtons.appendChild(createButton("编辑", function() {
            displayAreaDiv.style.display = "none";
            showEditPage();
        }));

        topButtons.appendChild(createButton("新建", function() {
            displayAreaDiv.style.display = "none";
            showEditPage({}, true);
        }));

        displayAreaDiv.appendChild(topButtons);

        var domainContainer = document.createElement("div");
        domainContainer.style.display = "flex";
        domainContainer.style.alignItems = "center";
        domainContainer.appendChild(createLabel("当前网站:"));
        domainContainer.appendChild(createValue(currentDomain));
        displayAreaDiv.appendChild(domainContainer);

        var accountContainer = document.createElement("div");
        accountContainer.setAttribute("class", "accountContainer");
        displayAreaDiv.appendChild(accountContainer);

        var pageControls = document.createElement("div");
        pageControls.style.display = "flex";
        pageControls.style.justifyContent = "center";
        pageControls.style.marginTop = "5px";

        prevPageButton = createButton("<", function() {
            if (currentPageIndex > 0) {
                currentPageIndex--;
                updateAccountDisplay();
            }
        });
        pageControls.appendChild(prevPageButton);

        var pageLabel = document.createElement("span");
        pageLabel.setAttribute("class", "pageLabel");
        pageLabel.style.margin = "0 10px";
        pageControls.appendChild(pageLabel);

        nextPageButton = createButton(">", function() {
            var storedData = getStoredData(currentDomain);
            if ((currentPageIndex + 1) < storedData.length) {
                currentPageIndex++;
                updateAccountDisplay();
            }
        });
        pageControls.appendChild(nextPageButton);

        displayAreaDiv.appendChild(pageControls);

        document.body.appendChild(displayAreaDiv);

        updateAccountDisplay();
    }

    // 创建按钮
    function createButton(text, clickHandler) {
        var button = document.createElement("button");
        button.textContent = text;
        button.style.cursor = "pointer";
        button.style.backgroundColor = "transparent";
        button.style.border = "none";
        button.style.fontSize = "inherit";
        button.style.color = "#333";
        button.style.margin = "0 5px";
        button.style.padding = "3px 5px";
        button.onclick = clickHandler;
        button.ontouchend = clickHandler;
        return button;
    }

    // 创建标签
    function createLabel(text) {
        var label = document.createElement("p");
        label.textContent = text;
        label.style.margin = "0";
        return label;
    }

    // 创建值显示
    function createValue(text) {
        var value = document.createElement("p");
        value.textContent = text;
        value.style.margin = "0 5px";
        return value;
    }

    // 创建没有信息的文本
    function createNoInfoText(text) {
        var noInfoText = document.createElement("p");
        noInfoText.textContent = text;
        noInfoText.style.margin = "0";
        return noInfoText;
    }

    // 创建复制按钮
    function createCopyButton(text, copyText) {
        var button = document.createElement("button");
        button.textContent = text;
        button.style.cursor = "pointer";
        button.style.backgroundColor = "transparent";
        button.style.border = "none";
        button.style.fontSize = "inherit";
        button.style.color = "#333";
        button.style.marginLeft = "5px";
        button.style.padding = "3px 5px";
        button.onclick = function() {
            copyTextToClipboard(copyText, button);
        };
        button.ontouchend = button.onclick;
        return button;
    }

    // 复制文本到剪贴板
    function copyTextToClipboard(text, button) {
        navigator.clipboard.writeText(text).then(function() {
            var originalText = button.textContent;
            button.textContent = "已复制";
            setTimeout(function() {
                button.textContent = originalText;
            }, 2000);
        }).catch(function(err) {
            console.error('复制失败：', err);
        });
    }

    // 填充编辑页面字段
    function populateEditFieldsWithCurrentAccount() {
        var storedData = getStoredData(currentDomain);
        var currentAccount = storedData[currentPageIndex];

        var usernameField = document.getElementById("editUsername");
        var passwordField = document.getElementById("editPassword");

        usernameField.value = currentAccount.username || "";
        passwordField.value = currentAccount.password || "";
    }

    // 更新账号显示
    function updateAccountDisplay() {
        var storedData = getStoredData(currentDomain);
        var accountContainer = displayAreaDiv.querySelector(".accountContainer");
        accountContainer.innerHTML = "";

        if (storedData.length > 0) {
            var accountInfo = storedData[currentPageIndex];
            var accountRow = document.createElement("div");
            accountRow.style.display = "flex";
            accountRow.style.justifyContent = "space-between";
            accountRow.appendChild(createLabel("账号:"));
            accountRow.appendChild(createCopyButton("复制", accountInfo.username || "[无账号信息]"));
            accountContainer.appendChild(accountRow);
            accountContainer.appendChild(createValue(accountInfo.username || "[无账号信息]"));
            var passwordRow = document.createElement("div");
            passwordRow.style.display = "flex";
            passwordRow.style.justifyContent = "space-between";
            passwordRow.appendChild(createLabel("密码:"));
            passwordRow.appendChild(createCopyButton("复制", accountInfo.password));
            accountContainer.appendChild(passwordRow);
            accountContainer.appendChild(createValue(accountInfo.password));
            fillCredentials(accountInfo.username, accountInfo.password);
        } else {
            accountContainer.appendChild(createLabel("账号:"));
            accountContainer.appendChild(createNoInfoText("[无账号信息]"));
            accountContainer.appendChild(createLabel("密码:"));
            accountContainer.appendChild(createNoInfoText("[无密码信息]"));
        }

        displayAreaDiv.querySelector(".pageLabel").textContent = (currentPageIndex + 1) + "/" + Math.ceil(storedData.length);
        prevPageButton.style.display = currentPageIndex > 0 ? "inline" : "none";
        nextPageButton.style.display = (currentPageIndex + 1) < storedData.length ? "inline" : "none";
    }

    // 显示编辑页面
    function showEditPage(accountInfo = {}, isNew = false) {
        var editDiv = document.createElement("div");
        editDiv.setAttribute("class", "passwordEditArea");
        editDiv.style.position = "fixed";
        editDiv.style.bottom = "70px";
        editDiv.style.right = "20px";
        editDiv.style.background = "white";
        editDiv.style.padding = "10px";
        editDiv.style.border = "1px solid #ccc";
        editDiv.style.zIndex = "2147483647";
        editDiv.style.maxWidth = "250px";
        editDiv.style.fontSize = "14px";
        editDiv.innerHTML = `
        <p><label>账号：<input type="text" id="editUsername" style="width: 100%;"></label></p>
        <p><label>密码：<input type="password" id="editPassword" style="width: 100%;"></label></p>
        <div style="display: flex; justify-content: space-between; margin-top: 10px;">
            <button id="cancelEdit">取消</button>
            <button id="saveEdit">${isNew ? '创建' : '保存'}</button>
            ${!isNew ? '<button id="deleteEntry">删除</button>' : ''}
        </div>
    `;

        document.body.appendChild(editDiv);

        if (!isNew) {
            populateEditFieldsWithCurrentAccount();
        }

        document.getElementById("cancelEdit").onclick = function() {
            document.body.removeChild(editDiv);
        };

        document.getElementById("saveEdit").onclick = function() {
            var username = document.getElementById("editUsername").value.trim();
            var password = document.getElementById("editPassword").value;

            if (!validateInput(username, password)) {
                return;
            }

            var storedData = getStoredData(currentDomain);

            if (isNew) {
                storedData.push({ username, password });
            } else {
                storedData[currentPageIndex] = { username, password };
            }

            setStoredData(currentDomain, storedData);
            document.body.removeChild(editDiv);
            currentPageIndex = 0;
            updateAccountDisplay();
        };

        if (!isNew) {
            document.getElementById("deleteEntry").onclick = function() {
                var storedData = getStoredData(currentDomain);
                storedData.splice(currentPageIndex, 1);
                setStoredData(currentDomain, storedData);
                document.body.removeChild(editDiv);
                currentPageIndex = 0;
                updateAccountDisplay();
            };
        }
    }

    // 自动填充账号和密码
    function fillCredentials(username, password) {
        if (autoFillEnabled) {
            var editAreaExists = document.querySelector(".passwordEditArea");
            if (editAreaExists) {
                return;
            }

            var usernameField = document.querySelector("input[type='text'], input[type='email']");
            var passwordField = document.querySelector("input[type='password']");
            if (usernameField && passwordField) {
                usernameField.value = username;
                passwordField.value = password;
            }
        }
    }

    // 验证输入
    function validateInput(username, password) {
        return true; // 暂时不使用详细的验证逻辑
    }

    // 创建控制按钮
    function createControlButton() {
        var controlButton = document.createElement("button");
        controlButton.textContent = "显示账号和密码";
        controlButton.style.position = "fixed";
        controlButton.style.bottom = "10px";
        controlButton.style.right = "10px";
        controlButton.style.fontSize = "10px";
        controlButton.style.cursor = "pointer";
        controlButton.style.zIndex = "2147483647";
        controlButton.onclick = function() {
            displayAreaDiv.style.display = displayAreaDiv.style.display === "none" ? "block" : "none";
            if (displayAreaDiv.style.display === "block") {
                updateAccountDisplay();
            }
        };

        document.body.appendChild(controlButton);
    }

    createControlButton();
    createDisplayArea();

})();