Add a "Generate QR Code" button to mp.weixin.qq.com
// ==UserScript==
// @name 利用google api生成当前页面二维码
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Add a "Generate QR Code" button to mp.weixin.qq.com
// @author Cantan Tam
// @match *://*/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
let isGeneratingQRCode = false;
// 创建按钮元素
const qrCodeButton = document.createElement('div');
const buttonContent = document.createElement('div');
buttonContent.textContent = '生成二维码';
qrCodeButton.appendChild(buttonContent);
// 设置按钮样式
qrCodeButton.style.position = 'fixed';
qrCodeButton.style.top = '10px';
qrCodeButton.style.right = '20.5px';
qrCodeButton.style.width = '94px';
qrCodeButton.style.height = '30px';
qrCodeButton.style.borderRadius = '5px';
qrCodeButton.style.backgroundColor = '#f2f2f2ff';
qrCodeButton.style.color = '#ccccccff';
qrCodeButton.style.textAlign = 'center';
qrCodeButton.style.fontSize = '14px';
qrCodeButton.style.cursor = 'pointer';
qrCodeButton.style.userSelect = 'none';
qrCodeButton.style.zIndex = '9999';
qrCodeButton.style.lineHeight = '32px'; // 垂直居中
// 按钮的悬停效果
qrCodeButton.addEventListener('mouseover', function() {
if (isGeneratingQRCode) {
qrCodeButton.style.backgroundColor = '#ff9955ff';
buttonContent.style.color = '#ffffffff';
} else {
qrCodeButton.style.backgroundColor = '#27ae60ff';
buttonContent.style.color = '#ffffffff';
}
});
qrCodeButton.addEventListener('mouseout', function() {
if (isGeneratingQRCode) {
qrCodeButton.style.backgroundColor = '#ff9955ff';
buttonContent.style.color = '#ffffffff';
} else {
qrCodeButton.style.backgroundColor = '#f2f2f2ff';
buttonContent.style.color = '#ccccccff';
}
});
// 按钮点击事件
qrCodeButton.addEventListener('click', function() {
if (!isGeneratingQRCode) {
isGeneratingQRCode = true;
buttonContent.textContent = '下载二维码';
qrCodeButton.style.backgroundColor = '#ff9955ff';
buttonContent.style.color = '#ffffffff';
generateQRCode();
} else {
downloadQRCode();
}
});
// 生成二维码并插入到页面
function generateQRCode() {
const url = window.location.href;
const qrCodeUrl = `https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=${encodeURIComponent(url)}&chld=L|0`; // 设置白边为0
// 清除页面上生成的125x125二维码图像
clearGeneratedQRCode();
const qrCodeImage = document.createElement('img');
qrCodeImage.src = qrCodeUrl;
qrCodeImage.style.position = 'fixed';
qrCodeImage.style.top = '45px'; // 20px + 30px (按钮高度)
qrCodeImage.style.right = '5px';
qrCodeImage.style.width = '125px';
qrCodeImage.style.height = '125px';
document.body.appendChild(qrCodeImage);
}
// 下载二维码
function downloadQRCode() {
const url = window.location.href;
const qrCodeUrl = `https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=${encodeURIComponent(url)}&chld=L|0`; // 设置白边为0
// 获取前网页的<title></title>内容，并将其用作文件名
const pageTitle = document.title || 'QRCode';
fetch(qrCodeUrl)
.then(response => response.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${pageTitle}.png`;
a.style.display = 'none'; // 隐藏下载链接
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
a.remove();
});
// 延迟0.5秒后更新按钮文字、颜色
setTimeout(function() {
isGeneratingQRCode = false;
buttonContent.textContent = '下载已开始';
qrCodeButton.style.backgroundColor = '#f2f2f2ff';
buttonContent.style.color = '#666666ff';
}, 500);
// 清除页面上生成的125x125二维码图像
clearGeneratedQRCode();
}
// 清除页面上生成的125x125二维码图像
function clearGeneratedQRCode() {
const qrCodeImages = document.querySelectorAll('img[src*="chart.googleapis.com"]');
qrCodeImages.forEach(img => {
img.remove();
});
}
// 将按钮添加到页面
document.body.appendChild(qrCodeButton);
})();