向頁面批量注入按鈕並進行函數綁定
Per
Dit script moet niet direct worden geïnstalleerd - het is een bibliotheek voor andere scripts om op te nemen met de meta-richtlijn // @require https://update.greasyfork.org/scripts/453745/1525479/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(255, 255, 255, 0.8)';
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', () => {
container.style.width = '150px'; // 展开宽度
deleteButton.style.right = '10px'; // 显示删除按钮
container.querySelectorAll('.button-text').forEach(text => {
text.style.opacity = 1; // 显示文字
});
clearTimeout(container.hideTimeout); // 清除之前的定时器
});
// 鼠标移出事件
container.addEventListener('mouseleave', () => {
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