☰

Steam Game Selector for Uploading Videos

When uploading a YouTube video on the Steam platform, you can quickly find the corresponding game by using the filtering option.

  1. // ==UserScript==
  2. // @name               Steam Game Selector for Uploading Videos
  3. // @name:zh-TW         Steam 影片上傳遊戲篩選框
  4. // @namespace          https://steamcommunity.com/id/ani20168/
  5. // @version            1.1.1
  6. // @description        When uploading a YouTube video on the Steam platform, you can quickly find the corresponding game by using the filtering option.
  7. // @description:zh-tw  在Steam平台上傳youtube影片時，可以透過篩選框快速尋找對應的遊戲
  8. // @author             ani20168
  9. // @match              https://steamcommunity.com/id/*/videos/add*
  10. // @match              https://steamcommunity.com/profiles/*/videos/add*
  11. // @icon               https://www.google.com/s2/favicons?sz=64&domain=steamcommunity.com
  12. // @grant              none
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.     var select = document.querySelector('#app_assoc_select');
  19.  
  20.     // 創建一個新的 ul 元素
  21.     var ul = document.createElement('ul');
  22.     ul.classList.add('custom-list');
  23.     ul.classList.add('form-control-list');
  24.     ul.style.overflowY = 'auto';
  25.     ul.style.maxHeight = '150px';
  26.     ul.style.paddingInlineStart = '0px';
  27.     select.parentNode.insertBefore(ul, select.nextSibling);
  28.  
  29.     var input = document.createElement('input');
  30.     input.style.display = 'block';
  31.     input.style.width = '420px';
  32.     input.style.height = '25px';
  33.     input.style.padding = '10px 12px';
  34.     input.style.fontSize = '16px';
  35.     input.style.lineHeight = '1.42857';
  36.     input.style.color = '#cacaca';
  37.     input.style.backgroundColor = '#1b1b1b';
  38.     input.style.border = '2px solid #6F6F6F';
  39.     input.style.borderRadius = '6px';
  40.     input.style.boxShadow = 'rgba(0, 0, 0, 0.075) 0px 1px 1px inset';
  41.     input.style.transition = 'border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s';
  42.     input.style.marginBottom = '10px';
  43.     input.placeholder = 'enter game name here...';
  44.     input.addEventListener('input', filterOptions);
  45.     select.parentNode.insertBefore(input, select);
  46.  
  47.     // inputbox的focus效果
  48.     input.addEventListener('focus', function() {
  49.         input.style.outline = 'none';
  50.         input.style.borderColor = '#7FFFD4';
  51.     });
  52.  
  53.     input.addEventListener('blur', function() {
  54.         input.style.borderColor = '#6F6F6F';
  55.     });
  56.  
  57.     function filterOptions() {
  58.         var filter = input.value.trim().toLowerCase();
  59.         var regex = new RegExp(filter, 'i');
  60.  
  61.         // 清空 ul 元素，以便重新填充匹配的選項
  62.         ul.innerHTML = '';
  63.  
  64.         // 遍歷 select 的 options
  65.         Array.prototype.forEach.call(select.options, function(option) {
  66.             var text = option.text.trim().toLowerCase();
  67.             var match = text.match(regex);
  68.  
  69.             if (match) {
  70.                 // 創建 li 元素並設置相應的內容
  71.                 var li = document.createElement('li');
  72.                 li.textContent = option.text;
  73.                 li.style.display = 'block';
  74.                 li.style.width = '93%';
  75.                 li.style.height = '25px';
  76.                 li.style.padding = '10px 12px';
  77.                 li.style.fontSize = '14px';
  78.                 li.style.lineHeight = '1.42857143';
  79.                 li.style.color = '#555';
  80.                 li.style.backgroundColor = '#fff';
  81.                 li.style.border = '1px solid #ccc';
  82.                 li.style.borderRadius = '6px';
  83.                 li.style.boxShadow = 'inset 0 1px 1px rgba(0,0,0,.075)';
  84.                 li.style.transition = 'border-color ease-in-out .15s, box-shadow ease-in-out .15s, background-color 0.5s ease';
  85.                 li.style.marginBottom = '1px';
  86.  
  87.                 // 為 li 元素添加點擊事件監聽器，以在點擊時選擇對應的選項
  88.                 li.addEventListener('click', function() {
  89.                     select.value = option.value;
  90.                     input.value = option.text;
  91.                     ul.innerHTML = ''; // 清空列表
  92.                     input.focus(); // 重新聚焦在輸入框
  93.                 });
  94.  
  95.                 // 為 li 元素添加 hover 效果
  96.                 li.addEventListener('mouseover', function() {
  97.                     li.style.backgroundColor = '#7FFFD4';
  98.                 });
  99.  
  100.                 li.addEventListener('mouseout', function() {
  101.                     li.style.backgroundColor = '#fff';
  102.                 });
  103.  
  104.                 // 將 li 元素添加到 ul 中
  105.                 ul.appendChild(li);
  106.             }
  107.         });
  108.  
  109.     }
  110. })();