右侧可展开/收起的侧边栏组件

在网页右侧显示一个可展开/收起的侧边栏组件，包含加密和解密功能。
当前为 2025-01-18 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         右侧可展开/收起的侧边栏组件
// @namespace    https://bgm.tv
// @version      0.1
// @description  在网页右侧显示一个可展开/收起的侧边栏组件，包含加密和解密功能。
// @author       Rin
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // 创建侧边栏容器
    const sidebar = document.createElement('div');
    sidebar.id = 'custom-sidebar';
    sidebar.style.position = 'fixed';
    sidebar.style.top = '50%';
    sidebar.style.right = '-200px'; // 初始隐藏位置
    sidebar.style.transform = 'translateY(-50%)';
    sidebar.style.width = '200px';
    sidebar.style.height = 'auto';
    sidebar.style.backgroundColor = '#333';
    sidebar.style.color = '#fff';
    sidebar.style.padding = '20px';
    sidebar.style.boxShadow = '-2px 0 5px rgba(0,0,0,0.5)';
    sidebar.style.transition = 'right 0.3s ease-in-out';
    sidebar.style.zIndex = '9999';

    // 添加点击事件监听器以切换侧边栏状态
    let isSidebarOpen = false;
    sidebar.addEventListener('click', () => {
        if (!isSidebarOpen) {
            sidebar.style.right = '0';
        } else {
            sidebar.style.right = '-200px';
        }
        isSidebarOpen = !isSidebarOpen;
    });

    // 创建面板内容
    const panel = document.createElement('div');
    panel.style.textAlign = 'center';

    const inputField = document.createElement('input');
    inputField.type = 'text';
    inputField.placeholder = '输入数据';
    inputField.style.width = '160px';
    inputField.style.height = '30px';
    inputField.style.marginBottom = '10px';
    inputField.style.padding = '5px';
    inputField.style.border = '1px solid #555';
    inputField.style.backgroundColor = '#444';
    inputField.style.color = '#fff';

    const encryptButton = document.createElement('button');
    encryptButton.textContent = '加密';
    encryptButton.style.width = '75px';
    encryptButton.style.height = '30px';
    encryptButton.style.marginRight = '10px';
    encryptButton.style.cursor = 'pointer';
    encryptButton.style.border = 'none';
    encryptButton.style.backgroundColor = '#555';
    encryptButton.style.color = '#fff';
    encryptButton.addEventListener('click', () => {
        const encryptedData = encrypt(inputField.value);
        inputField.value = encryptedData;
    });

    const decryptButton = document.createElement('button');
    decryptButton.textContent = '解密';
    decryptButton.style.width = '75px';
    decryptButton.style.height = '30px';
    decryptButton.style.cursor = 'pointer';
    decryptButton.style.border = 'none';
    decryptButton.style.backgroundColor = '#555';
    decryptButton.style.color = '#fff';
    decryptButton.addEventListener('click', () => {
        const decryptedData = decrypt(inputField.value);
        inputField.value = decryptedData;
    });

    panel.appendChild(inputField);
    panel.appendChild(encryptButton);
    panel.appendChild(decryptButton);

    sidebar.appendChild(panel);

    // 将侧边栏添加到body中
    document.body.appendChild(sidebar);

    // 假设已经实现了加密和解密方法
    function encrypt(data) {
        // 这里应该是实际的加密逻辑
        return data; // 返回示例
    }

    function decrypt(data) {
        // 这里应该是实际的解密逻辑
        return data; // 返回示例
    }
})();