Button Info Display with MutationObserver
// ==UserScript==
// @name Button Info Display with MutationObserver
// @namespace http://tampermonkey.net/
// @version 0.2
// @description Show button title and class in a draggable floating window using MutationObserver
// @author You
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 确保页面加载完成后执行
window.addEventListener('load', function() {
// 创建悬浮窗
const floatingWindow = document.createElement('div');
floatingWindow.id = 'button-info-display';
floatingWindow.style.cssText = `
position: fixed;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background: #ADD8E6;
border: 1px solid #000;
padding: 10px;
overflow: auto;
z-index: 10000;
display: none;
`;
document.body.appendChild(floatingWindow);
// 创建标题栏
const titleBar = document.createElement('div');
titleBar.style.cssText = `
background: #000;
color: #fff;
padding: 5px;
cursor: move;
`;
titleBar.textContent = 'Button Info Logger';
floatingWindow.appendChild(titleBar);
// 使标题栏可拖动
let isDragging = false;
let offsetX, offsetY;
titleBar.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - titleBar.getBoundingClientRect().left;
offsetY = e.clientY - titleBar.getBoundingClientRect().top;
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
floatingWindow.style.left = (e.clientX - offsetX) + 'px';
floatingWindow.style.top = (e.clientY - offsetY) + 'px';
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
// 创建一个按钮来控制悬浮窗的显示和隐藏
const toggleButton = document.createElement('button');
toggleButton.textContent = 'Toggle Button Info';
toggleButton.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
z-index: 10001;
`;
toggleButton.addEventListener('click', () => {
floatingWindow.style.display = floatingWindow.style.display === 'none' ? 'block' : 'none';
});
document.body.appendChild(toggleButton);
// 使用MutationObserver来监听按钮的添加
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.tagName === 'BUTTON') {
node.addEventListener('click', function() {
const title = this.getAttribute('title') || 'No title';
const className = this.getAttribute('class') || 'No class';
const info = `按钮标题：${title}\n按钮类名：${className}`;
const infoElement = document.createElement('p');
infoElement.textContent = info;
floatingWindow.appendChild(infoElement);
console.log(info); // 调试信息
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
});
})();