☰

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.1
  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.       min-height: 3rem;
  43.       margin: 0px;
  44.       padding: 8px;
  45.     }
  46.  
  47.     #main-header ~ .width-constraint > .text-content:only-child dd form {
  48.       display: flex;
  49.       flex-direction: row;
  50.       align-items: end;
  51.       column-gap: 24px;
  52.       row-gap: 8px;
  53.       flex-wrap: wrap;
  54.       max-width: calc(100% - 48px);
  55.     }
  56.  
  57.     @media all and (min-width:300px) {
  58.       display: flex;
  59.       flex-direction: row;
  60.       flex-wrap: nowrap;
  61.       align-items: end;
  62.       column-gap: 24px;
  63.       max-width: calc(100% - 48px);
  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.   `
  112.  
  113.  
  114.   new Promise(r => {
  115.  
  116.     if (document.readyState !== 'loading') {
  117.       r();
  118.     } else {
  119.       window.addEventListener("DOMContentLoaded", r, false);
  120.     }
  121.   }).then(() => {
  122.  
  123.  
  124.     for(const elm of document.querySelectorAll('.text-content dd, .text-content dd textarea')){
  125.  
  126.       if(elm.firstElementChild===null){
  127.         let s = elm.textContent;
  128.         if(s && typeof s ==='string' && s.includes('/users/') && s.includes('/webhook') && s.includes('https://')){
  129.           let t = s.replace(/\/users\/(\d+)\-[^\/]+\//,'/users/$1/');
  130.           t=t.replace(/https\:\/\/greasyfork\.org\/[-\w]+\/users\//, 'https://greasyfork.org/en/users/');
  131.           elm.textContent = t;
  132.         }
  133.  
  134.       }else if(typeof elm.value ==='string'){
  135.  
  136.         let s = elm.value;
  137.  
  138.  
  139.         if(s && typeof s ==='string' && s.includes('/users/') && s.includes('/webhook') && s.includes('https://')){
  140.           let t = s.replace(/\/users\/(\d+)\-[^\/]+\//,'/users/$1/');
  141.           t=t.replace(/https\:\/\/greasyfork\.org\/[-\w]+\/users\//, 'https://greasyfork.org/en/users/');
  142.           elm.value=t;
  143.  
  144.  
  145.         }
  146.  
  147.       }
  148.     }
  149.  
  150.   })
  151.  
  152.  
  153. })()