html - 如何使用 Google 扩展程序查找 url 的 div 标签

Question

我正在创建一个 chrome 扩展，它将找到指定 url 的所有 div 标签。但是我一直很困惑如何解决这个问题。我应该使用内容脚本吗？如果是，我如何可靠地将标签数量传递给我的背景页面？另外，是否可以只在我的背景 html 页面上使用 XMLHttpRequest 来查找 url 中的 div 标签？

Answer 1

如果这是您唯一的要求，从指定的公共 URL 中找到 div 标签，那么您可以background.html按照您所说的那样在带有 XHR 的页面中执行此操作。

像这样的东西：

var xhr = new XMLHTTPRequest();
...
xhr.send(null);
var query = xhr.responseXML.querySelectorAll('div');
console.log('You have found ' + query.length + ' DIV tags!';

我之前这样做是为了阅读一堆 RSS 链接，确保您的响应类型也是 XML，以确保您利用 XHR 的 responseXML。或者你可以只使用这个DOMParser类并做

var parser = new DOMParser();
// Maybe you have to play with text/xml
var dom = parser.parseFromString(xhr.responseText, "text/xml") 
var query = dom.querySelectorAll('div');
console.log('You have found ' + query.length + ' DIV tags!';

如果您的内容是动态的，并且您想在那一刻获取 DIV 列表，那么您必须使用内容脚本并仅注入以下内容：

document.body.querySelectorAll('div');
console.log('You have found ' + query.length + ' DIV tags!';

我假设您希望触发该用户，因此请查看Extension Message Passing以了解如何将消息从扩展发送到内容脚本，以便触发此操作。

希望对你有一点帮助！