☰

抖音小红书快捷主页搜索

Add a compact Douyin search button that expands on hover

// ==UserScript==
// @name         抖音小红书快捷主页搜索
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Add a compact Douyin search button that expands on hover
// @author       八千xmx
// @match        *://*/*
// @grant        GM_openInTab
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    // Create the container for the input boxes and buttons
    const container = document.createElement('div');
    container.style.position = 'fixed';
    container.style.bottom = '15px';
    container.style.right = '15px';
    container.style.backgroundColor = '#f0f0f0';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '8px';
    container.style.boxShadow = '0 3px 5px rgba(0, 0, 0, 0.1)';
    container.style.width = '20px';
    container.style.height = '20px';
    container.style.padding = '0';
    container.style.zIndex = '9999';
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.fontSize = '13px';
    container.style.transition = 'width 0.3s ease, height 0.3s ease, padding 0.3s ease';
    container.style.overflow = 'hidden';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.justifyContent = 'center';

    // Function to create input and button pair
    function createSearchBox(placeholder, buttonLabel, searchUrl) {
        const wrapper = document.createElement('div');
        wrapper.style.display = 'flex';
        wrapper.style.alignItems = 'center';
        wrapper.style.marginBottom = '5px';

        const input = document.createElement('input');
        input.type = 'text';
        input.placeholder = placeholder;
        input.style.flex = '1';
        input.style.padding = '6px';
        input.style.border = '1px solid #ccc';
        input.style.borderRadius = '4px';
        input.style.fontSize = '13px';
        input.style.boxShadow = 'inset 0 1px 2px rgba(0, 0, 0, 0.1)';
        input.style.opacity = '0';
        input.style.transition = 'opacity 0.3s ease';
        input.style.marginRight = '5px';

        const button = document.createElement('button');
        button.textContent = buttonLabel;
        button.style.padding = '0 6px';
        button.style.backgroundColor = '#007bff';
        button.style.color = '#fff';
        button.style.border = 'none';
        button.style.borderRadius = '4px';
        button.style.cursor = 'pointer';
        button.style.fontSize = '13px';
        button.style.transition = 'background-color 0.3s ease';

        // Add event listener for pressing Enter key
        input.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                searchAction(input, searchUrl);
            }
        });

        // Add event listener for button click
        button.addEventListener('click', () => {
            searchAction(input, searchUrl);
        });

        wrapper.appendChild(input);
        wrapper.appendChild(button);

        return { wrapper, input };
    }

    // Search action function
    function searchAction(input, urlTemplate) {
        const query = encodeURIComponent(input.value);
        if (query) {
            const url = urlTemplate.replace('搜索内容', query);
            GM_openInTab(url, { active: true });
        }
    }

    // Create Douyin search box
    const douyinSearch = createSearchBox('输入抖音用户名', '抖音', 'https://www.douyin.com/search/搜索内容?type=user');

    // Create Xiaohongshu search box
    const xiaohongshuSearch = createSearchBox('输入小红书关键词', '小红书', 'https://www.xiaohongshu.com/search_result?keyword=搜索内容');

    // Track if the input boxes are focused
    let isInputFocused = false;

    // Add hover effects to the container
    container.addEventListener('mouseenter', () => {
        container.style.width = '200px';
        container.style.height = 'auto';
        container.style.padding = '10px';
        douyinSearch.input.style.opacity = '1';
        xiaohongshuSearch.input.style.opacity = '1';
    });

    container.addEventListener('mouseleave', () => {
        if (!isInputFocused) {
            container.style.width = '20px';
            container.style.height = '20px';
            container.style.padding = '0';
            douyinSearch.input.style.opacity = '0';
            xiaohongshuSearch.input.style.opacity = '0';
        }
    });

    // Handle focus and blur for both inputs
    function handleFocusBlur(input) {
        input.addEventListener('focus', () => {
            isInputFocused = true;
            container.style.width = '200px';
            container.style.height = 'auto';
            container.style.padding = '10px';
            input.style.opacity = '1';
        });

        input.addEventListener('blur', () => {
            isInputFocused = false;
            container.style.width = '20px';
            container.style.height = '20px';
            container.style.padding = '0';
            input.style.opacity = '0';
        });
    }

    handleFocusBlur(douyinSearch.input);
    handleFocusBlur(xiaohongshuSearch.input);

    // Append the search boxes to the container
    container.appendChild(douyinSearch.wrapper);
    container.appendChild(xiaohongshuSearch.wrapper);

    // Append the container to the body
    document.body.appendChild(container);
})();