Image Search Script

長按滑鼠右鍵，快速呼叫圖片搜尋選單，提供簡潔流暢的使用體驗。
目前為 2024-11-20 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name        Image Search Script
// @namespace   http://tampermonkey.net/
// @version     1.1.2
// @description Quickly access an intuitive and visually pleasing image search menu with a long right-click on any image.
// @description:zh-TW 長按滑鼠右鍵，快速呼叫圖片搜尋選單，提供簡潔流暢的使用體驗。
// @description:zh-CN 长按滑鼠右键，快速呼叫图片搜寻选单，提供简洁流畅的使用体验。
// @author      Pixmi
// @homepage    https://github.com/Pixmi/image-search-script
// @supportURL  https://github.com/Pixmi/image-search-script/issues
// @icon        https://raw.githubusercontent.com/Pixmi/image-search-script/main/icon.svg
// @match       *://*/*
// @require     https://openuserjs.org/src/libs/sizzle/GM_config.js
// @grant       GM_setValue
// @grant       GM_getValue
// @grant       GM_addStyle
// @grant       GM_registerMenuCommand
// @grant       GM_xmlhttpRequest
// @connect     ascii2d.net
// @license     GPL-3.0
// @run-at      document-body
// @noframes
// ==/UserScript==
 
GM_addStyle(`
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
#image-search-menu {
    animation: fadeOut 200ms ease-in-out forwards;
    background-color: rgba(0, 0, 0, .75);
    color: rgb(255, 255, 255);
    display: none;
    flex-direction: column;
    font-size: 16px;
    width: unset;
    min-width: 150px;
    height: unset;
    min-height: unset;
    position: fixed;
    top: unset;
    left: unset;
    z-index: 9999;
}
#image-search-menu.show {
    animation: fadeIn 200ms ease-in-out forwards;
    display: flex;
}
.image-search-option {
    cursor: pointer;
    display: block;
    padding: 5px 10px;
}
.image-search-option + .image-search-option {
    border-top: 1px solid rgba(255, 255, 255, .5);
}
.image-search-option:hover {
    background-color: rgba(255, 255, 255, .3);
}
iframe#image-search-setting {
    width: 350px !important;
    height: 500px !important;
}
`);
 
const searchOptions = new Map([
    {
        label: 'Google Lens',
        key: 'GOOGLE_LENS',
        url: 'https://lens.google.com/uploadbyurl?url=%s'
    }, {
        label: 'SauceNAO',
        key: 'SAUCENAO',
        url: 'https://saucenao.com/search.php?db=999&url=%s'
    }, {
        label: 'Ascii2D',
        key: 'ASCII2D',
        url: ''
    }, {
        label: 'IQDB',
        key: 'IQDB',
        url: 'https://iqdb.org/?url=%s'
    }, {
        label: 'TinEye',
        key: 'TINEYE',
        url: 'https://www.tineye.com/search?url=%s'
    }, {
        label: 'Baidu',
        key: 'BAIDU',
        url: 'https://image.baidu.com/n/pc_search?queryImageUrl=%s'
    }, {
        label: 'Bing',
        key: 'BING',
        url: 'https://www.bing.com/images/searchbyimage?FORM=IRSBIQ&cbir=sbi&imgurl=%s'
    }
].map(item => [item.key, item]));
 
