tinyurl.com 缩短网址按钮

在页面左下角设置一个缩短网址的按钮,这会开个新视窗来查看 tinyurl 的缩址结果

当前为 2022-04-02 提交的版本,查看 最新版本

  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. It will create a new window for the shortened URL of tinyurl
  6. // @description:zh-TW 在頁面左下角設置一個縮短網址的按鈕,這會開個新視窗來檢視 tinyurl 的縮址結果
  7. // @description:zh-CN 在页面左下角设置一个缩短网址的按钮,这会开个新视窗来查看 tinyurl 的缩址结果
  8. // @namespace https://greasyfork.org/zh-TW/users/393133-evan-tseng
  9. // @version 0.25
  10. // @author Evan Tseng
  11. // @run-at document-start
  12. // @include *://*
  13. // @grant none
  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("triggerBy") == "shortenButton") {
  22. var tu = document.body.innerText;
  23. document.body.innerHTML = "";
  24. if(tu.indexOf("https://tinyurl.com/") == 0) {
  25. document.write(`<style>
  26. body { text-align:center; padding:3mm 0; margin:0; } #sUrl,#ccBtn { font-size:12pt; } #sUrl { width:90%; text-align:center; margin-bottom:1mm; }
  27. #sUrl { color:#000; background:#ddd; border:1px inset #eee; border-radius:1mm }
  28. #ccBtn { color:#000; background:#ddd; border:1px solid #888; border-radius:2mm; cursor:pointer }
  29. input, button { outline:none }
  30. input:focus, button:focus { box-shadow:0 0 1mm 1px #08f }
  31. @media (prefers-color-scheme: light) {
  32. body { background:linear-gradient(90deg,#ccc 0%,#ddd 50%,#ccc 100%) }
  33. #sUrl { color:#222; background:#eee; border:1px inset #eee }
  34. #ccBtn { color:#111; background:#eee; border:1px solid #888 }
  35. #ccBtn:hover { filter:brightness(1.2) }
  36. #ccBtn:active { filter:brightness(.9) }
  37. }
  38. @media (prefers-color-scheme: dark) {
  39. body { background:linear-gradient(90deg,#333 0%,#555 50%,#333 100%); filter:brightness(.7) }
  40. #sUrl { color:#fff; background:#333; border:1px inset #333 }
  41. #ccBtn { color:#fff; background:#333; border:1px solid #222 }
  42. #ccBtn:hover { filter:brightness(1.5) }
  43. #ccBtn:active { filter:brightness(.75) }
  44. }
  45. </style>`);
  46. document.write('<div><input id="sUrl" value="' + tu + '" readonly/><br/><button id="ccBtn" onclick="copyUrl()">Copy &amp; Close</button></div>');
  47. document.write(`<script>
  48. function copyUrl() {
  49. let txtBox = document.querySelector("#sUrl");
  50. txtBox.focus();
  51. txtBox.select();
  52. document.execCommand("copy");
  53. window.close();
  54. }
  55. document.querySelector("#ccBtn").focus();
  56. </script>`);
  57. }
  58. else {
  59. document.write('<style> body { font:400 12pt sans-serif; color:#eee; background:#333; } </style>');
  60. document.write('<p>Please logout your TinyURL account.<br/>Try using the shorten button script as anonymous.</p>');
  61. }
  62. }
  63. }
  64. else
  65. {
  66. if(window.self === window.top) {
  67. var addTinyButton = (function() {
  68. setTimeout(function(){
  69. const windowWidth = 300,
  70. windowHeight = 110;
  71. let strWindowFeatures = 'width=' + windowWidth + ',height=' + windowHeight + ',left=' + ((screen.width - windowWidth) / 2) + ',top=' + ((screen.height - windowHeight) / 3) + ',menubar=no,toolbar=no,location=no,status=no',
  72. cssStyle = document.createElement('style'),
  73. css = `
  74. .__shorten_wrap__ { position:fixed; bottom:22mm; left:-.7em; display:block; width:0!important; height:0!important; padding:0!important; margin:0!important; opacity:.5; z-index:2147483646; transition:.8s .1s }
  75. .__shorten_wrap__:hover { left:-.2em; opacity:1; transition:.2s }
  76. .__shorten_btn__ { position:absolute!important; bottom:10px!important; width:4em!important; left:-2.2em!important; font:400 12pt sans-serif!important; width:auto!important; max-width:none!important; color:#334!important; text-shadow:1px -1px rgba(255,255,255,.6); background:linear-gradient(5deg, rgba(170,170,175,.85) 0, rgba(210,210,215,.8) 50%, rgba(170,170,175,.85) 100%)!important; padding:.3em .6em 1em!important; margin:0!important; line-height:1!important; border:1px solid #555!important; border-radius:6px 6px 0 0!important; white-space:nowrap; cursor:pointer!important; transform:rotate(90deg); }
  77. .__shorten_btn__:focus { outline:none }
  78. .__shorten_btn__:hover { background:linear-gradient(5deg, rgba(190,190,190,.95) 0, rgba(230,230,230,.95) 50%, rgba(190,190,190,.95) 100%)!important; border:1px solid rgba(0,0,0,.4)!important; box-shadow:2pt 0 5pt rgba(0,0,0,.5)!important }
  79. .__shorten_btn__:active { color:#cdf!important; text-shadow:-1px 1px #666!important; background:rgba(125,125,133,.8)!important; border-color:rgba(255,255,255,.6)!important; box-shadow:inset 1px 0 4pt rgba(0,0,0,.7)!important; transition:0s!important }
  80. @media not screen { .__shorten_wrap__ { display:none } }`;
  81. if(cssStyle.styleSheet) cssStyle.styleSheet.cssText = css;
  82. else cssStyle.appendChild(document.createTextNode(css));
  83. document.querySelector('head').appendChild(cssStyle);
  84.  
  85. let shortenWrap = document.createElement('div');
  86. shortenWrap.setAttribute("id", "tinyurlShortener");
  87. shortenWrap.setAttribute("class", "__shorten_wrap__");
  88. document.body.appendChild(shortenWrap);
  89.  
  90. let shortenButton = document.createElement('button');
  91. shortenButton.setAttribute("class", "__shorten_btn__");
  92. shortenButton.innerText = "TinyURL";
  93. shortenWrap.appendChild(shortenButton);
  94.  
  95. shortenButton.addEventListener("click", function(){
  96. window.open('https://tinyurl.com/api-create.php?triggerBy=shortenButton&url=' + encodeURIComponent(location.href), "", strWindowFeatures);
  97. });
  98.  
  99. }, 300);
  100. })();
  101. }
  102. }
  103. })();