☰

GreasyFork: Better Webhook Info Page

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

目前为 2023-09-21 提交的版本。查看 最新版本。

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