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-03-31 提交的版本,查看 最新版本

  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.0
  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. // @include https://steamcommunity.com/id/*/videos/add*
  10. // @include 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. var options = select.querySelectorAll('option');
  20.  
  21. var input = document.createElement('input');
  22. input.style.marginBottom = '10px';
  23. input.style.backgroundColor = '#1B1B1B'; // 設置背景顏色為灰色
  24. input.style.color = '#6F6F6F'; // 設置字體顏色為 #6F6F6F
  25. input.placeholder = 'The game name';
  26. input.addEventListener('input', filterOptions);
  27. select.parentNode.insertBefore(input, select);
  28.  
  29. function filterOptions() {
  30. var filter = input.value.trim().toLowerCase();
  31. var regex = new RegExp(filter, 'i');
  32. var visibleCount = 0;
  33.  
  34. Array.prototype.forEach.call(options, function(option) {
  35. var text = option.text.trim().toLowerCase();
  36. var match = text.match(regex);
  37. option.style.display = match ? '' : 'none';
  38. if (match) visibleCount++;
  39. });
  40.  
  41. // 如果可見選項少於 15,則將 select 元素的大小設置為可見選項的數量
  42. if (visibleCount < 15) {
  43. select.size = visibleCount;
  44. } else {
  45. select.size = '';
  46. }
  47. }
  48. })();