☰

SWDD - Steam Workshop Description Downloader

Adds buttons to download Steam Workshop descriptions in .MD and .BBCode format.

  1. // ==UserScript==
  2.  
  3. // @name                SWDD - Steam Workshop Description Downloader
  4. // @namespace           https://criskkky.carrd.co/
  5. // @version             1.0.3
  6. // @description         Adds buttons to download Steam Workshop descriptions in .MD and .BBCode format.
  7. // @description:en      Adds buttons to download Steam Workshop descriptions in .MD and .BBCode format.
  8. // @description:es      Añade botones para descargar descripciones de la Workshop de Steam en formato .MD y .BBCode.
  9. // @description:pt      Adiciona botões para baixar descrições da Workshop do Steam em formato .MD e .BBCode.
  10. // @description:fr      Ajoute des boutons pour télécharger les descriptions de la Workshop Steam au format .MD et .BBCode.
  11. // @description:it      Aggiunge pulsanti per scaricare le descrizioni della Workshop di Steam in formato .MD e .BBCode.
  12. // @description:uk      Додає кнопки для завантаження описів Workshop Steam у форматі .MD та .BBCode.
  13. // @description:ru      Добавляет кнопки для загрузки описаний Workshop Steam в формате .MD и .BBCode.
  14. // @description:ro      Adaugă butoane pentru a descărca descrierile Workshop-ului Steam în format .MD și .BBCode.
  15.  
  16. // @author              https://criskkky.carrd.co/
  17. // @supportURL          https://github.com/criskkky/SWDD/issues
  18. // @homepageURL         https://github.com/criskkky/SWDD/
  19. // @icon                https://raw.githubusercontent.com/criskkky/SWDD/stable/static/icons/swdd.png
  20. // @copyright           https://github.com/criskkky/SWDD/tree/stable?tab=readme-ov-file#license
  21. // @license             https://github.com/criskkky/SWDD/tree/stable?tab=readme-ov-file#license
  22.  
  23. // @grant               none
  24. // @match               https://steamcommunity.com/sharedfiles/filedetails/*
  25. // ==/UserScript==
  26.  
  27. /*
  28. I RECOMMEND TAKE A LOOK TO SUPPORTED SYNTAX CONVERSIONS HERE:
  29. https://github.com/criskkky/SWDD?tab=readme-ov-file#supported-conversions
  30.  
  31. ANYWAYS, YOU CAN HELP ME TO IMPROVE THIS SCRIPT
  32. BY DOING A PULL REQUEST OR OPENING AN ISSUE ON GITHUB :D
  33. https://github.com/criskkky/SWDD
  34.  
  35. AVOID USING OFUSCATED CODE OR LIBS, PLEASE,
  36. OR YOUR PULL REQUEST WILL BE REJECTED. THANKS!
  37. */
  38.  
  39. // Function to download content as a file
  40. function downloadContent(content, fileName) {
  41.   var blob = new Blob([content], { type: 'text/plain' });
  42.   var link = document.createElement('a');
  43.   link.href = window.URL.createObjectURL(blob);
  44.   link.download = fileName;
  45.   link.click();
  46. }
  47.  
  48. function getDescription() {
  49.   var descriptionElement = document.querySelector('.workshopItemDescription');
  50.   if (descriptionElement) {
  51.     // Get the HTML content of the description
  52.     var descriptionHTML = descriptionElement.innerHTML;
  53.  
  54.     return descriptionHTML;
  55.   }
  56.   return null;
  57. }
  58.  
  59. function getHTMLtoBBC(descriptionHTML) {
  60.   // Custom replacements for Steam HTML to BBCode conversion
  61.   var bbReplacements = {
  62.     // Essential
  63.     '<br>': '\n',
  64.     '<span class="bb_link_host">([\\s\\S]*?)<\/span>': '',
  65.     '<span>([\\s\\S]*?)<\/span>': '$1',
  66.     // Headers
  67.     '<div class="bb_h1">([^<]+)<\/div>': '[h1]$1[/h1]\n',
  68.     '<div class="bb_h2">([^<]+)<\/div>': '[h2]$1[/h2]\n',
  69.     '<div class="bb_h3">([^<]+)<\/div>': '[h3]$1[/h3]\n',
  70.     // Font styling
  71.     '<b>([\\s\\S]*?)<\/b>': '[b]$1[/b]',
  72.     '<u>([\\s\\S]*?)<\/u>': '[u]$1[/u]',
  73.     '<i>([\\s\\S]*?)<\/i>': '[i]$1[/i]',
  74.     // Font formatting
  75.     '<span class="bb_strike">([\\s\\S]*?)<\/span>': '[strike]$1[/strike]',
  76.     '<span class="bb_spoiler">([\\s\\S]*?)<\/span>': '[spoiler]$1[/spoiler]',
  77.     '<a[^>]*class="bb_link"[^>]*href="([^"]+)"(?:[^>]*target="([^"]+)")?(?:[^>]*rel="([^"]+)")?[^>]*>([\\s\\S]*?)<\/a>': '[url=$1]$4[/url]',
  78.     // Lists
  79.     '<ul class="bb_ul">([\\s\\S]*?)<\/ul>': '\n[list]\n$1\n[/list]',
  80.     '<li>([\\s\\S]*?)<\/li>': '[*]$1',
  81.     '<ol>([\\s\\S]*?)<\/ol>': '\n[olist]\n$1\n[/olist]',
  82.     // Font formatting
  83.     '<div class="bb_code">([\\s\\S]*?)<\/div>': '\n[code]\n$1[/code]\n',
  84.     // TODO: Fix noparse. It's not working properly. Do PR if you can fix it.
  85.     // Tables
  86.     // TODO: Fix bb_table. It's not working properly. Do PR if you can fix it.
  87.     '<div class="bb_table_tr">([\\s\\S]*?)<\/div>': '\n[tr]\n$1\n[/tr]\n',
  88.     '<div class="bb_table_th">([\\s\\S]*?)<\/div>': '[th]$1[/th]',
  89.     '<div class="bb_table_td">([\\s\\S]*?)<\/div>': '[td]$1[/td]',
  90.     // Images
  91.     '<img src="([^"]+)"[^>]*>': '[img]$1[/img]',
  92.     // Others
  93.     '<hr>': '[hr]',
  94.     '<blockquote class="bb_blockquote">([\\s\\S]*?)</blockquote>' : '[quote]$1[/quote]',
  95.   };
  96.  
  97.   // Apply custom replacements
  98.   for (var pattern in bbReplacements) {
  99.     var regex = new RegExp(pattern, 'gi');
  100.     descriptionHTML = descriptionHTML.replace(regex, bbReplacements[pattern]);
  101.   }
  102.  
  103.   // Clear unsupported tags
  104.   descriptionHTML = descriptionHTML.replace(/<(?!\/?(h1|h2|h3|b|u|i|strike|spoiler|ul|li|ol|code|tr|th|td|img|hr|blockquote|\/blockquote))[^>]+>/g, '');
  105.  
  106.   var bbcodeContent = descriptionHTML;
  107.  
  108.   return bbcodeContent;
  109. }
  110.  
  111. function getHTMLtoMD(descriptionHTML) {
  112.   // Custom replacements for Steam HTML to Markdown conversion
  113.   var mdReplacements = {
  114.     // Essential
  115.     '<br>': '\n',
  116.     '<span class="bb_link_host">([\\s\\S]*?)<\/span>': '',
  117.     '<span>([\\s\\S]*?)<\/span>': '$1',
  118.     // Headers
  119.     '<div class="bb_h1">([\\s\\S]*?)<\/div>': '# $1\n',
  120.     '<div class="bb_h2">([\\s\\S]*?)<\/div>': '## $1\n',
  121.     '<div class="bb_h3">([\\s\\S]*?)<\/div>': '### $1\n',
  122.     // Font styling
  123.     '<b>([\\s\\S]*?)<\/b>': '**$1**',
  124.     '<u>([\\s\\S]*?)<\/u>': '__$1__',
  125.     '<i>([\\s\\S]*?)<\/i>': '*$1*',
  126.     // Font formatting
  127.     '<span class="bb_strike">([\\s\\S]*?)<\/span>': '~~$1~~',
  128.     '<span class="bb_spoiler">([\\s\\S]*?)<\/span>': '<details><summary>Spoiler</summary>$1</details>',
  129.     '<a[^>]*class="bb_link"[^>]*href="([^"]+)"(?:[^>]*target="([^"]+)")?(?:[^>]*rel="([^"]+)")?[^>]*>([\\s\\S]*?)<\/a>': '[$4]($1)',
  130.     // Lists
  131.     '<li>([\\s\\S]*?)<\/li>': '* $1',
  132.     '<ol>([\\s\\S]*?)<\/ol>': (match, p1, offset, string) => {
  133.       const lines = p1.trim().split('\n');
  134.       let currentIndex = 1;
  135.     
  136.       const formattedLines = lines.map((line, index) => {
  137.         // Check if the current line starts a new ordered list
  138.         const isNewList = line.trim().startsWith('<li>');
  139.     
  140.         // If it's a new list, reset currentIndex to 1
  141.         if (isNewList) {
  142.           currentIndex = 1;
  143.         }
  144.     
  145.         // Replace asterisks (*) or hyphens (-) with incremental numbers
  146.         return line.replace(/^\s*[\*\-]/, () => {
  147.           const updatedNumber = currentIndex++;
  148.           return `${updatedNumber}.`;
  149.         });
  150.       });
  151.     
  152.       return `<ol>\n${formattedLines.join('\n')}\n</ol>`;
  153.     },        
  154.     // Font formatting
  155.     '<div class="bb_code">([\\s\\S]*?)<\/div>': '\n```\n$1\n```\n',
  156.     // TODO: Fix noparse. It's not working properly. Do PR if you can fix it.
  157.     // Tables
  158.     // TODO: Fix bb_table. It's not working properly. Do PR if you can fix it.
  159.     // TODO: Fix bb_table_tr. It's not working properly. Do PR if you can fix it.
  160.     // TODO: Fix bb_table_th. It's not working properly. Do PR if you can fix it.
  161.     // TODO: Fix bb_table_td. It's not working properly. Do PR if you can fix it.
  162.     // Images
  163.     '<img src="([^"]+)"[^>]*>': '![image]($1)',
  164.     // Others
  165.     '<hr>': '---',
  166.     '<blockquote class="bb_blockquote">([\\s\\S]*?)</blockquote>' : '> $1',
  167.   };
  168.  
  169.   // Apply custom replacements
  170.   for (var pattern in mdReplacements) {
  171.     var regex = new RegExp(pattern, 'gi');
  172.     descriptionHTML = descriptionHTML.replace(regex, mdReplacements[pattern]);
  173.   }
  174.  
  175.   // Clear unsupported tags except for <details><summary>Spoiler</summary>$1</details>
  176.   descriptionHTML = descriptionHTML.replace(/<(?!details><summary>Spoiler<\/summary>\$1<\/details>)[^>]+>/g, '');
  177.  
  178.   var markdownContent = descriptionHTML;
  179.  
  180.   return markdownContent;
  181. }
  182.  
  183. function insertButton(downloadButton) {
  184.   var fixedMargin = document.querySelector('.game_area_purchase_margin');
  185.   if (fixedMargin) {
  186.     // Better alignment ...
  187.     fixedMargin.style.marginBottom = 'auto';
  188.     // Find the element after which the button should be inserted
  189.     var targetElement = document.querySelector('.workshopItemDescription');
  190.     if (targetElement) {
  191.       // Insert the button after the target element
  192.       targetElement.parentNode.insertBefore(downloadButton, targetElement.nextSibling);
  193.     }
  194.   }
  195. }
  196. // Create go to repo button
  197. function createGoToRepoButton() {
  198.   var goToRepoButton = document.createElement('a');
  199.   goToRepoButton.innerHTML = '<img src="https://raw.githubusercontent.com/criskkky/SWDD/stable/static/icons/github_line.png" style="vertical-align: middle; margin-right: 5px; margin-left: -4px; max-width: 20px; max-height: 20px;">Repository';
  200.   goToRepoButton.classList.add('btn_darkblue_white_innerfade', 'btn_border_2px', 'btn_medium');
  201.   goToRepoButton.style.marginBottom = '5px';
  202.   goToRepoButton.style.marginRight = '5px';
  203.   goToRepoButton.style.padding = '5px 10px';
  204.   goToRepoButton.style.height = '21px';
  205.   goToRepoButton.style.fontSize = '14px';
  206.   goToRepoButton.href = 'https://github.com/criskkky/SWDD';
  207.   goToRepoButton.target = '_blank';
  208.  
  209.   insertButton(goToRepoButton);
  210. }
  211.  
  212. // Create the download button for Markdown
  213. function createDownloadButtonMD() {
  214.   var downloadButton = document.createElement('button');
  215.   downloadButton.innerHTML = '<img src="https://raw.githubusercontent.com/criskkky/SWDD/adb175e273c563b3ffad4e81e7afe7f76449fd04/static/icons/cloud-download-white.svg" style="vertical-align: middle; margin-right: 5px; margin-left: -6px; max-width: 20px; max-height: 20px;">Download .MD';
  216.   downloadButton.classList.add('btn_green_white_innerfade', 'btn_border_2px', 'btn_medium');
  217.   downloadButton.style.marginBottom = '5px';
  218.   downloadButton.style.marginRight = '5px';
  219.   downloadButton.style.padding = '5px 10px';
  220.   downloadButton.style.height = '34.43px';
  221.   downloadButton.style.fontSize = '14px';
  222.   downloadButton.addEventListener('click', function () {
  223.     var markdownContent = getHTMLtoMD(getDescription());
  224.     if (markdownContent) {
  225.       downloadContent(markdownContent, 'WorkshopDownload.md');
  226.     } else {
  227.       alert('No content found in Markdown format.');
  228.     }
  229.   });
  230.  
  231.   insertButton(downloadButton);
  232. }
  233.  
  234. // Create the download button for BBCode
  235. function createDownloadButtonBBC() {
  236.   var downloadButton = document.createElement('button');
  237.   downloadButton.innerHTML = '<img src="https://raw.githubusercontent.com/criskkky/SWDD/adb175e273c563b3ffad4e81e7afe7f76449fd04/static/icons/cloud-download-white.svg" style="vertical-align: middle; margin-right: 5px; margin-left: -6px; max-width: 20px; max-height: 20px;">Download .BBCode';
  238.   downloadButton.classList.add('btn_green_white_innerfade', 'btn_border_2px', 'btn_medium');
  239.   downloadButton.style.marginBottom = '5px';
  240.   downloadButton.style.marginRight = '5px';
  241.   downloadButton.style.padding = '5px 10px';
  242.   downloadButton.style.height = '34.43px';
  243.   downloadButton.style.fontSize = '14px';
  244.   downloadButton.addEventListener('click', function () {
  245.     var bbcodeContent = getHTMLtoBBC(getDescription());
  246.     if (bbcodeContent) {
  247.       downloadContent(bbcodeContent, 'WorkshopDownload.bbcode');
  248.     } else {
  249.       alert('No content found in BBCode format.');
  250.     }
  251.   });
  252.  
  253.   insertButton(downloadButton);
  254. }
  255.  
  256. // Execute the functions when the page loads
  257. window.addEventListener('load', function () {
  258.   createGoToRepoButton();
  259.   createDownloadButtonMD();
  260.   createDownloadButtonBBC();
  261. });