如何使用Javascript选择Google搜索栏

Question

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

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

除未选择搜索栏外。我想念什么？

Answer 1

三个建议：

1. 看一下Google搜索HTML的结构方式，最好使用'name'属性，以便可靠地选择搜索输入。您要使用的选择器是[name='q']

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

3. 根据您要对Google搜索栏执行的操作，似乎需要将.focus()和.click()进行某种组合。刚刚在我的测试中，我只能通过单击焦点然后单击“后”来显示建议的下拉列表。

将这三个全部放在一起：

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

自然地，您可以根据需要调整对输入的操作，或者只使用document.querySelector行直接获取输入元素。

Caveat Emptor：我只能看到它可以在我刚刚在英国的台式机Chrome浏览器上获得的Google搜索用户界面上运行。由于Google可以随时更改代码的结构，因此无法保证它将来或在其他设备上都可以使用。