Chrome浏览器扩展程序：DOM遍历

我想编写一个Chrome扩展程序，查看其页面的HTML页面，如果它找到例如<div id="hello">，那么它将输出一个HTML列表作为弹出窗口中的“此页面有一个友好div“，如果它发现，例如<a href="http://bananas.com">I am married to a banana</a>那么它会输出'这家伙很奇怪。'Chrome浏览器扩展程序：DOM遍历

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

我看看Google Chrome Extension - Accessing The DOM访问dom，但我恐怕我不太明白它。那么当然会遍历dom，并可能使用正则表达式和条件语句。

来源

2010-09-12 Sean McRaghty

那么，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中完美工作，并且可以使查询变得简单，例如查找您想要的节点，甚至可以使细节复杂化。您可以查询任何节点，然后根据需要进行后期处理。

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

来源

2010-09-12 14:59:47

除非问题比我想象的更复杂，为什么不使用jQuery或其他方便的js API呢？这就是他们所做的 - 轻松地穿越dom。你可以注入jQuery和你的脚本将使用它到需要的页面清单中：

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

来源

2010-09-12 15:24:20 serg

对，但我如何确保我运行的jQuery代码影响页面中呈现的页面，而不是'popup.html'？ – 2010-09-12 18:54:51

@西安穆罕默德曼苏尔解释说，在他的最后一段很好。我只是建议比xpath更容易的选择（在我看来）。 – serg 2010-09-12 20:24:19

做不使用正则表达式解析HTML。 <center>不能容纳。

有了这样的方式......虽然你可以使用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; 
    } 
}

document.querySelector发现只有一个元素，如果没有找到该元素返回null。

document.querySelectorAll返回一个伪元素数组，或者一个空的假数组（如果没有找到）。

...但是，这听起来像是你想更新浏览器在网页中检测到某些事件时弹出的窗口，请更正？如果是这样，那很有可能，但非常难。

Mohamed Mansour的帖子会让你到达可以在内容脚本和背景页面/弹出框之间进行通信的地步，但是还有其他一些需要完成的部分。

来源

2010-10-01 11:02:56 Pauan

Chrome浏览器扩展程序：DOM遍历

回答

相关问题