☰

SWDD - Steam Workshop Description Downloader

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

2024/01/12のページです。最新版はこちら。

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