时间戳

首页 > 解决方案 > 如何使用 Javascript 选择 Google 搜索栏

javascript - 如何使用 Javascript 选择 Google 搜索栏

问题描述

我正在使用 Chrome 扩展“快捷键”来编写快捷方式可执行的 Javascript 代码，该代码在浏览 Google 搜索时选择 Google 搜索栏。重要提示：我不是要选择 Chrome 的地址栏，而是选择 Google 网站上的实际搜索栏。我使用“inspect element”找到了搜索栏元素，并发现它位于类“a4bIc”的 div 中。搜索栏元素的第一个标签是“输入”。所以我的代码是这样的：

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

除了它不选择搜索栏。我错过了什么？

标签： javascripthtmlgoogle-chromegoogle-chrome-extensioncss-selectors

解决方案

三个建议：

  1. 查看 google 搜索 HTML 的结构方式，您最好使用“名称”属性以可靠地选择搜索输入。您要使用的选择器是[name='q']

  2. querySelectorAll返回一个NodeList对象。如果我没记错的话，那么您不能NodeList使用 ID 访问 a 的成员（这与非常相似的HTMLCollection对象形成对比。别担心，如果它看起来令人困惑，那是因为它是！）。对于像这样的简单查找，我建议使用querySelector它将直接返回第一个选定的节点。

  3. 根据您想要对 google 搜索栏执行的操作，您似乎需要对.focus()和进行某种组合.click()。在我刚才的测试中，我只能通过触发焦点然后单击之后来获得建议的下拉列表。

将所有这三个放在一起：

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

当然，您可以根据自己的需要调整对输入的处理方式，或者直接使用该document.querySelector行获取输入元素。

告诫 Emptor：我只能看到这在我刚刚收到的谷歌搜索 UI 上，在英国，在桌面 Chrome 上有效。不能保证它在未来或在不同的设备上都能正常工作，因为谷歌可以随时更改他们认为合适的代码结构。

推荐阅读