Gera um QR code da página atual e permite o download e compartilhamento, com um design centralizado e elegante.
// ==UserScript==
// @name BF - Gerador de QR Code
// @name:pt-BR BF - Gerador de QR Code
// @namespace https://github.com/BrunoFortunatto
// @version 2.0
// @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==
(function() {
'use strict';
// Garante que o script só execute no frame principal (evita duplicatas em iframes)
if (window.top !== window.self) {
console.log("BF QRcode (v1.8): Script detectado em iframe, interrompendo execução.");
return;
}
console.log("BF QRcode (v1.8): Script principal executando.");
// 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")) {
console.log("BF QRcode: Container do QR code já existe. Abortando nova criação.");
return;
}
console.log("BF QRcode: Criando container principal do QR code.");
// Criando o elemento do contêiner do QR code
let qrDiv = document.createElement("div");
qrDiv.id = "bf-qrcode-container";
qrDiv.style.position = "fixed";
qrDiv.style.top = "50%";
qrDiv.style.left = "50%";
qrDiv.style.transform = "translate(-50%, -50%)";
qrDiv.style.background = "white";
qrDiv.style.padding = "25px";
qrDiv.style.boxShadow = "0 6px 12px rgba(0, 0, 0, 0.3)";
qrDiv.style.zIndex = "10000";
qrDiv.style.borderRadius = "12px";
qrDiv.style.display = "flex";
qrDiv.style.flexDirection = "column";
qrDiv.style.alignItems = "center";
qrDiv.style.textAlign = "center";
qrDiv.style.minWidth = "250px";
qrDiv.style.maxWidth = "calc(100% - 40px)";
qrDiv.style.maxHeight = "calc(100% - 40px)";
// 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";
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
});
// Contêiner para os botões para melhor controle de layout
let buttonContainer = document.createElement("div");
buttonContainer.style.marginTop = "20px";
buttonContainer.style.display = "flex";
buttonContainer.style.flexDirection = "column";
buttonContainer.style.gap = "10px";
buttonContainer.style.width = "100%";
// Botão de compartilhamento
console.log("BF QRcode: Criando 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";
// --- CORREÇÃO AQUI: Tornando a função onclick 'async' ---
shareBtn.onclick = async function() {
let canvas = qrCodeCanvasContainer.querySelector("canvas");
if (!canvas) {
alert("Não foi possível encontrar o QR Code para compartilhar.");
return;
}
console.log("BF QRcode: Verificando suporte ao Web Share API...");
const supportsShare = !!navigator.share;
const supportsCanShare = !!navigator.canShare;
const supportsFileShare = supportsCanShare && navigator.canShare({ files: [] });
console.log(`BF QRcode: navigator.share disponível: ${supportsShare}`);
console.log(`BF QRcode: navigator.canShare disponível: ${supportsCanShare}`);
console.log(`BF QRcode: navigator.canShare({ files: [] }) retornou: ${supportsFileShare}`);
if (supportsShare && supportsCanShare && supportsFileShare) {
console.log("BF QRcode: Tentando compartilhar arquivo (imagem) via Web Share API...");
canvas.toBlob(async function(blob) {
try {
const file = new File([blob], "QR_Code.png", { type: "image/png" });
await navigator.share({
files: [file],
title: 'QR Code da página atual',
text: 'Confira o QR Code para a página: ' + window.location.href,
});
console.log('BF QRcode: QR Code compartilhado com sucesso!');
} catch (error) {
console.error('BF QRcode: Erro ao compartilhar QR Code (via files):', error);
if (error.name === 'AbortError') {
console.log('BF QRcode: Compartilhamento cancelado pelo usuário.');
} else {
alert('Não foi possível compartilhar o QR Code (erro de arquivo). Erro: ' + error.message + '\nVocê ainda pode baixar a imagem e compartilhar manualmente.');
}
}
}, 'image/png');
} else if (supportsShare) {
console.log("BF QRcode: Compartilhamento de arquivo não suportado. Tentando compartilhar URL da página...");
try {
await navigator.share({ // Este 'await' agora é válido
title: 'QR Code da página atual',
text: 'Acesse este QR Code: ' + window.location.href,
url: window.location.href
});
console.log('BF QRcode: URL da página compartilhada com sucesso.');
} catch (error) {
console.error('BF QRcode: Erro ao compartilhar URL da página:', error);
if (error.name === 'AbortError') {
console.log('BF QRcode: Compartilhamento de URL cancelado pelo usuário.');
} else {
alert('Não foi possível compartilhar a URL da página. Erro: ' + error.message);
}
}
} else {
console.log("BF QRcode: Web Share API não suportada neste navegador/contexto.");
alert("Seu navegador não suporta a função de compartilhamento. Por favor, baixe a imagem ou copie a URL da página e compartilhe manualmente.");
}
};
// 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%;
box-sizing: border-box;
transition: background-color 0.3s ease;
`;
downloadBtn.onmouseover = () => downloadBtn.style.backgroundColor = "#45a049";
downloadBtn.onmouseout = () => downloadBtn.style.backgroundColor = "#4CAF50";
downloadBtn.onclick = function() {
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`;
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);
console.log("BF QRcode: Botões adicionados ao container de botões.");
// 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);
console.log("BF QRcode: Container principal do QR code adicionado ao body.");
}
})();