如何聚焦 YouTube 搜索建议项目？

Question

我目前有这个代码。单击鼠标中键时，将在新选项卡中打开 YouTube 搜索：

(function() {
    'use strict';
 
    var searchIcon = document.getElementById("search-icon-legacy");
    if (searchIcon) {
        searchIcon.addEventListener("mousedown", function(event) {
            event.preventDefault();
            var searchInput = document.getElementsByClassName("ytd-searchbox")[3].value.trim();
            if (event.which === 2 && searchInput) {
                window.open("https://www.youtube.com/results?search_query=" + encodeURIComponent(searchInput), "_blank");
            }
        });
    }
})();

图片

我现在尝试通过中键单击搜索建议来集中搜索建议，但我很挣扎，因为我不知道如何像搜索按钮一样使它们成为焦点，这是一个元素。

Answer 1

如果您想要使用鼠标中键单击在另一个选项卡中打开搜索建议之一，那么这应该可行：

function callback(event){
    if (!event.button === 1) return; // return if not middle button
    const ele = event.target.closest('div.sbqs_c');
    if (!ele) return; // guard incase it's wrong element because we are listening on `body` instead of `<ul>`
    const url = `https://www.youtube.com/results?search_query=${encodeURIComponent(ele.textContent)}`;
    window.open(url, '_blank');
}

document.body.addEventListener('auxclick', callback);

您可以将“auxclick”侦听器添加到特定元素（ul.sbsb_b）而不是主体，但您必须为此使用突变观察器，因为在用户与搜索交互之前建议框不会加载盒子。