google-chrome - Chrome 扩展 : DOM traversal

Question

我想编写一个 Chrome 扩展，查看其所在页面的 HTML，如果它找到例如 <div id="hello">然后它将输出，作为弹出窗口中的 HTML 列表，'This page has a friendly div' 如果它找到例如 <a href="http://bananas.com">I am married to a banana</a>然后它会输出“这家伙很奇怪”。

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

我看过Google Chrome Extension - Accessing The DOM用于访问 dom，但恐怕我并不真正理解它。然后当然会有遍历 dom 并大概使用正则表达式，然后是条件语句。

Answer 1

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

回到您的问题，您可以使用 XPath 在 DOM 中进行搜索。它非常强大。例如你说你想搜索 <div id="hello"> ，你可以这样做:

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);
}

现在对于你的第二个例子，同样的事情.. <a href="http://bananas.com">I am married to a banana</a>

var nodes = document.evaluate("//a[@href='http://bananas.com']/text()[contains(.,'married')]",
                               document, null, 
                               XPathResult.ANY_TYPE, null)
var resultNode = nodes.iterateNext()
if (resultNode) {
  // Found the first node. Output its contents.
  alert('This guy is weird');
}

那么你可以使用 XPath它在 Chrome 中运行得很好，你可以让你的查询变得简单，比如找到你想要的节点，甚至是复杂的细节。您可以查询任何节点，然后根据需要进行后处理。

希望对您有所帮助。请记住，所有这些都应该在 content script 内在 Chrome 扩展中。如果你想让你的扩展与之通信，你可以使用 Message Passing正如我在另一篇文章中解释的那样。所以基本上，在您的 popup.html 中，您向内容脚本发送请求以查找您的文本。您的内容脚本将从其回调中发回响应。要发送请求，您应该使用 chrome.tabs.sendRequest并在内容脚本中。您监听该请求并处理它。正如我在其他 stackoverflow question 中解释的那样.