(function () {
    'use strict';
 
    const hoverOpen = {
        enabled: GM_getValue('HOVER_OPEN', false),
        minWidth: GM_getValue('HOVER_OPEN_MIN_WIDTH', 100),
        minHeight: GM_getValue('HOVER_OPEN_MIN_HEIGHT', 100)
    }
 
    const newTab = (url) => {
        const tab = document.createElement('a');
        tab.href = url;
        tab.dispatchEvent(new MouseEvent('click', {ctrlKey: true, metaKey: true}));
    }
 
    const hoverCheck = (event) => {
        const { target, relatedTarget } = event;
        if (target.className == 'image-search-option' && relatedTarget == searchMenu.image) {
            return true;
        }
        if (target.tagName === 'IMG' && target.width >= hoverOpen.minWidth && target.height >= hoverOpen.minHeight) {
            return true;
        }
        return false;
    }
 
    document.addEventListener('mouseover', (event) => {
        if (hoverOpen.enabled) {
            if (hoverCheck(event)) {
                searchMenu.image = event.relatedTarget;
                searchMenu.open(event.target);
            } else {
                searchMenu.clear();
            }
        }
    });
 
    document.addEventListener('mousedown', (event) => {
        searchMenu.holding = false;
        if (event.button === 2 && event.target.nodeName === 'IMG') {
            searchMenu.timer = setTimeout(() => {
                searchMenu.holding = true;
                searchMenu.open(event.target);
            }, 100);
        } else {
            if (event.target !== searchMenu.pane && !event.target.classList.contains('image-search-option')) {
                searchMenu.clear();
            }
        }
    });
 
    document.addEventListener('mouseup', (event) => {
        if (event.button === 2) {
            clearTimeout(searchMenu.timer);
            if (searchMenu.holding) {
                event.preventDefault();
            }
        }
    });
 
    document.addEventListener('contextmenu', (event) => {
        if (searchMenu.holding) {
            event.preventDefault();
        } else {
            searchMenu.clear();
        }
    });
 
    document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'visible') {
            searchMenu.update();
        }
    });
 
    document.addEventListener('scroll', () => { searchMenu.update() });
    window.addEventListener('resize', () => { searchMenu.update() });
 
    class searchMenuController {
        constructor() {
            this.panel = null;
            this.image = null;
            this.holding = false;
            this.timer = null;
            this.init();
        }
 
        init() {
            this.panel = document.createElement('div');
            this.panel.id = 'image-search-menu';
            this.panel.addEventListener('click', (event) => {
                const action = event.target.dataset.action || false;
                if (action) {
                    switch (action) {
                        case 'ASCII2D':
                            GM_xmlhttpRequest({
                                method: 'POST',
                                url: 'https://ascii2d.net/imagesearch/search/',
                                data: JSON.stringify({ uri: this.image.src }),
                                headers: {
                                    'Content-Type': 'application/json',
                                },
                                timeout: 10000,
                                onload: function(response) {
                                    if (response.status == 200) {
                                        newTab(response.finalUrl);
                                    }
                                },
                                onerror: function(error) {
                                    console.error('請求錯誤:', error);
                                },
                                ontimeout: function() {
                                    console.error('請求超時');
                                }
                            });
                            break;
                        default: {
                            const option = searchOptions.get(action) || false;
                            if (!option) break;
                            newTab(option.url.replace('%s', this.image.src));
                            break;
                        }
                    }
                }
                this.clear();
            });
            document.body.append(this.panel);
        }
 
        open(target) {
            if (target.nodeName === 'IMG') {
                while (this.panel.hasChildNodes()) { this.panel.lastChild.remove() };
                for (const [key, option] of searchOptions) {
                    if (!GM_getValue(key, true)) continue;
                    const item = document.createElement('div');
                    item.className = 'image-search-option';
                    item.textContent = option.label;
                    item.dataset.action = key;
                    this.panel.append((item));
                }
                this.image = target;
                this.update();
                this.panel.classList.add('show');
            }
        }
 
        update() {
            if (this.image) {
                const status = {
                    width: this.image.width,
                    left: this.image.x,
                    top: this.image.y
                };
                for (const key of Object.keys(status)) {
                    this.panel.style[key] = `${status[key]}px`;
                };
            }
        }
 
        clear() {
            this.image = null;
            this.panel.classList.remove('show');
            this.panel.style.width = 0;
            this.panel.style.left = 0;
            this.panel.style.top = 0;
        }
    }
 
    const searchMenu = new searchMenuController();
 
    GM_registerMenuCommand('Setting', () => config.open());
 
    const config = new GM_config({
        'id': 'image-search-setting',
        'css': `
            #image-search-setting * {
                box-sizing: border-box;
            }
            #image-search-setting {
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                padding: 10px;
                margin: 0;
            }
            #image-search-setting_wrapper {
                display: flex;
                flex-direction: column;
                height: 100%;
            }
            #image-search-setting_buttons_holder {
                text-align: center;
                margin-top: auto;
            }
            .config_var {
                margin: 5px 0 !important;
            }
            .field_label {
                font-size: 14px !important;
            }
        `,
        'title': 'Image Search Setting',
        'fields': {
            'GOOGLE_LENS': {
                'type': 'checkbox',
                'label': 'Google Lens',
                'section': ['Search Options'],
                'default': true,
            },
            'SAUCENAO': {
                'type': 'checkbox',
                'label': 'SauceNAO',
                'default': true,
            },
            'ASCII2D': {
                'type': 'checkbox',
                'label': 'Ascii2D',
                'default': true,
            },
            'IQDB': {
                'type': 'checkbox',
                'label': 'IQDB',
                'default': true,
            },
            'TINEYE': {
                'type': 'checkbox',
                'label': 'TinEye',
                'default': true,
            },
            'BAIDU': {
                'type': 'checkbox',
                'label': 'Baidu',
                'default': true,
            },
            'BING': {
                'type': 'checkbox',
                'label': 'Bing',
                'default': true,
            },
            'HOVER_OPEN': {
                'type': 'checkbox',
                'label': 'Enabled hover open',
                'section': ['Hover images to open menu'],
                'default': false,
            },
            'HOVER_OPEN_MIN_WIDTH': {
                'label': 'Image min width (px)',
                'type': 'int',
                'default': 100,
            },
            'HOVER_OPEN_MIN_HEIGHT': {
                'label': 'Image min height (px)',
                'type': 'int',
                'default': 100,
            }
        },
        'events': {
            'init': () => {
                for (const [key] of searchOptions) { config.set(key, GM_getValue(key, true)) };
                config.set('HOVER_OPEN', GM_getValue('HOVER_OPEN', false));
                config.set('HOVER_OPEN_MIN_WIDTH', GM_getValue('HOVER_OPEN_MIN_WIDTH', 100));
                config.set('HOVER_OPEN_MIN_HEIGHT', GM_getValue('HOVER_OPEN_MIN_HEIGHT', 100));
            },
            'save': () => {
                for (const [key] of searchOptions) { GM_setValue(key, config.get(key)) };
                GM_setValue('HOVER_OPEN', config.get('HOVER_OPEN'));
                GM_setValue('HOVER_OPEN_MIN_WIDTH', config.get('HOVER_OPEN_MIN_WIDTH'));
                GM_setValue('HOVER_OPEN_MIN_HEIGHT', config.get('HOVER_OPEN_MIN_HEIGHT'));
                hoverOpen.enabled = config.get('HOVER_OPEN');
                hoverOpen.minWidth = config.get('HOVER_OPEN_MIN_WIDTH');
                hoverOpen.minHeight = config.get('HOVER_OPEN_MIN_HEIGHT');
                config.close();
            }
        }
    });
})();