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

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Steam Game Selector for Uploading Videos
// @name:zh-TW   Steam 影片上傳遊戲篩選框
// @namespace    https://steamcommunity.com/id/ani20168/
// @version      1.0
// @description  When uploading a YouTube video on the Steam platform, you can quickly find the corresponding game by using the filtering option.
// @description:zh-tw 在Steam平台上傳youtube影片時,可以透過篩選框快速尋找對應的遊戲
// @author       ani20168
// @include      https://steamcommunity.com/id/*/videos/add*
// @include      https://steamcommunity.com/profiles/*/videos/add*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=steamcommunity.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var select = document.querySelector('#app_assoc_select');
    var options = select.querySelectorAll('option');

    var input = document.createElement('input');
    input.style.marginBottom = '10px';
    input.style.backgroundColor = '#1B1B1B'; // 設置背景顏色為灰色
    input.style.color = '#6F6F6F'; // 設置字體顏色為 #6F6F6F
    input.placeholder = 'The game name';
    input.addEventListener('input', filterOptions);
    select.parentNode.insertBefore(input, select);

    function filterOptions() {
        var filter = input.value.trim().toLowerCase();
        var regex = new RegExp(filter, 'i');
        var visibleCount = 0;

        Array.prototype.forEach.call(options, function(option) {
            var text = option.text.trim().toLowerCase();
            var match = text.match(regex);
            option.style.display = match ? '' : 'none';
            if (match) visibleCount++;
        });

        // 如果可見選項少於 15,則將 select 元素的大小設置為可見選項的數量
        if (visibleCount < 15) {
            select.size = visibleCount;
        } else {
            select.size = '';
        }
    }
})();