油猴 Tampermonkey，复制local storage脚本

 

// ==UserScript==
// @name LocalStorage Table with Copy Function
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 创建一个按钮,点击按钮显示包含 localStorage的表格，为每个值添加复制按钮
// @author Your Name
// @match *://xxxx.com/*
// @match *://xxxx.cn/*
// @match *://*.xxxx.com/*
// @match *://*.xxxx.cn/*
// @match *://192.xx.xx.xx:8080/*
// @grant none
// ==/UserScript==

(function() {
'use strict';
let modal = null; // 定义全局变量来存储模态框

function showLocalStorageTable() {
    // 如果已表格，先关闭它
    if (modal) {
        document.body.removeChild(modal);
        modal = null;
        return; // 退出
    }

    modal = document.createElement('div');
    const buttonRect = button.getBoundingClientRect(); // 获取按钮的位置

    modal.style.position = 'fixed';
    modal.style.top = `${buttonRect.top}px`;
    modal.style.left = `${buttonRect.right + 10}px`; // 在按钮右侧添加间距
    modal.style.padding = '10px 20px';
    modal.style.zIndex = '1001';
    modal.style.backgroundColor = 'white';
    modal.style.padding = '15px';
    modal.style.overflowY = 'auto';
    modal.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)';
    modal.style.maxWidth = '30%'; // 设置为页面宽度的30%
    modal.style.width = 'auto';  // 自动调整宽度以适应内容

    const container = document.createElement('div');
    container.style.position = 'relative'; // 为了定位关闭按钮
    container.style.maxWidth = '100%'; // 确保表格宽度不超出容器

    const table = document.createElement('table');
    table.style.width = '100%';
    table.style.borderCollapse = 'collapse';
    table.style.overflow = 'hidden';
    table.style.tableLayout = 'fixed'; // 强制固定布局

    // 添加表头
    const header = document.createElement('tr');
    header.innerHTML = '<th style="border: 1px solid black; width: 30%;">键</th><th style="border: 1px solid black; width: 60%;">值</th><th style="border: 1px solid black; width: 10%;">操作</th>';
    table.appendChild(header);

    // 添加表格行
    Object.keys(localStorage).forEach((key, index) => {
        const row = document.createElement('tr');
        row.style.backgroundColor = index % 2 === 0 ? '#f9f9f9' : '#ffffff'; // 隔行换色
        row.innerHTML = `
        <td style="border: 1px solid black; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${key}</td>
        <td style="border: 1px solid black; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${localStorage.getItem(key)}</td>
        <td style="border: 1px solid black; text-align: center;">
            <div style="display: inline-block; padding: 2px 6px; background-color: #cecece; color: black; cursor: pointer;border-radius: 4px; font-size: 12px; user-select: none; ">复制</div>
        </td>
        `;
        table.appendChild(row);
    });
    container.appendChild(table);

    // 添加关闭按钮
    const closeButton = document.createElement('div');
    closeButton.textContent = '×'; // 使用字符 "×" 作为关闭按钮文本
    closeButton.style.position = 'absolute';
    closeButton.style.top = '-15px';
    closeButton.style.right = '-15px';
    closeButton.style.width = '20px'; // 较小的宽度
    closeButton.style.height = '20px'; // 较小的高度
    closeButton.style.fontSize = '14px'; // 较小的字体大小
    closeButton.style.lineHeight = '20px'; // 使文本垂直居中
    closeButton.style.borderRadius = '50%'; // 圆形
    closeButton.style.textAlign = 'center'; // 文本居中
    closeButton.style.cursor = 'pointer'; // 鼠标悬停时显示指针
    closeButton.style.userSelect = 'none'; // 禁用文本选择
    closeButton.addEventListener('click', () => {
        document.body.removeChild(modal);
        modal = null;
        document.removeEventListener('click', outsideClickListener);
    });
    container.appendChild(closeButton);

    modal.appendChild(container);
    document.body.appendChild(modal);

    // 复制到剪贴板的功能
    function copyToClipboard(key) {
        const value = localStorage.getItem(key);
        const textarea = document.createElement('textarea');
        textarea.value = value;
        document.body.appendChild(textarea);
        textarea.select();

        try {
            // 尝试执行复制操作
            const success = document.execCommand('copy');
            if (success) {
                alert(`已复制: ${value}`);
            } else {
                alert('复制失败');
            }
        } catch (error) {
            alert.error('复制失败:', error);
        }
        document.body.removeChild(textarea);
//        navigator.clipboard.writeText(value).then(() => {  // 有的网站隐私设置，不允许使用剪切板，所有换上面的方式
  //          alert(`已复制: ${value}`);
 //       }, (err) => {
  //          alert('复制失败!');
  //      });
    }

    // 添加复制按钮的点击事件
    Array.from(document.querySelectorAll('div[style*="background-color: #cecece;"]')).forEach((div, index) => {
        div.addEventListener('click', () => {
            const key = Object.keys(localStorage)[index];
            copyToClipboard(key);
        });
    });

    // 点击表格外部区域关闭表格
    function outsideClickListener(event) {
        if (!modal.contains(event.target) && event.target !== button) {
            document.body.removeChild(modal);
            modal = null;
            document.removeEventListener('click', outsideClickListener);
        }
    }
    document.addEventListener('click', outsideClickListener);
}

// 创建并添加显示表格的按钮
const button = document.createElement('button');
button.textContent = '显示 LocalStorage';
button.style.position = 'fixed';
button.style.top = '8px';
button.style.left = '8px';
button.style.zIndex = '1000';
button.style.borderRadius = '10px';
button.style.padding = '6px 10px';
button.style.fontSize = '14px'; // 调整按钮字体大小
button.style.opacity = '0.6';

button.addEventListener('click', showLocalStorageTable);

document.body.appendChild(button);
})();