Gera um QR code da página atual e permite o download e compartilhamento, com um design centralizado e elegante.
当前为
// ==UserScript==
// @name BF QRcode
// @name:pt-BR BF QRcode - Gerador de QR Code
// @namespace https://github.com/BrunoFortunatto
// @version 1.5
// @description Gera um QR code da página atual e permite o download e compartilhamento, com um design centralizado e elegante.
// @description:pt-BR Gera um QR code da página atual e permite o download e compartilhamento (versão mobile)
// @author Bruno Fortunato
// @license MIT
// @match *://*/*
// @grant GM_registerMenuCommand
// @require https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js
// ==/UserScript==
// Adiciona o botão ao menu do Tampermonkey
GM_registerMenuCommand("Gerar QR Code", function() {
gerarQRCode();
});
// Função para criar e exibir o QR code
function gerarQRCode() {
// Se o QR code já estiver visível, não faz nada para evitar duplicatas
if (document.getElementById("bf-qrcode-container")) {
return;
}
// Criando o elemento do contêiner do QR code
let qrDiv = document.createElement("div");
qrDiv.id = "bf-qrcode-container"; // Adiciona um ID para fácil referência
qrDiv.style.position = "fixed";
qrDiv.style.top = "50%"; // Centraliza verticalmente
qrDiv.style.left = "50%"; // Centraliza horizontalmente
qrDiv.style.transform = "translate(-50%, -50%)"; // Ajusta para o centro exato
qrDiv.style.background = "white";
qrDiv.style.padding = "25px"; // Aumentado para mais espaço interno
qrDiv.style.boxShadow = "0 6px 12px rgba(0, 0, 0, 0.3)"; // Sombra um pouco mais forte
qrDiv.style.zIndex = "10000";
qrDiv.style.borderRadius = "12px"; // Bordas ligeiramente mais arredondadas
qrDiv.style.display = "flex"; // Usa flexbox para centralizar conteúdo
qrDiv.style.flexDirection = "column"; // Organiza itens em coluna
qrDiv.style.alignItems = "center"; // Centraliza itens horizontalmente
qrDiv.style.textAlign = "center"; // Garante que o texto (se houver) esteja centralizado
qrDiv.style.minWidth = "250px"; // Largura mínima para botões e QR
qrDiv.style.maxWidth = "calc(100% - 40px)"; // Garante que não exceda a largura da tela em mobile
qrDiv.style.maxHeight = "calc(100% - 40px)"; // Garante que não exceda a altura da tela em mobile
// Criando o elemento para o QR code em si (onde o qrcode.js desenha)
let qrCodeCanvasContainer = document.createElement("div");
qrCodeCanvasContainer.id = "bf-qrcode-canvas-container"; // Para controle do qrcode.js
qrDiv.appendChild(qrCodeCanvasContainer);
// Criando o QR code com tamanho otimizado para mobile
let qrCode = new QRCode(qrCodeCanvasContainer, {
text: window.location.href,
width: 180,
height: 180,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H // Alto nível de correção de erros
});
// Contêiner para os botões para melhor controle de layout
let buttonContainer = document.createElement("div");
buttonContainer.style.marginTop = "20px"; // Espaçamento entre QR e botões
buttonContainer.style.display = "flex";
buttonContainer.style.flexDirection = "column"; // Botões um abaixo do outro
buttonContainer.style.gap = "10px"; // Espaço entre os botões
buttonContainer.style.width = "100%"; // Para os botões preencherem a largura do contêiner
// --- NOVO: Botão de compartilhamento ---
let shareBtn = document.createElement("button");
shareBtn.innerText = "Compartilhar QR Code";
shareBtn.style.cssText = `
font-size: 16px;
padding: 10px 15px;
background-color: #007bff; /* Azul para compartilhar */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
transition: background-color 0.3s ease;
`;
shareBtn.onmouseover = () => shareBtn.style.backgroundColor = "#0056b3";
shareBtn.onmouseout = () => shareBtn.style.backgroundColor = "#007bff";
shareBtn.onclick = function() {
let canvas = qrCodeCanvasContainer.querySelector("canvas");
if (!canvas) {
alert("Não foi possível encontrar o QR Code para compartilhar.");
return;
}
// Verifica se a Web Share API está disponível e suporta compartilhamento de arquivos
if (navigator.share && navigator.canShare && navigator.canShare({ files: [] })) {
canvas.toBlob(async function(blob) {
try {
// Cria um objeto File a partir do Blob
const file = new File([blob], "QR_Code.png", { type: "image/png" });
await navigator.share({
files: [file], // Compartilha o arquivo da imagem
title: 'QR Code da página atual',
text: 'Confira o QR Code para a página: ' + window.location.href,
});
console.log('QR Code compartilhado com sucesso!');
} catch (error) {
console.error('Erro ao compartilhar QR Code:', error);
if (error.name === 'AbortError') {
console.log('Compartilhamento cancelado pelo usuário.');
} else {
alert('Não foi possível compartilhar o QR Code. Erro: ' + error.message + '\nPor favor, baixe a imagem e compartilhe manualmente.');
}
}
}, 'image/png'); // Formato da imagem
} else {
// Fallback para navegadores que não suportam a Web Share API para arquivos
alert("Seu navegador não suporta a função de compartilhamento de arquivos diretamente. Por favor, baixe a imagem e compartilhe manualmente.");
}
};
// --- FIM NOVO: Botão de compartilhamento ---
// Botão de download
let downloadBtn = document.createElement("button");
downloadBtn.innerText = "Baixar QR Code";
downloadBtn.style.cssText = `
font-size: 16px;
padding: 10px 15px;
background-color: #4CAF50; /* Verde vibrante */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%; /* Ocupa toda a largura do buttonContainer */
box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura */
transition: background-color 0.3s ease; /* Transição suave ao hover */
`;
downloadBtn.onmouseover = () => downloadBtn.style.backgroundColor = "#45a049";
downloadBtn.onmouseout = () => downloadBtn.style.backgroundColor = "#4CAF50";
downloadBtn.onclick = function() {
// Encontra o canvas dentro do qrCodeCanvasContainer
let canvas = qrCodeCanvasContainer.querySelector("canvas");
if (canvas) {
let link = document.createElement("a");
link.href = canvas.toDataURL("image/png");
link.download = `QR_Code_${new URL(window.location.href).hostname.replace(/\./g, '_')}.png`; // Nome do arquivo mais descritivo
link.click();
}
};
// Botão de fechar
let closeBtn = document.createElement("button");
closeBtn.innerText = "Fechar";
closeBtn.style.cssText = `
font-size: 16px;
padding: 10px 15px;
background-color: #f44336; /* Vermelho vibrante */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
transition: background-color 0.3s ease;
`;
closeBtn.onmouseover = () => closeBtn.style.backgroundColor = "#da190b";
closeBtn.onmouseout = () => closeBtn.style.backgroundColor = "#f44336";
closeBtn.onclick = function() {
document.body.removeChild(qrDiv);
};
// Adiciona os botões ao contêiner de botões (compartilhar primeiro)
buttonContainer.appendChild(shareBtn);
buttonContainer.appendChild(downloadBtn);
buttonContainer.appendChild(closeBtn);
// Adiciona o contêiner de botões ao contêiner principal do QR
qrDiv.appendChild(buttonContainer);
// Adiciona o contêiner principal do QR ao corpo do documento
document.body.appendChild(qrDiv);
}
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址