Google chrome Chrome扩展：DOM遍历

我想写一个Chrome扩展来查看它所在页面的HTML，如果它找到了eg

，那么它会在弹出窗口中以HTML列表的形式输出，“这个页面有一个友好的div”，如果它找到eg

，那么它会输出“这个家伙很奇怪”

换句话说，在DOM中搜索特定的内容，并根据找到的内容在弹出窗口中输出消息

---

我看过访问dom的方法，但恐怕我不太懂。然后当然会遍历dom，可能会使用正则表达式和条件语句

stackoverflow的问题是如何让扩展与DOM对话。有很多种方法，一种是通过chrome.tabs.executeScript，另一种是通过消息传递，正如我在那个问题中解释的那样

回到您的问题，您可以使用XPath在DOM中进行搜索。它相当强大。例如，您说要搜索

，您可以这样做：

var nodes = document.evaluate("//div[@id='hello']", document, null, 
                               XPathResult.ANY_TYPE, null)
var resultNode = nodes.iterateNext()
if (resultNode) {
  // Found the first node. Output its contents.
  alert(resultNode.innerHTML);
}

现在来看第二个例子，同样的事情。。

您可以使用在Chrome中非常有效的方法，并且您可以使您的查询变得简单，例如查找您想要的节点，甚至使细节变得复杂。您可以查询任何节点，然后根据需要进行后期处理

---

希望这有帮助。记住，所有这些都应该在Chrome扩展中的一个范围内。如果你想让你的扩展与之沟通，你可以像我在另一篇文章中解释的那样使用。因此，基本上，在popup.html中，您向内容脚本发送请求以查找文本。您的内容脚本将从其回调返回响应。要发送请求，您应该在内容脚本中使用和。您可以侦听并处理该请求。正如我在另一篇文章中解释的那样。

除非问题比我想象的更复杂，为什么不使用jQuery或其他方便的JSAPI来解决这个问题呢？这就是它们的用途——轻松地遍历dom。您可以将jquery和将要使用它的脚本注入清单中所需的页面：

"content_scripts": [ {
    "js": [ "jquery.js", "script.js" ],
    "matches": [ "http://*/*", "https://*/*" ]
}]

---

不要使用正则表达式解析HTML。

无法保持

有了它的方式。。。虽然可以使用XPath，但我认为querySelector在功能上类似，但也比较简单

只需将CSS选择器作为字符串传递，它就会返回与选择器匹配的元素。有点像使用jQuery而不需要加载jQuery库

以下是您将如何使用它：

var query = document.querySelector("div#hello");
if (query) {
    alert("This page has a friendly div");
}

var query = document.querySelectorAll("a[href='http://bananas.com']");
for (var i = 0; i < query.length; i += 1) {
    if (query[i].textContent === "I am married to a banana") {
        alert("This guy is weird.");
        return;
    }
}

var query=document.querySelector（“div#hello”）；
如果（查询）{
警告（“此页面有一个友好的div”）；
}
var query=document.querySelectorAll（“a[href=”http://bananas.com']");
对于（变量i=0；i

document.querySelector仅查找单个元素，如果未找到该元素，则返回

null

document.querySelectorAll返回一个伪元素数组，如果找不到，则返回一个空的伪数组

…但是，当在网页中检测到某些内容时，听起来您想更新浏览器操作弹出窗口，对吗？如果是这样的话，这是可能的，但难度要大得多

---

Mohamed Mansour的文章将使您能够在内容脚本和后台页面/弹出窗口之间进行通信，但还需要做其他工作。

没错，但我如何确保运行的jQuery代码会影响选项卡中呈现的页面，而不是

popup.html

？@Sean Mohamed Mansour在他的最后一段中很好地解释了这一点。我只是建议使用比xpath更简单的替代方法（在我看来）。

var query = document.querySelector("div#hello");
if (query) {
    alert("This page has a friendly div");
}

var query = document.querySelectorAll("a[href='http://bananas.com']");
for (var i = 0; i < query.length; i += 1) {
    if (query[i].textContent === "I am married to a banana") {
        alert("This guy is weird.");
        return;
    }
}