在任何页面上生成文本或当前URL的二维码，支持快捷键 Ctrl+Q 打开窗口
// ==UserScript==
// @name 二维码生成器
// @namespace http://tampermonkey.net/
// @version 1.5.1
// @description 在任何页面上生成文本或当前URL的二维码，支持快捷键 Ctrl+Q 打开窗口
// @author wll
// @match *://*/*
// @grant GM_registerMenuCommand
// @grant GM_addStyle
// @license AGPL-3.0-or-later
// ==/UserScript==
(function() {
'use strict';
// 引入qrcode.min.js库
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/qrcode.min.js';
document.head.appendChild(script);
// 添加样式
GM_addStyle(`
#qr-generator-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border: 1px solid #ccc;
padding: 40px;
z-index: 1000000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
max-width: 360px;
width: 100%;
text-align: center;
}
#qr-generator-buttons {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 10px;
}
#qr-generator-modal textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
}
#qr-close-button {
position: absolute;
top: 8px;
right: 8px;
background: none;
border: none;
font-size: 16px;
cursor: pointer;
}
#qr-code {
display: flex;
justify-content: center;
margin-top: 10px;
}
.qr-button {
background-color: #007BFF;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}
.qr-button:hover {
background-color: #0056b3;
}
#qr-error-message {
color: red;
margin-top: 10px;
display: none;
}
`);
// 添加菜单项
GM_registerMenuCommand("打开生成器", openQRCodeGenerator);
// 添加快捷键监听器
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.key === 'q') {
// 阻止默认的打印行为
event.preventDefault();
openQRCodeGenerator();
}
});
// 创建模态窗口
function openQRCodeGenerator() {
// 检查是否已经有模态窗口
if (document.getElementById('qr-generator-modal')) {
return;
}
// 创建模态窗口
const modal = document.createElement('div');
modal.id = 'qr-generator-modal';
modal.innerHTML = `
<button id="qr-close-button">×</button>
<h1>二维码生成器</h1><br/>
<textarea id="qr-text-input" placeholder="输入文本"></textarea><br/>
<div id="qr-generator-buttons">
<button id="qr-generate-button" class="qr-button">快速生成</button>
<button id="qr-reset-button" class="qr-button">重置</button>
<button id="qr-url-button" class="qr-button">网址转码</button>
</div><br/>
<div id="qr-error-message">请输入文本内容</div>
<div id="qr-code"></div>
`;
document.body.appendChild(modal);
// 绑定事件
document.getElementById('qr-generate-button').addEventListener('click', generateQRCode);
document.getElementById('qr-reset-button').addEventListener('click', resetFields);
document.getElementById('qr-url-button').addEventListener('click', generateURLQRCode);
document.getElementById('qr-close-button').addEventListener('click', () => modal.remove());
// 自动获取输入焦点
document.getElementById('qr-text-input').focus();
}
// 生成二维码信息
function generateQRCode() {
const inputText = document.getElementById("qr-text-input").value;
const errorMessage = document.getElementById("qr-error-message");
const qrcodeContainer = document.getElementById("qr-code");
if (!inputText.trim()) {
// 显示错误消息
errorMessage.style.display = "block";
// 自动获取输入焦点
document.getElementById('qr-text-input').focus();
return;
}
// 隐藏错误消息
errorMessage.style.display = "none";
// 清空之前的二维码
qrcodeContainer.innerHTML = "";
new QRCode(qrcodeContainer, {
text: inputText,
width: 256,
height: 256
});
}
// 重置生成信息
function resetFields() {
// 清空文本域
document.getElementById("qr-text-input").value = "";
// 清空二维码
document.getElementById("qr-code").innerHTML = "";
// 隐藏错误消息
document.getElementById("qr-error-message").style.display = "none";
// 自动获取输入焦点
document.getElementById('qr-text-input').focus();
}
// 将当前网址URL转换成二维码
function generateURLQRCode() {
const currentURL = window.location.href;
// 清空之前的二维码
const qrcodeContainer = document.getElementById("qr-code");
qrcodeContainer.innerHTML = "";
new QRCode(qrcodeContainer, {
text: currentURL,
width: 256,
height: 256
});
}
})();