☰

查找图片

查找图片哦

// ==UserScript==
// @name         查找图片
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  查找图片哦
// @author       Chengguan
// @match        https://*.huaban.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=huaban.com
// @grant        GM_registerMenuCommand
// @run-at       document-body
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    var styleEle = document.createElement('style');
    styleEle.innerText = `
        .hb-img {outline: #F007 dashed 5px; outline-offset: -5px;}

        .hb-imgTip { position: absolute; z-index: 999999; opacity: 0.8; color: #F00; background-color: #FFF; word-break: break-all; padding: 4px;}
        .hb-imgTip:hover { z-index: 9999999999; opacity: 1;}

        .hb-container { position: fixed; top: 50px; left: 50px; width: 200px; background-color: #FFF; z-index: 99999999999; padding: 20px 10px; text-align: center; border: 1px solid #CCC; border-radius: 5px; }
        .hb-container input { padding: 5px;}
    `;
    document.head.appendChild(styleEle);

    let allTips = [];
    let allImages = [];


    function mark(reg = /./) {
        allTips.forEach(tip => tip.remove());
        allImages.forEach(img => img.classList.remove('hb-img'));

        allTips = [];
        allImages = [];

        [...document.getElementsByTagName('img')].forEach(img => {
            if (reg.test(img.src)) {
                img.classList.add('hb-img');
                const tip = createImgTip(img);
                document.scrollingElement.appendChild(tip);

                allTips.push(tip);
                allImages.push(img);
            }
        });
    }

    function createImgTip(img) {
        var tip = document.createElement('p');
        tip.innerText = /^data:image/.test(img.src) ? 'data:image/ xxxx' : img.src;
        tip.className = 'hb-imgTip';
        tip.style.top = img.getBoundingClientRect().top + document.scrollingElement.scrollTop + 'px';
        tip.style.left = img.getBoundingClientRect().left + document.scrollingElement.scrollLeft + 'px';
        tip.style.maxWidth = Math.max(img.getBoundingClientRect().width, 200) + 'px';
        return tip;
    }


    GM_registerMenuCommand('查找图片', () => {
        // 容器
        var container = document.createElement('div');
        container.className = 'hb-container';
        document.body.appendChild(container);

        var input = document.createElement('input');
        input.addEventListener('input', e => {
            try {
                const reg = new RegExp(e.target.value);
                mark(reg);
                sum.innerText = allImages.length;
            } catch(e) {
                // nothing;
            }
        });
        container.appendChild(input);

        var sum = document.createElement('h2');
        container.appendChild(sum);

        container.addEventListener('click', () => {
             try {
                const reg = new RegExp(input.value);
                mark(reg);
                sum.innerText = allImages.length;
            } catch(e) {
                // nothing;
            }
            sum.innerText = allImages.length;
        });

        mark();
        sum.innerText = allImages.length;
    }, 's');

})();