Chrome扩展程序：DOM遍历 [英] Chrome Extension: DOM traversal

问题描述

我想编写一个Chrome扩展程序，查看其页面的HTML页面，如果它找到< div id =hello> 那么它会输出，作为弹出窗口中的HTML列表，这个页面有一个友好的div，如果它发现，例如< a href =http://bananas.com>我结婚了到一个香蕉< / a> 那么它会输出'这个人很奇怪。'

换句话说，搜索特定的东西DOM并在弹出框中输出消息，具体取决于它发现的内容。

我查看了 Google Chrome浏览器扩展程序 - 访问DOM 以访问dom，但恐怕我不太了解它。那么当然会遍历dom，并可能使用正则表达式和条件语句。

解决方案

那么，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）{
 //找到第一个节点。输出其内容。 
 alert（resultNode.innerHTML）; 
 
 $ / code> 

现在为你的第二个例子，同样的事情..
< a href =http://bananas.com>我嫁给了一位香蕉< / 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）{
 //找到第一个节点。输出其内容。 
 alert（'这个人很奇怪'）; 
} 
  

你可以使用 XPath ，它可以在Chrome中完美工作，并且可以使查询变得简单，例如查找您想要的节点，甚至可以使详细信息复杂化。您可以查询任何节点，然后根据需要进行后期处理。

希望有所帮助。请记住，所有这些都应位于Chrome扩展程序的内容脚本中。如果您希望自己的扩展程序与此通信，则可以使用消息传递正如我在另一篇文章中解释的那样。所以基本上，在popup.html中，您向内容脚本发送请求以查找文本。您的内容脚本将从回调中发回回复。要发送请求，您应该使用 chrome.tabs.sendRequest 和内容脚本中。您可以听取该请求并处理它。正如我在其他堆栈溢出问题中所解释的那样。

I want to write a Chrome extension that looks at the HTML of the page its on, and if it finds eg <div id="hello"> then it will output, as a HTML list in the popup, 'This page has a friendly div' and if it finds eg <a href="http://bananas.com">I am married to a banana</a> then it will output 'This guy is weird.'

So in other words, searching for specific stuff in the DOM and outputting messages in the popup depending on what it finds.

I had a look at Google Chrome Extension - Accessing The DOM for accessing the dom but I'm afraid I don't really understand it. Then of course there will be traversing the dom and presumably using regex and then conditional statements.

解决方案

Well that stackoverflow question asked how to let your extension talk to the DOM. There are numerous ways, one way is through chrome.tabs.executeScript, and another way is through Message Passing as I explained in that question.

Back to your question, you could use XPath to search within the DOM. It is pretty powerful. For example you said you want to search for <div id="hello">, you can do it like this:

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

Now for your second example, same thing .. <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');
}

Well you could use XPath which does work perfectly in Chrome, and you can make your query simple such as finding nodes that you want or even complex with detail. You can query any node, and then do post processing if you wish as well.

Hope that helped. Remember all this should be within a content script in the Chrome Extension. And if you want your extension to communicate to that, you can use Message Passing as I explained in the other post. So basically, within your popup.html, you send a request to the content script to find you text. Your content script will send back a response from its callback. To send the request, you should use chrome.tabs.sendRequest and within the content script.You listen for that request and handle it. As I explained in the other stackoverflow question.

这篇关于Chrome扩展程序：DOM遍历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！