tinyurl.com 缩短网址按钮

在页面左下角设置一个缩短网址的按钮,点按即可从 tinyurl.com 取得当前页面的缩址

当前为 2022-09-28 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name tinyurl.com - URL shorten button
  3. // @name:zh-TW tinyurl.com 縮短網址按鈕
  4. // @name:zh-CN tinyurl.com 缩短网址按钮
  5. // @description Add a URL shorten button to the bottom left corner. Click it to get a shortened URL (by tinyurl.com) of current page.
  6. // @description:zh-TW 在頁面左下角設置一個縮短網址的按鈕,點按即可從 tinyurl.com 取得目前頁面的縮址
  7. // @description:zh-CN 在页面左下角设置一个缩短网址的按钮,点按即可从 tinyurl.com 取得当前页面的缩址
  8. // @namespace https://greasyfork.org/zh-TW/users/393133-evan-tseng
  9. // @version 0.38
  10. // @author Evan Tseng
  11. // @match *://*/*
  12. // @grant none
  13. // @run-at document-body
  14. // @license MIT
  15. // ==/UserScript==
  16.  
  17. (function() {
  18. 'use strict';
  19. if(location.hostname == "tinyurl.com") {
  20. var url = new URL(location.href);
  21. if(url.searchParams.get("trigger") == "shortenButton") {
  22. var tu = document.body.innerText;
  23. document.body.innerHTML = "";
  24. document.write(`<style>
  25. html, body { overflow:hidden }
  26. body { max-width:240pt; height:24pt; font:400 12pt/20pt sans-serif; text-align:center; padding:0 2pt; margin:0; vertical-align:middle }
  27. .wrap { display:flex; }
  28. .errMsg { color:#600; font-weight:600; line-height:24pt; }
  29. #sUrl, #ccBtn { font:400 12pt/20pt sans-serif; height:20pt; text-align:center; vertical-align:middle; padding:0 .5em; margin:2pt 0 }
  30. #sUrl { flex:1 1 auto; width:160pt; text-align:center; border:1px solid #888; border-radius:5pt; }
  31. #ccBtn { flex:0 0 4em; width:4em; margin-left:1mm; color:#000; background:#ddd; border:1px solid #888; border-radius:5pt; cursor:pointer }
  32. input, button { outline:none }
  33. input:focus, button:focus { box-shadow:0 0 1mm 1px #08f }
  34. @media (prefers-color-scheme: light) {
  35. html, body { color:#333; background:#bbb }
  36. #sUrl, #ccBtn { color:#333; background:#eee }
  37. #ccBtn:hover { background: #fff }
  38. #ccBtn:active { color:#800; background: #aaa }
  39. }
  40. @media (prefers-color-scheme: dark) {
  41. html, body { color:#ccc; background:#444 }
  42. #sUrl, #ccBtn { color:#ccc; background:#222 }
  43. #ccBtn:hover { background: #555 }
  44. #ccBtn:active { color:#faa; background: #000 }
  45. }
  46. </style>`);
  47. if(tu.match(/^https?:\/\/tinyurl\.com\/\w+$/)) {
  48. document.write('<div class="wrap"><input id="sUrl" value="' + tu + '" readonly/> <button id="ccBtn" onclick="copyUrl()">Copy</button></div>');
  49. document.write(`<script>
  50. function copyUrl() {
  51. let txtBox = document.querySelector("#sUrl");
  52. txtBox.focus();
  53. txtBox.select();
  54. document.execCommand("copy");
  55. txtBox.setSelectionRange(0,0)
  56. window.close();
  57. }
  58. document.querySelector("#ccBtn").focus();
  59. </script>`);
  60. }
  61. else document.write('<div class="errMsg">Error! Unable to shorten this URL.</div>');
  62. }
  63. }
  64. else if(window.self === window.top) {
  65. (function(){
  66. const TUcss = `
  67. @media screen {
  68. .__TUwrap__ { position:fixed!important; left:0!important; bottom:33mm!important; width:0!important; min-width:0!important; margin:0!important; z-index:2147483647!important }
  69. .__TUbg__ { position:fixed; top:0; left:0; background:rgba(0,0,0,.5); width:100vw; height:100vh; z-index:-1; backdrop-filter:blur(3mm); -webkit-backdrop-filter:blur(3mm); visibility:hidden; opacity:0; transition:.5s, width 0s, height 0s }
  70. .__TUbtn__ { position:absolute; left:.2em; transform:rotate(90deg); width:64pt; font:400 12pt/1.6 arial!important; text-align:center!important; padding:0!important; margin:0 -32pt!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; white-space:nowrap; cursor:pointer; transition:.3s,left .5s .5s; }
  71. .__TUbtn__.active, .__TUbtn__:hover { left:.8em; box-shadow: 2px 0 2mm 1px rgba(0,0,0,.5); opacity:1; transition:.1s;}
  72. .__TUbtn__:active { box-shadow: inset 1px 0 1mm 1px rgba(0,0,0,.5); transition:0s}
  73. .__TUbox__ { position:absolute; left:10mm; top:-4mm; display:none; box-sizing:content-box; width:244pt; height:24pt; padding:3mm; border-radius:3mm; backdrop-filter:blur(3mm); -webkit-backdrop-filter:blur(3mm)}
  74. .__TUbox__:before { position:absolute; top:20px; left:-7px; display:block; content:""; border-top:7px solid transparent;border-bottom:7px solid transparent; z-index:2 }
  75. .__TUpage__ { display:block!important; width:244pt; height:24pt; background:transparent; background-image:none; border:none; }
  76. }
  77. @media (prefers-color-scheme: light) {
  78. .__TUbtn__ { color:#333!important; background:#bbb!important; }
  79. .__TUbtn__:active { color:#eee!important; background:#666!important; }
  80. .__TUbox__ { background:#bbb; box-shadow:0 1mm 5mm rgba(0,0,0,.3); }
  81. .__TUbox__:before { border-right:7px solid #bbb; }
  82. }
  83. @media (prefers-color-scheme: dark) {
  84. .__TUbtn__ { color:#ccc!important; background:#444!important; }
  85. .__TUbtn__:active { color:#ddd!important; background:#222!important; }
  86. .__TUbox__ { background:#444; box-shadow:0 1mm 5mm rgba(255,255,255,.3); }
  87. .__TUbox__:before { border-right:7px solid #444; }
  88. }
  89. @media print {
  90. .__TUwrap__ { display: none }
  91. }`;
  92.  
  93. let cssStyle = document.createElement('style');
  94. if(cssStyle.styleSheet) cssStyle.styleSheet.cssText = TUcss;
  95. else cssStyle.appendChild(document.createTextNode(TUcss));
  96. document.querySelector('head').appendChild(cssStyle);
  97.  
  98. var TUwrap = null,
  99. TUbtn = null,
  100. TUbg = null,
  101. TUbox = null,
  102. TUpage = null;
  103.  
  104. function query(theUrl){
  105. close();
  106. let queryURL = 'https://tinyurl.com/api-create.php?trigger=shortenButton&url=' + encodeURIComponent(theUrl);
  107. TUpage = document.createElement('iframe');
  108. TUpage.classList.add('__TUpage__');
  109. TUpage.src = queryURL;
  110. TUbox.appendChild(TUpage);
  111. TUbox.setAttribute('style', 'display:block;');
  112. TUbg.setAttribute('style', 'visibility:visible; opacity:1')
  113. TUbtn.classList.add('active');
  114. }
  115.  
  116. function close(){
  117. if(TUpage) {
  118. TUbtn.classList.remove('active');
  119. TUbox.setAttribute('style', 'display:none');
  120. TUpage.remove();
  121. TUpage = null;
  122. }
  123. TUbg.setAttribute('style', 'visibility:hidden; opacity:0')
  124. }
  125.  
  126. function initialize(){
  127. TUwrap = document.createElement('div');
  128. TUwrap.classList.add('__TUwrap__');
  129. TUbg = document.createElement('div');
  130. TUbg.classList.add('__TUbg__');
  131. TUbtn = document.createElement('button');
  132. TUbtn.classList.add('__TUbtn__');
  133. TUbtn.innerText = "TinyURL"
  134. TUbox = document.createElement('div');
  135. TUbox.classList.add('__TUbox__');
  136.  
  137. document.documentElement.appendChild(TUwrap);
  138. TUwrap.appendChild(TUbg);
  139. TUwrap.appendChild(TUbtn);
  140. TUwrap.appendChild(TUbox);
  141. TUbg.addEventListener('click', close );
  142. TUbtn.addEventListener('click', function(){ query(window.location.href); });
  143. }
  144.  
  145. if(TUwrap == null) initialize();
  146. })();
  147. }
  148.  
  149. })();