☰

Toggle HTML View of Additional Info (Greasyfork)

Adds a button to toggle the HTML view of the additional info div on Greasy Fork pages so yo can see the HTML that made that awesome looking Addition Info 😁

  1. // ==UserScript==
  2. // @name         Toggle HTML View of Additional Info (Greasyfork)
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.01
  5. // @description  Adds a button to toggle the HTML view of the additional info div on Greasy Fork pages so yo can see the HTML that made that awesome looking Addition Info 😁
  6. // @author       longkidkoolstar
  7. // @license      MIT
  8. // @icon         https://th.bing.com/th/id/R.324dedb79ac284c5289c6bcac9bd9177?rik=fGtU%2fR4d%2fTvQIw&pid=ImgRaw&r=0
  9. // @match        https://greasyfork.org/*
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Create the button element
  17.     const button = document.createElement('button');
  18.     button.textContent = 'Toggle HTML View';
  19.  
  20.     // Style the button to match the Greasy Fork style
  21.     button.style.backgroundColor = 'rgb(0, 82, 0)';
  22.     button.style.border = 'none';
  23.     button.style.color = '#fff';
  24.     button.style.padding = '8px 16px';
  25.     button.style.textAlign = 'center';
  26.     button.style.textDecoration = 'none';
  27.     button.style.display = 'inline-block';
  28.     button.style.fontSize = '16px';
  29.     button.style.marginBottom = '16px';
  30.     button.style.cursor = 'pointer';
  31.     button.style.fontFamily = 'inherit';
  32.  
  33.     // Get the additional info div
  34.     const additionalInfoDiv = document.querySelector('#additional-info.user-content');
  35.  
  36.     // Add the click event listener to the button
  37.     button.addEventListener('click', () => {
  38.         // Toggle the HTML view
  39.         if (additionalInfoDiv.dataset.htmlView === 'true') {
  40.             // Revert to the original content
  41.             additionalInfoDiv.dataset.htmlView = 'false';
  42.             additionalInfoDiv.innerHTML = additionalInfoDiv.dataset.originalContent;
  43.         } else {
  44.             // Save the original content and replace with the HTML view
  45.             additionalInfoDiv.dataset.htmlView = 'true';
  46.             additionalInfoDiv.dataset.originalContent = additionalInfoDiv.innerHTML;
  47.             additionalInfoDiv.textContent = additionalInfoDiv.innerHTML;
  48.         }
  49.     });
  50.  
  51.     // Add the button to the page
  52.     additionalInfoDiv.parentNode.insertBefore(button, additionalInfoDiv);
  53.  
  54. })();