// ==UserScript== // @name 网页转二维码 // @namespace http://tampermonkey.net/ // @match *://*/* // @grant GM_registerMenuCommand // @grant GM_addStyle // @grant GM_setClipboard // @version 2.0 // @license MIT // @author BergerLee // @description 优美地展示网页二维码,供手机扫描,并支持一键复制链接,UI 风格仿苹果。 // @downloadURL none // ==/UserScript== (function () { 'use strict'; GM_addStyle(` /* 弹窗容器:浮动在页面中央,使用柔和阴影和圆角 */ .apple-qr-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); width: 340px; /* 适当的宽度 */ padding: 24px; background: rgba(45, 45, 45, 0.85); /* 半透明深色背景 */ backdrop-filter: blur(20px); /* 核心:毛玻璃效果 */ border-radius: 20px; /* 大圆角 */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.15); z-index: 99999; opacity: 0; /* 初始隐藏 */ visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #f0f0f0; /* 浅色文字 */ text-align: center; } /* 弹窗显示时的状态 */ .apple-qr-dialog.visible { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } /* 弹窗标题 */ .apple-qr-dialog h3 { margin: 0 0 12px 0; font-size: 18px; font-weight: 600; letter-spacing: -0.5px; color: #ffffff; } /* 二维码容器 */ .apple-qr-container { width: 200px; height: 200px; margin: 0 auto 16px; padding: 8px; /* 留白 */ background: #ffffff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .apple-qr-container canvas { display: block; width: 100%; height: 100%; border-radius: 8px; /* 二维码内部圆角 */ } /* URL显示与复制部分 */ .apple-qr-url-box { display: flex; align-items: center; background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 8px 12px; margin-bottom: 16px; overflow: hidden; white-space: nowrap; } .apple-qr-url { flex-grow: 1; font-size: 13px; color: #d0d0d0; overflow: hidden; text-overflow: ellipsis; /* 超出部分显示省略号 */ cursor: pointer; } .apple-qr-copy-btn { background: none; border: none; color: #b0b0b0; cursor: pointer; font-size: 14px; padding: 0; transition: color 0.2s ease; } .apple-qr-copy-btn:hover { color: #ffffff; } /* 关闭按钮 */ .apple-qr-close-btn { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #f0f0f0; font-size: 16px; line-height: 1; transition: background-color 0.2s ease; } .apple-qr-close-btn:hover { background: rgba(255, 255, 255, 0.2); } /* 底部信息 */ .apple-qr-footer { font-size: 11px; color: #a0a0a0; margin-top: 10px; } .apple-qr-footer a { color: #b0b0b0; text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .apple-qr-footer a:hover { color: #ffffff; } `); const qriousScript = document.createElement('script'); qriousScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js'; qriousScript.onload = () => { init(); }; document.head.appendChild(qriousScript); function init() { // 注册 Tampermonkey 菜单命令,显示当前系统的快捷键 GM_registerMenuCommand(`✨ 生成二维码 (Ctrl + M)`, () => showQRDialog(location.href)); // 注册快捷键监听器 window.addEventListener('keydown', (event) => { // 根据操作系统判断正确的修饰键和字符键 const modifierKey = event.ctrlKey; const targetKey = 'm'; // 统一使用小写,keydown事件不区分大小写 if (modifierKey && event.key === targetKey) { event.preventDefault(); showQRDialog(location.href); } }); } /** * 显示 Apple 风格的二维码弹窗 * @param {string} url - 需要生成二维码的 URL */ function showQRDialog(url) { // 如果弹窗已存在,则直接返回 if (document.getElementById('apple-qr-dialog')) { return; } // 创建弹窗容器 const dialog = document.createElement('div'); dialog.id = 'apple-qr-dialog'; dialog.className = 'apple-qr-dialog'; // 弹窗内容 HTML dialog.innerHTML = `