如何从 Chrome 扩展程序中查找文本框

【问题标题】：How to find text-boxes from a Chrome extension如何从 Chrome 扩展程序中查找文本框
【发布时间】：2018-11-29 00:31:53
【问题描述】：

我正在制作一个 Chrome 扩展程序，我需要它来查找网页上的任何表单文本框。

我首先尝试在我的内容脚本中这样做：

document.getElementsByTag("text");

但它总是返回undefined，所以我假设它只搜索my_app.html。

我的第一个问题是我应该使用什么函数：GetElmentsByTag，按名称、按类名，还是与其他函数一起使用？

我的第二个问题是我需要搜索哪个 JavaScript 文件？其他有类似问题的论坛说，您需要在另一个文件（如背景或弹出窗口）中访问 DOM，然后将其与消息和侦听器一起发送到内容脚本。

【问题讨论】：

【解决方案1】：

首先，您正在调用一个不存在的函数。您可能指的是Document.getElementsByTagName() 或Document.querySelectorAll()，如您在此处看到的：

console.log(document.getElementsByTagName);
console.log(document.querySelectorAll);
console.log(document.getElementsByTag);

另外，您的选择器错误：没有<text> HTML 元素。

如果您想要所有 <input> 字段，以及任何 type 属性（text、password、search、radio、checkbox，...），那么您可以使用其中任何一个：

document.getElementsByTagName('input');

document.querySelectorAll('input');

如果你只想要特定类型的<input>s，比如说text，你可以这样做：

document.querySelectorAll('input[type="text"]')

最后，如果您想要不同类型的<input>s，您可以将多个选择器与, 连接：

document.querySelectorAll('input[type="text"], input[type="password"]')

【讨论】：