GreasyFork: Better Webhook Info Page

9/21/2023, 3:18:06 PM

  1. // ==UserScript==
  2. // @name GreasyFork: Better Webhook Info Page
  3. // @namespace UserScripts
  4. // @match https://greasyfork.org/*
  5. // @grant none
  6. // @version 0.1.7
  7. // @author CY Fung
  8. // @license MIT
  9. // @description 9/21/2023, 3:18:06 PM
  10. // @run-at document-end
  11. // ==/UserScript==
  12.  
  13. (()=>{
  14.  
  15. if(!location.pathname.includes('/users/webhook-info')) return;
  16.  
  17. document.head.appendChild(document.createElement('style')).textContent=`
  18.  
  19. #main-header ~ .width-constraint > .text-content:only-child > ul li {
  20. font-size: 0.88rem;
  21. }
  22.  
  23. #main-header ~ .width-constraint > .text-content:only-child > ul a:first-child {
  24. display: block;
  25. font-size: 1rem;
  26. margin-top: 4px;
  27. text-decoration: none;
  28. }
  29.  
  30. #main-header ~ .width-constraint > .text-content:only-child > ul a ~ a {
  31. color: #383855;
  32. text-decoration: none;
  33. }
  34.  
  35. [dark] #main-header ~ .width-constraint > .text-content:only-child > ul a ~ a {
  36. color: #9898c9;
  37. }
  38.  
  39. #main-header ~ .width-constraint > .text-content:only-child dt {
  40. font-weight: bold;
  41. color: #2376a0;
  42. }
  43.  
  44. #main-header ~ .width-constraint > .text-content:only-child dd textarea {
  45. flex-grow: 1;
  46. height: 5.2rem;
  47. margin: 0px;
  48. padding: 8px;
  49. box-sizing: border-box;
  50. }
  51.  
  52. #main-header ~ .width-constraint > .text-content:only-child dd form {
  53. display: flex;
  54. flex-direction: row;
  55. align-items: end;
  56. column-gap: 24px;
  57. row-gap: 8px;
  58. flex-wrap: wrap;
  59. max-width: calc(100% - 48px);
  60. }
  61.  
  62. @media all and (min-width:300px) {
  63. display: flex;
  64. flex-direction: row;
  65. flex-wrap: nowrap;
  66. align-items: end;
  67. column-gap: 24px;
  68. max-width: calc(100% - 48px);
  69. }
  70.  
  71.  
  72. #main-header ~ .width-constraint > .text-content:only-child h3 {
  73. margin-top: 18px;
  74. margin-left: 8px;
  75. }
  76.  
  77. #main-header ~ .width-constraint > .text-content:only-child > ul {
  78. margin-bottom: 48px;
  79. }
  80.  
  81. #main-header ~ .width-constraint > .text-content:only-child h3 ~ *:not(h3) {
  82. margin-left: 48px;
  83. }
  84.  
  85. /* Basic Styling for Submit Inputs and Buttons */
  86. input[type="submit"], button {
  87. font-family: 'Arial', sans-serif; /* Choose your preferred font-family */
  88. font-size: 10pt;
  89. color: #FFFFFF; /* White text color */
  90. background-color: #007BFF; /* Blue background color */
  91. border: none;
  92. border-radius: 5px; /* Rounded corners */
  93. padding: 8px 16px; /* Padding around text */
  94. cursor: pointer; /* Hand cursor on hover */
  95. transition: background-color 0.3s ease; /* Smooth background color transition */
  96. text-align: center; /* Center the text */
  97. outline: none; /* Remove browser default focus styles */
  98. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* A subtle shadow for depth */
  99. }
  100.  
  101. /* Hover effect */
  102. input[type="submit"]:hover, button:hover {
  103. background-color: #0056b3; /* A slightly darker blue on hover */
  104. }
  105.  
  106. /* Active (pressed) effect */
  107. input[type="submit"]:active, button:active {
  108. background-color: #004494; /* Even darker blue when button is pressed */
  109. }
  110.  
  111. /* Focus effect for accessibility */
  112. input[type="submit"]:focus, button:focus {
  113. box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* A blue glow when button is focused */
  114. }
  115.  
  116.  
  117. dd textarea {
  118.  
  119. border: 0;
  120. padding: 0;
  121. font-family: inherit;
  122. font-weight: 900;
  123. color: #a83710;
  124. font-size: inherit;
  125. appearance: none;
  126. border: none;
  127. outline: none; /* Removes the focus outline */
  128. resize: none; /* Prevents user resizing */
  129. }
  130.  
  131.  
  132.  
  133. /* For WebKit browsers like Safari and Chrome */
  134. dd textarea::-webkit-input-placeholder {
  135. color: inherit; /* Ensures the placeholder text color matches the textarea text color */
  136. }
  137.  
  138. /* Remove the inner shadow in WebKit renderings */
  139. dd textarea:focus,
  140. dd textarea:active {
  141. -webkit-box-shadow: none;
  142. box-shadow: none;
  143. }
  144.  
  145. [dark] section>ul>li>b:nth-of-type(odd){
  146. color: #80ecd3;
  147. }
  148.  
  149. [dark] section>ul>li>b:nth-of-type(even){
  150. color: #bfe6a0;
  151. }
  152.  
  153. `
  154.  
  155.  
  156. new Promise(r => {
  157.  
  158. if (document.readyState !== 'loading') {
  159. r();
  160. } else {
  161. window.addEventListener("DOMContentLoaded", r, false);
  162. }
  163. }).then(() => {
  164.  
  165.  
  166. for(const elm of document.querySelectorAll('.text-content dd, .text-content dd textarea')){
  167.  
  168. if( elm.nodeName !=='TEXTAREA' && elm.firstElementChild===null){
  169. let s = elm.textContent;
  170. if(s && typeof s ==='string' && s.includes('/users/') && s.includes('/webhook') && s.includes('https://')){
  171. let t = s.replace(/\/users\/(\d+)\-[^\/]+\//,'/users/$1/');
  172. t=t.replace(/https\:\/\/greasyfork\.org\/[-\w]+\/users\//, 'https://greasyfork.org/en/users/');
  173. elm.textContent = t;
  174. }
  175.  
  176. }else if(typeof elm.value ==='string'){
  177.  
  178. let s = elm.value;
  179. // Add a click event listener to the textarea
  180. elm.addEventListener('click', function() {
  181. if(window.getSelection()+"" === "")
  182. this.select();
  183. });
  184. elm.addEventListener('drag', function(evt){
  185. evt.preventDefault();
  186. });
  187. elm.addEventListener('drop', function(evt){
  188. evt.preventDefault();
  189. });
  190. elm.addEventListener('dragstart', function(evt){
  191. evt.preventDefault();
  192. });
  193. if(s && typeof s ==='string' && s.includes('/users/') && s.includes('/webhook') && s.includes('https://')){
  194. let t = s.replace(/\/users\/(\d+)\-[^\/]+\//,'/users/$1/');
  195. t=t.replace(/https\:\/\/greasyfork\.org\/[-\w]+\/users\//, 'https://greasyfork.org/en/users/');
  196. elm.value=t;
  197.  
  198.  
  199.  
  200. }
  201.  
  202.  
  203. }
  204. }
  205.  
  206. })
  207.  
  208.  
  209. })()