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. })();