tinyurl.com 缩短网址按钮

在页面左下角设置一个缩短网址的按钮，这会开个新视窗来查看 tinyurl 的缩址结果
当前为 2022-05-15 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name				tinyurl.com - URL shorten button
// @name:zh-TW			tinyurl.com 縮短網址按鈕
// @name:zh-CN			tinyurl.com 缩短网址按钮
// @description			Add a URL shorten button to the bottom left corner. It will create a new window for the shortened URL of tinyurl
// @description:zh-TW	在頁面左下角設置一個縮短網址的按鈕，這會開個新視窗來檢視 tinyurl 的縮址結果
// @description:zh-CN	在页面左下角设置一个缩短网址的按钮，这会开个新视窗来查看 tinyurl 的缩址结果
// @namespace			https://greasyfork.org/zh-TW/users/393133-evan-tseng
// @version				0.30
// @author				Evan Tseng
// @include				*://*
// @grant				none
// @run-at				document-body
// @license				MIT
// ==/UserScript==
 
(function() {
	'use strict';
	if(location.hostname == "tinyurl.com") {
		var url = new URL(location.href);
		if(url.searchParams.get("triggerBy") == "shortenButton") {
			var tu = document.body.innerText;
			document.body.innerHTML = "";
			if(tu.indexOf("https://tinyurl.com/") == 0) {
				document.write(`<style>
html, body { background:#ccc!important }
body { text-align:center; padding:3px 0; margin:0; vertical-align:middle }
#sUrl, #ccBtn { font-size:14px; height:24px; line-height:24px; vertical-align:middle; padding:0 .5em; }
#sUrl { width:15em; text-align:center; color:222; border:1px inset #eee; border-radius:1mm }
#ccBtn { width:4em; color:#000; background:#ddd; border:1px solid #888; border-radius:2mm; cursor:pointer }
input, button { outline:none }
input:focus, button:focus { box-shadow:0 0 1mm 1px #08f }
@media (prefers-color-scheme: light) {
	#ccBtn:hover { filter:brightness(1.2) }
	#ccBtn:active { filter:brightness(.9) }
}
@media (prefers-color-scheme: dark) {
	#ccBtn:hover { filter:brightness(1.5) }
	#ccBtn:active { filter:brightness(.75) }
}
</style>`);
				document.write('<div><input id="sUrl" value="' + tu + '" readonly/> <button id="ccBtn" onclick="copyUrl()">Copy</button></div>');
				document.write(`<script>
function copyUrl() {
	let txtBox = document.querySelector("#sUrl");
	txtBox.focus();
	txtBox.select();
	document.execCommand("copy");
	txtBox.setSelectionRange(0,0)
	window.close();
}
document.querySelector("#ccBtn").focus();
</script>`);
			}
			else {
				document.write('<style> body { font:400 12pt sans-serif; color:#eee; background:#333; padding:0; margin:0; } </style>');
				document.write('<p>Please logout your TinyURL account.<br/>Try using the shorten button script as anonymous.</p>');
			}
		}
	}
	else if(window.self === window.top) {
		const TUcss = `
.__TUwrap__ { position:fixed; left: 0; bottom:33mm; z-index:22222222 }
.__TUbg__ { position:fixed; top:0; left:0; display:none; background:rgba(0,0,0,.5); width:100vw; height:100vh; z-index:-1; backdrop-filter:blur(1mm); -webkit-backdrop-filter:blur(1mm) }
.__TUbtn__ { position:absolute; left:-2mm; transform:rotate(90deg); font:400 12pt sans-serif!important; width:5em!important; color:#333!important; background:#ddd!important; margin:0 -1.8em!important; line-height:1.6!important; border:1px solid #888; border-radius:5px 5px 0 0; box-shadow:0 0 0 1px rgba(0,0,0,.4); opacity:.4; cursor:pointer; transition:.3s; }
.__TUbtn__:hover { left:0; box-shadow: 2px 0 2mm 1px rgba(0,0,0,.5); opacity:1; transition:.1s;}
.__TUbtn__:active { color:#eee!important; background:#666!important; box-shadow: inset 1px 0 1mm 1px rgba(0,0,0,.5); }
.__TUbox__ { position:absolute; left:10mm; top:-4mm; display:none; padding:3mm; border-radius:3mm; background:#ccc; box-shadow:0 1mm 5mm rgba(0,0,0,.3); backdrop-filter:blur(3mm); -webkit-backdrop-filter:blur(3mm)}
.__TUbox__:before { position:absolute; top:20px; left:-7px; display:block; content:""; border-top:7px solid transparent;border-bottom:7px solid transparent; z-index:2 }
.__TUpage__ { display:block!important; width:300px; height:32px; background:transparent; background-image:none; border:none; }
 
.__TUbox__ { background:#ccc; box-shadow:0 1mm 5mm rgba(0,0,0,.3) }
.__TUbox__:before { border-right:7px solid #ccc; }
`;
		var cssStyle = document.createElement('style');
		if(cssStyle.styleSheet)	cssStyle.styleSheet.cssText = TUcss;
		else	cssStyle.appendChild(document.createTextNode(TUcss));
		document.querySelector('head').appendChild(cssStyle);
 
		var TU = function() {
			var TUbg = null,
				TUwrap = null,
				TUbtn = null,
				TUbox = null,
				TUpage = null,
				queryURL = null;
 
			const init = function(){
				if(TUwrap == null) {
					TUwrap = document.createElement('div');
					TUwrap.setAttribute('class', '__TUwrap__');
					TUbg = document.createElement('div');
					TUbg.setAttribute('class', '__TUbg__');
					TUbtn = document.createElement('button');
					TUbtn.setAttribute('class', '__TUbtn__');
					TUbtn.innerText = "TinyURL"
					TUbox = document.createElement('div');
					TUbox.setAttribute('class', '__TUbox__');
 
					TUwrap.appendChild(TUbg);
					TUwrap.appendChild(TUbtn);
					TUwrap.appendChild(TUbox);
					document.body.appendChild(TUwrap);
					TUbg.addEventListener('click', function(){ close(); });
					TUbtn.addEventListener('click', function(){ query(location.href) });
				}
			}
 
			const query = function(theUrl){
				close();
				queryURL = 'https://tinyurl.com/api-create.php?triggerBy=shortenButton&url=' + encodeURIComponent(theUrl);
				TUpage = document.createElement('iframe');
				TUpage.setAttribute('class', '__TUpage__');
				TUpage.src = queryURL;
				TUbox.appendChild(TUpage);
				TUbox.setAttribute('style', 'display:block;');
				TUbg.setAttribute('style', 'display:block')
 
			}
 
			const close = function(){
				if(TUpage) {
					TUbox.setAttribute('style', 'display:none;');
					TUpage.remove();
					TUpage = null;
				}
				TUbg.setAttribute('style', 'display:none')
			}
 
			init();
		}
		TU();
	}
 
})();