HB_Screenshots

一键生成密钥截图

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği yüklemek için Tampermonkey gibi bir uzantı yüklemeniz gerekir.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği indirebilmeniz için ayrıca Tampermonkey gibi bir eklenti kurmanız gerekmektedir.

Bu komut dosyasını yüklemek için bir kullanıcı komut dosyası yöneticisi uzantısı yüklemeniz gerekecek.

(Zaten bir kullanıcı komut dosyası yöneticim var, kurmama izin verin!)

Bu stili yüklemek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için Stylus gibi bir uzantı kurmanız gerekir.

Bu stili yükleyebilmek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı kurmanız gerekir.

Bu stili yükleyebilmek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

(Zateb bir user-style yöneticim var, yükleyeyim!)

// ==UserScript==
// @name:zh-CN      HB截图助手
// @name            HB_Screenshots
// @namespace       https://blog.chrxw.com
// @supportURL      https://blog.chrxw.com/scripts.html
// @contributionURL https://afdian.com/@chr233
// @version         2.10
// @description     一键生成密钥截图
// @description:zh-CN  一键生成密钥截图
// @author          Chr_
// @license         AGPL-3.0
// @icon            https://blog.chrxw.com/favicon.ico
// @require         https://lib.baomitu.com/html2canvas/1.4.1/html2canvas.min.js
// @include         https://www.humblebundle.com/downloads?key=*
// @include         https://zh.humblebundle.com/downloads?key=*
// @grant           GM_setClipboard
// ==/UserScript==

(() => {
    "use strict";
    // 初始化
    const GObjs = {};
    let GTimer = 0;
    (() => {
        addGUI();
        GTimer = setInterval(() => {
            waitLoading();
        }, 5000);
    })();
    function addGUI() {
        function genBtn(txt, foo) {
            const b = document.createElement("button");
            b.textContent = txt;
            b.addEventListener("click", foo);
            b.style.cssText = "font-size: 14px;margin: 2px;";
            return b;
        }

        const divBtns = document.createElement("div");

        const btnScraper = genBtn("一键刮Key", scraperKeys);
        divBtns.appendChild(btnScraper);

        const btnGenImg = genBtn("生成截图", genImage);
        divBtns.appendChild(btnGenImg);

        const label = document.createElement("label");
        label.textContent = " 复制为: ";
        label.style.fontSize = "14px";
        divBtns.appendChild(label);

        const btnCopyTxt = genBtn("纯文本", copyTxt);
        divBtns.appendChild(btnCopyTxt);

        const btnCopyCSV = genBtn("CSV", copyCSV);
        divBtns.appendChild(btnCopyCSV);

        const btnCopyMD = genBtn("Markdown", copyMD);
        divBtns.appendChild(btnCopyMD);

        const btnCopyHTML = genBtn("HTML表格", copyHTML);
        divBtns.appendChild(btnCopyHTML);

        const divCnv = document.createElement("div");
        divCnv.style.cssText = "max-height: 200px;overflow: scroll;";
        divCnv.style.display = "none";

        const title = document.querySelector("#hibtext");
        title.appendChild(divBtns);
        title.appendChild(divCnv);

        Object.assign(GObjs, { divCnv });
    }
    function waitLoading() {
        if (document.querySelector("div.key-list h4") != null) {
            clearInterval(GTimer);
            addRemover();
        }
    }
    function addRemover() {
        function genBtn(ele) {
            const b = document.createElement("button");
            b.className = "hb_sc";
            b.addEventListener("click", () => { ele.innerHTML = ""; });
            b.textContent = "×";
            b.title = "隐藏Key(刷新恢复)";
            b.style.cssText = "position: relative;left: -30px;top: -100px;";
            return b;
        }
        const keys = document.querySelectorAll("div.key-list>div");
        if (keys) {
            for (let ele of keys) {
                const btn = genBtn(ele);
                ele.appendChild(btn);
            }
        }
    }
    async function genImage() {
        window.stop();
        show_flash("图片生成中...");
        const Start = new Date().getTime();
        const { divCnv } = GObjs;
        const steam = document.querySelector(".sr-user");
        const helps = document.querySelectorAll("div[class='key-container wrapper']>div>p");
        const btns = document.querySelectorAll("button.hb_sc");
        if (btns || btns.length > 0) {
            if (steam) {
                steam.style.display = "none";
            }
            if (helps) {
                for (const ele of helps) {
                    ele.style.display = "none";
                }
            }
            divCnv.style.display = "";
            const keyArea = document.querySelector("div[class='key-container wrapper']");
            const canvas = await html2canvas(keyArea, {
                imageTimeout: 10,
                logging: false,
            });
            const img = document.createElement("img");
            img.src = canvas.toDataURL("image/png");
            divCnv.innerHTML = "";
            divCnv.appendChild(img);
            if (steam) {
                steam.style.display = "";
            }
            if (helps) {
                for (const help of helps) {
                    help.style.display = "";
                }
            }
            const End = new Date().getTime();
            show_flash(`图片生成完成, 右键图片复制, 耗时 ${End - Start} ms`);
        } else {
            show_flash("Key列表为空?\n或许是卡DOM了, 刷新一下即可。");
        }
    }
    function parseKeys() {
        const data = [];
        const keys = document.querySelectorAll("div.key-list>div");
        if (keys) {
            for (let key of keys) {
                const title = key.querySelector("h4");
                const keyStr = key.querySelector("div.keyfield-value");
                if (title && keyStr) {
                    data.push([title.textContent.trim(), keyStr.textContent]);
                } else {
                    console.log(title, keyStr);
                }
            }
        }
        return data;
    }
    function scraperKeys() {
        const btns = document.querySelectorAll("[class='js-keyfield keyfield  enabled']");
        if (btns) {
            let i = 0;
            let t = setInterval(() => {
                if (i < btns.length) {
                    btns[i++].click();
                } else {
                    clearInterval(t);
                    show_flash("刮开完成, 即将自动刷新");
                    setTimeout(() => {
                        window.location.reload();
                    }, 800);
                }
            }, 1000);
        } else {
            show_flash("没有检测到可刮的Key");
        }
    }
    function copyTxt() {
        const data = parseKeys();
        const list = [];
        for (let [title, key] of data) {
            list.push(`${title}  ${key}`);
        }
        setClipboard(list.join("\n"), "text");
        show_flash("复制成功");
    }
    function copyCSV() {
        const data = parseKeys();
        const list = ["游戏名, Key"];
        for (const [title, key] of data) {
            list.push(`${title}, ${key}`);
        }
        setClipboard(list.join("\n"), "text");
        show_flash("复制成功");
    }
    function copyMD() {
        const data = parseKeys();
        const list = ["| 游戏名 | Key |", "| --- | --- |"];
        for (const [title, key] of data) {
            list.push(`| ${title} | ${key} |`);
        }
        setClipboard(list.join("\n"), "text");
        show_flash("复制成功");
    }
    function copyHTML() {
        const data = parseKeys();
        const tdCss = "style=\"padding:5px 10px;border-top:1px solid;\"";
        const list = [
            "<table style=\"border-collapse:collapse;margin-bottom:0.7em;\">",
            "<tr><th>游戏名</th><th>Key</th></tr>"
        ];
        for (let [title, key] of data) {
            list.push(`<tr><td ${tdCss}>${title}</td><td ${tdCss}>${key}</td></tr>`);
        }
        list.push("</table>");
        setClipboard(list.join("\n"), "html");
        show_flash("复制成功");
    }
    function setClipboard(data, dataType = "text") {
        GM_setClipboard(data, dataType);
    }
})();