☰

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.

当前为 2023-12-04 提交的版本，查看 最新版本。

  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
  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.marginBottom = '10px';
  31.     input.style.backgroundColor = '#1B1B1B';
  32.     input.style.color = '#6F6F6F';
  33.     input.placeholder = 'The game name';
  34.     input.addEventListener('input', filterOptions);
  35.     select.parentNode.insertBefore(input, select);
  36.  
  37.     function filterOptions() {
  38.         var filter = input.value.trim().toLowerCase();
  39.         var regex = new RegExp(filter, 'i');
  40.  
  41.         // 清空 ul 元素，以便重新填充匹配的選項
  42.         ul.innerHTML = '';
  43.  
  44.         // 遍歷 select 的 options
  45.         Array.prototype.forEach.call(select.options, function(option) {
  46.             var text = option.text.trim().toLowerCase();
  47.             var match = text.match(regex);
  48.  
  49.             if (match) {
  50.                 // 創建 li 元素並設置相應的內容
  51.                 var li = document.createElement('li');
  52.                 li.textContent = option.text;
  53.                 li.style.display = 'block';
  54.                 li.style.width = '93%';
  55.                 li.style.height = '25px';
  56.                 li.style.padding = '10px 12px';
  57.                 li.style.fontSize = '14px';
  58.                 li.style.lineHeight = '1.42857143';
  59.                 li.style.color = '#555';
  60.                 li.style.backgroundColor = '#fff';
  61.                 li.style.border = '1px solid #ccc';
  62.                 li.style.borderRadius = '6px';
  63.                 li.style.boxShadow = 'inset 0 1px 1px rgba(0,0,0,.075)';
  64.                 li.style.transition = 'border-color ease-in-out .15s, box-shadow ease-in-out .15s, background-color 0.5s ease';
  65.                 li.style.marginBottom = '1px';
  66.  
  67.                 // 為 li 元素添加點擊事件監聽器，以在點擊時選擇對應的選項
  68.                 li.addEventListener('click', function() {
  69.                     select.value = option.value;
  70.                     input.value = option.text;
  71.                     ul.innerHTML = ''; // 清空列表
  72.                     input.focus(); // 重新聚焦在輸入框
  73.                 });
  74.  
  75.                 // 為 li 元素添加 hover 效果
  76.                 li.addEventListener('mouseover', function() {
  77.                     li.style.backgroundColor = '#7FFFD4';
  78.                 });
  79.  
  80.                 li.addEventListener('mouseout', function() {
  81.                     li.style.backgroundColor = '#fff';
  82.                 });
  83.  
  84.                 // 將 li 元素添加到 ul 中
  85.                 ul.appendChild(li);
  86.             }
  87.         });
  88.  
  89.     }
  90. })();