SideBarButtonLibrary

Web按鈕注入

向頁面批量注入按鈕並進行函數綁定
目前為 2025-01-23 提交的版本，檢視最新版本。
此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/453745/1525494/Web%E6%8C%89%E9%88%95%E6%B3%A8%E5%85%A5.js
發表問題、評論、或檢舉該腳本。
換行
// ==UserScript==
// @name         Web按鈕注入
// @namespace    
// @version      2.0.0
// @description  向頁面批量注入按鈕並進行函數綁定
// @author       otc
// @match        *
// @license MIT
// ==/UserScript==

// 设置容器默认样式
function getDefaultContainerStyles() {
    return {
        position: 'fixed',
        top: '0',
        left: '0',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        width: '5px', // 默认宽度
        height: '100%', // 全屏高度
        backgroundColor: 'rgba(0, 0, 0, 0.1)', // 半透明背景
        transition: 'width 0.3s ease', // 动画效果
        overflow: 'hidden', // 隐藏超出部分
        zIndex: 10000,
    };
}

// 创建或获取容器
function getOrCreateButtonContainer() {
    let container = document.querySelector('.ocr-buttons-container');
    if (!container) {
        container = document.createElement('div');
        container.className = 'ocr-buttons-container';

        // 应用默认样式
        const styles = getDefaultContainerStyles();
        for (const [key, value] of Object.entries(styles)) {
            container.style[key] = value;
        }

        // 创建删除按钮
        const deleteButton = document.createElement('button');
        deleteButton.className = 'delete-button';
        deleteButton.innerHTML = '<span class="button-text">×</span>'; // 使用 span 包裹文字
        deleteButton.style.position = 'absolute';
        deleteButton.style.top = '10px';
        deleteButton.style.right = '-30px'; // 初始位置在容器外
        deleteButton.style.padding = '5px 10px';
        deleteButton.style.fontSize = '14px';
        deleteButton.style.border = 'none';
        deleteButton.style.background = 'rgba(222, 55, 48, 0.8)';
        deleteButton.style.color = '#fff';
        deleteButton.style.borderRadius = '5px';
        deleteButton.style.cursor = 'pointer';
        deleteButton.style.transition = 'right 0.3s ease';

        deleteButton.addEventListener('click', () => {
            container.remove(); // 删除整个容器
        });

        container.appendChild(deleteButton);

        // 鼠标悬停事件
        container.addEventListener('mouseenter', () => {
            // 清除之前的延时展开定时器
            clearTimeout(container.expandTimeout);

            // 设置延时展开
            container.expandTimeout = setTimeout(() => {
                container.style.width = '150px'; // 展开宽度
                deleteButton.style.right = '10px'; // 显示删除按钮
                container.querySelectorAll('.button-text').forEach(text => {
                    text.style.opacity = 1; // 显示文字
                });
                clearTimeout(container.hideTimeout); // 清除之前的定时器
            }, 200); // 悬停200毫秒后展开
        });

        // 鼠标移出事件
        container.addEventListener('mouseleave', () => {
            // 清除延时展开定时器
            clearTimeout(container.expandTimeout);

            container.hideTimeout = setTimeout(() => {
                container.style.width = '5px'; // 收起宽度
                deleteButton.style.right = '-30px'; // 隐藏删除按钮
                container.querySelectorAll('.button-text').forEach(text => {
                    text.style.opacity = 0; // 隐藏文字
                });
            }, 1000); // 1秒后收起
        });

        document.body.appendChild(container);
    }
    return container;
}

// 创建按钮
function createButtons(buttons) {
    const container = getOrCreateButtonContainer();

    buttons.forEach((button, index) => {
        const buttonElement = document.createElement('button');
        buttonElement.innerHTML = `<span class="button-text">${button.name}</span>`; // 使用 span 包裹文字
        buttonElement.style.margin = '2px 0';
        buttonElement.style.width = '140px';
        buttonElement.style.border = 'none';
        buttonElement.style.background = '#007bff';
        buttonElement.style.color = '#fff';
        buttonElement.style.borderRadius = '4px';
        buttonElement.style.fontSize = '14px';
        buttonElement.style.cursor = 'pointer';
        buttonElement.style.transition = 'background 0.2s ease';

        // 隐藏文字的样式
        const buttonText = buttonElement.querySelector('.button-text');
        buttonText.style.opacity = 0; // 默认隐藏文字
        buttonText.style.transition = 'opacity 0.3s ease';

        buttonElement.addEventListener('mouseover', () => {
            buttonElement.style.background = '#0056b3';
        });
        buttonElement.addEventListener('mouseout', () => {
            buttonElement.style.background = '#007bff';
        });

        buttonElement.addEventListener('click', button.func);

        container.appendChild(buttonElement);
    });
}

// #region例子：
// function funca (){
//   console.log("funca");
// }
// function funcb (){
//   console.log("funcb");
// }
  
// // 调用 createButtons 函数创建按钮，传入一个包含函数和按钮名的列表  
// const buttons = [  
//   { name: 'funca', func: funca },  
//   { name: 'funcb', func: funcb }  
// ];  
// createButtons(buttons);
// #endregion