☰

Web按鈕注入

向頁面批量注入按鈕並進行函數綁定

当前为 2025-01-23 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/453745/1525479/Web%E6%8C%89%E9%88%95%E6%B3%A8%E5%85%A5.js 

  1. // ==UserScript==
  2. // @name         Web按鈕注入
  3. // @namespace    
  4. // @version      2.0.0
  5. // @description  向頁面批量注入按鈕並進行函數綁定
  6. // @author       otc
  7. // @match        *
  8. // @license MIT
  9. // ==/UserScript==
  10.  
  11. // 设置容器默认样式
  12. function getDefaultContainerStyles() {
  13.     return {
  14.         position: 'fixed',
  15.         top: '0',
  16.         left: '0',
  17.         display: 'flex',
  18.         flexDirection: 'column',
  19.         justifyContent: 'center',
  20.         alignItems: 'center',
  21.         width: '5px', // 默认宽度
  22.         height: '100%', // 全屏高度
  23.         backgroundColor: 'rgba(0, 0, 0, 0.1)', // 半透明背景
  24.         transition: 'width 0.3s ease', // 动画效果
  25.         overflow: 'hidden', // 隐藏超出部分
  26.         zIndex: 10000,
  27.     };
  28. }
  29.  
  30. // 创建或获取容器
  31. function getOrCreateButtonContainer() {
  32.     let container = document.querySelector('.ocr-buttons-container');
  33.     if (!container) {
  34.         container = document.createElement('div');
  35.         container.className = 'ocr-buttons-container';
  36.  
  37.         // 应用默认样式
  38.         const styles = getDefaultContainerStyles();
  39.         for (const [key, value] of Object.entries(styles)) {
  40.             container.style[key] = value;
  41.         }
  42.  
  43.         // 创建删除按钮
  44.         const deleteButton = document.createElement('button');
  45.         deleteButton.className = 'delete-button';
  46.         deleteButton.innerHTML = '<span class="button-text">×</span>'; // 使用 span 包裹文字
  47.         deleteButton.style.position = 'absolute';
  48.         deleteButton.style.top = '10px';
  49.         deleteButton.style.right = '-30px'; // 初始位置在容器外
  50.         deleteButton.style.padding = '5px 10px';
  51.         deleteButton.style.fontSize = '14px';
  52.         deleteButton.style.border = 'none';
  53.         // deleteButton.style.background = 'rgba(255, 255, 255, 0.8)';
  54.         deleteButton.style.background = 'rgba(222, 55, 48, 0.8)';
  55.         
  56.         deleteButton.style.color = '#fff';
  57.         deleteButton.style.borderRadius = '5px';
  58.         deleteButton.style.cursor = 'pointer';
  59.         deleteButton.style.transition = 'right 0.3s ease';
  60.  
  61.         deleteButton.addEventListener('click', () => {
  62.             container.remove(); // 删除整个容器
  63.         });
  64.  
  65.         container.appendChild(deleteButton);
  66.  
  67.         // 鼠标悬停事件
  68.         container.addEventListener('mouseenter', () => {
  69.             container.style.width = '150px'; // 展开宽度
  70.             deleteButton.style.right = '10px'; // 显示删除按钮
  71.             container.querySelectorAll('.button-text').forEach(text => {
  72.                 text.style.opacity = 1; // 显示文字
  73.             });
  74.             clearTimeout(container.hideTimeout); // 清除之前的定时器
  75.         });
  76.  
  77.         // 鼠标移出事件
  78.         container.addEventListener('mouseleave', () => {
  79.             container.hideTimeout = setTimeout(() => {
  80.                 container.style.width = '5px'; // 收起宽度
  81.                 deleteButton.style.right = '-30px'; // 隐藏删除按钮
  82.                 container.querySelectorAll('.button-text').forEach(text => {
  83.                     text.style.opacity = 0; // 隐藏文字
  84.                 });
  85.             }, 1000); // 1秒后收起
  86.         });
  87.  
  88.         document.body.appendChild(container);
  89.     }
  90.     return container;
  91. }
  92.  
  93. // 创建按钮
  94. function createButtons(buttons) {
  95.     const container = getOrCreateButtonContainer();
  96.  
  97.     buttons.forEach((button, index) => {
  98.         const buttonElement = document.createElement('button');
  99.         buttonElement.innerHTML = `<span class="button-text">${button.name}</span>`; // 使用 span 包裹文字
  100.         buttonElement.style.margin = '2px 0';
  101.         buttonElement.style.width = '140px';
  102.         buttonElement.style.border = 'none';
  103.         buttonElement.style.background = '#007bff';
  104.         buttonElement.style.color = '#fff';
  105.         buttonElement.style.borderRadius = '4px';
  106.         buttonElement.style.fontSize = '14px';
  107.         buttonElement.style.cursor = 'pointer';
  108.         buttonElement.style.transition = 'background 0.2s ease';
  109.  
  110.         // 隐藏文字的样式
  111.         const buttonText = buttonElement.querySelector('.button-text');
  112.         buttonText.style.opacity = 0; // 默认隐藏文字
  113.         buttonText.style.transition = 'opacity 0.3s ease';
  114.  
  115.         buttonElement.addEventListener('mouseover', () => {
  116.             buttonElement.style.background = '#0056b3';
  117.         });
  118.         buttonElement.addEventListener('mouseout', () => {
  119.             buttonElement.style.background = '#007bff';
  120.         });
  121.  
  122.         buttonElement.addEventListener('click', button.func);
  123.  
  124.         container.appendChild(buttonElement);
  125.     });
  126. }
  127.  
  128. // #region例子：
  129. // function funca (){
  130. //   console.log("funca");
  131. // }
  132. // function funcb (){
  133. //   console.log("funcb");
  134. // }
  135.   
  136. // // 调用 createButtons 函数创建按钮，传入一个包含函数和按钮名的列表  
  137. // const buttons = [  
  138. //   { name: 'funca', func: funca },  
  139. //   { name: 'funcb', func: funcb }  
  140. // ];  
  141. // createButtons(buttons);
  142. // #endregion