☰

GreasyFork: Better Webhook Info Page

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

当前为 2024-01-15 提交的版本，查看 最新版本。

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