GreasyFork: Better Webhook Info Page

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

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey, το Greasemonkey ή το Violentmonkey για να εγκαταστήσετε αυτόν τον κώδικα.

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey ή το Violentmonkey για να εγκαταστήσετε αυτόν τον κώδικα.

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey ή το Violentmonkey για να εγκαταστήσετε αυτόν τον κώδικα.

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey ή το Userscripts για να εγκαταστήσετε αυτόν τον κώδικα.

You will need to install an extension such as Tampermonkey to install this script.

Θα χρειαστεί να εγκαταστήσετε μια επέκταση διαχείρισης κώδικα χρήστη για να εγκαταστήσετε αυτόν τον κώδικα.

(Έχω ήδη έναν διαχειριστή κώδικα χρήστη, επιτρέψτε μου να τον εγκαταστήσω!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Έχω ήδη έναν διαχειριστή στυλ χρήστη, επιτρέψτε μου να τον εγκαταστήσω!)

// ==UserScript==
// @name        GreasyFork: Better Webhook Info Page
// @namespace   UserScripts
// @match       https://greasyfork.org/*
// @grant       none
// @version     0.1.7
// @author      CY Fung
// @license     MIT
// @description 9/21/2023, 3:18:06 PM
// @run-at      document-end
// ==/UserScript==

(()=>{

  if(!location.pathname.includes('/users/webhook-info')) return;

  document.head.appendChild(document.createElement('style')).textContent=`

    #main-header ~ .width-constraint > .text-content:only-child > ul li {
      font-size: 0.88rem;
    }

    #main-header ~ .width-constraint > .text-content:only-child > ul a:first-child {
      display: block;
      font-size: 1rem;
      margin-top: 4px;
      text-decoration: none;
    }

    #main-header ~ .width-constraint > .text-content:only-child > ul a ~ a {
      color: #383855;
      text-decoration: none;
    }

    [dark] #main-header ~ .width-constraint > .text-content:only-child > ul a ~ a {
      color: #9898c9;
    }

    #main-header ~ .width-constraint > .text-content:only-child dt {
      font-weight: bold;
      color: #2376a0;
    }

    #main-header ~ .width-constraint > .text-content:only-child dd textarea {
      flex-grow: 1;
      height: 5.2rem;
      margin: 0px;
      padding: 8px;
      box-sizing: border-box;
    }

    #main-header ~ .width-constraint > .text-content:only-child dd form {
      display: flex;
      flex-direction: row;
      align-items: end;
      column-gap: 24px;
      row-gap: 8px;
      flex-wrap: wrap;
      max-width: calc(100% - 48px);
    }

    @media all and (min-width:300px) {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: end;
      column-gap: 24px;
      max-width: calc(100% - 48px);
    }


    #main-header ~ .width-constraint > .text-content:only-child h3 {
      margin-top: 18px;
      margin-left: 8px;
    }

    #main-header ~ .width-constraint > .text-content:only-child > ul {
      margin-bottom: 48px;
    }

    #main-header ~ .width-constraint > .text-content:only-child h3 ~ *:not(h3) {
      margin-left: 48px;
    }

    /* Basic Styling for Submit Inputs and Buttons */
    input[type="submit"], button {
      font-family: 'Arial', sans-serif;     /* Choose your preferred font-family */
      font-size: 10pt;
      color: #FFFFFF;     /* White text color */
      background-color: #007BFF;     /* Blue background color */
      border: none;
      border-radius: 5px;     /* Rounded corners */
      padding: 8px 16px;     /* Padding around text */
      cursor: pointer;     /* Hand cursor on hover */
      transition: background-color 0.3s ease;     /* Smooth background color transition */
      text-align: center;     /* Center the text */
      outline: none;     /* Remove browser default focus styles */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);     /* A subtle shadow for depth */
    }

    /* Hover effect */
    input[type="submit"]:hover, button:hover {
      background-color: #0056b3;     /* A slightly darker blue on hover */
    }

    /* Active (pressed) effect */
    input[type="submit"]:active, button:active {
      background-color: #004494;     /* Even darker blue when button is pressed */
    }

    /* Focus effect for accessibility */
    input[type="submit"]:focus, button:focus {
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);     /* A blue glow when button is focused */
    }


    dd textarea {

      border: 0;
      padding: 0;
      font-family: inherit;
      font-weight: 900;
      color: #a83710;
      font-size: inherit;
      appearance: none;
      border: none;
      outline: none; /* Removes the focus outline */
      resize: none; /* Prevents user resizing */
    }



/* For WebKit browsers like Safari and Chrome */
dd textarea::-webkit-input-placeholder {
    color: inherit; /* Ensures the placeholder text color matches the textarea text color */
}

/* Remove the inner shadow in WebKit renderings */
dd textarea:focus,
dd textarea:active {
    -webkit-box-shadow: none;
    box-shadow: none;
}

[dark] section>ul>li>b:nth-of-type(odd){
    color: #80ecd3;
}

[dark] section>ul>li>b:nth-of-type(even){
    color: #bfe6a0;
}

  `


  new Promise(r => {

    if (document.readyState !== 'loading') {
      r();
    } else {
      window.addEventListener("DOMContentLoaded", r, false);
    }
  }).then(() => {


    for(const elm of document.querySelectorAll('.text-content dd, .text-content dd textarea')){

      if( elm.nodeName !=='TEXTAREA' && elm.firstElementChild===null){
        let s = elm.textContent;
        if(s && typeof s ==='string' && s.includes('/users/') && s.includes('/webhook') && s.includes('https://')){
          let t = s.replace(/\/users\/(\d+)\-[^\/]+\//,'/users/$1/');
          t=t.replace(/https\:\/\/greasyfork\.org\/[-\w]+\/users\//, 'https://greasyfork.org/en/users/');
          elm.textContent = t;
        }

      }else if(typeof elm.value ==='string'){

        let s = elm.value;
        // Add a click event listener to the textarea
        elm.addEventListener('click', function() {
          if(window.getSelection()+"" === "")
            this.select();
        });
        elm.addEventListener('drag', function(evt){
          evt.preventDefault();
        });
        elm.addEventListener('drop', function(evt){
          evt.preventDefault();
        });
        elm.addEventListener('dragstart', function(evt){
          evt.preventDefault();
        });
        if(s && typeof s ==='string' && s.includes('/users/') && s.includes('/webhook') && s.includes('https://')){
          let t = s.replace(/\/users\/(\d+)\-[^\/]+\//,'/users/$1/');
          t=t.replace(/https\:\/\/greasyfork\.org\/[-\w]+\/users\//, 'https://greasyfork.org/en/users/');
          elm.value=t;



        }


      }
    }

  })


})()