Как выбрать панель поиска Google с помощью Javascript

Question

Я использую расширение Chrome "Shortkeys" для написания исполняемого ярлыком кода Javascript, который выбирает панель поиска Google при просмотре поисковых запросов Google. Важно: я не пытаюсь выбрать адресную строку Chrome, но фактическую строку поиска на веб-сайте Google. Я нашел элемент панели поиска с помощью «inspect element» и обнаружил, что он находится внутри div с классом «a4bIc». Первый тег элемента панели поиска - «вход». Итак, мой код такой:

var x = document.querySelectorAll("div.a4bIc input")[document.selectedResultId]

За исключением того, что он не выбирает панель поиска. Чего мне не хватает?

Answer 1

Три предложения:

1. Глядя на то, как структурирован поисковый HTML-код Google, похоже, что вам было бы лучше использовать свойство name, чтобы надежно выбирать входные данные для поиска. Селектор, который вы хотите использовать: [name='q']

2. querySelectorAll возвращает объект NodeList. Если я не ошибаюсь, вы не можете получить доступ к элементу NodeList с помощью идентификатора (это контрастирует с очень похожим объектом HTMLCollection. Не волнуйтесь, если это кажется запутанным, это потому, что это так!) , Для простого поиска, подобного этому, я предлагаю использовать querySelector, который просто вернет первый выбранный узел напрямую.

3. В зависимости от того, что вы хотите сделать с панелью поиска Google, вам, вероятно, потребуется сделать какое-то сочетание .focus() и .click(). В моем тесте только сейчас я смог отобразить выпадающий список предложений только путем фокусировки, а затем щелкнуть после.

Соединение всех трех:

function openGoogleSearchUI(){
  let searchInput = document.querySelector("[name='q']");
  searchInput.focus();
  searchInput.click();
}

Естественно, вы можете адаптировать то, что вы делаете, к вводу, как считаете нужным, или просто использовать строку document.querySelector, чтобы напрямую получить элемент ввода.

Caveat Emptor: Я вижу только то, что это работает на пользовательском интерфейсе поиска Google, который я получил только сейчас, в Великобритании, на настольном Chrome. Нет гарантий, что он будет работать так же в будущем или с другого устройства, так как Google может изменить структуру кода так, как они считают нужным в любое время.