Расширение Chrome: обход DOM

Question

Я хочу написать расширение Chrome, которое просматривает HTML-код страницы, на которой он находится, и, если оно найдет, например, <div id="hello">, то оно выведет в виде списка HTML во всплывающем окне «Эта страница имеет дружественный div» и если он найдет, например, <a href="http://bananas.com">I am married to a banana</a>, то выведет «Этот парень странный».

Другими словами, поиск определенных вещей в DOM и вывод сообщений во всплывающем окне в зависимости от того, что он находит.

Я посмотрел на Расширение Google Chrome - Доступ к DOM для доступа к домену, но, боюсь, я не совсем понимаю. Тогда, конечно, будет проходить через дом и, предположительно, с помощью регулярных выражений, а затем условных операторов.

Answer 1

Do NOT использовать регулярные выражения для анализа 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 возвращает поддельный массив элементов или пустой поддельный массив, если ничего не найдено.

... однако, похоже, что вы хотите обновить всплывающее окно действий браузера при обнаружении чего-либо на веб-странице, верно? Если это так, это возможно, но очень сложнее.

Пост Мохамеда Мансура приведет вас к тому, что вы сможете обмениваться информацией между скриптами содержимого и фоновой страницей / всплывающим окном, но есть и другие моменты, которые необходимо сделать.

Answer 2

Хорошо, этот вопрос 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.И если вы хотите, чтобы ваш добавочный номер сообщал об этом, вы можете использовать Передача сообщений , как я объяснил в другом посте.Таким образом, в основном в вашем popup.html вы отправляете запрос к скрипту содержимого, чтобы найти ваш текст.Ваш контент-скрипт отправит ответ от своего обратного вызова.Чтобы отправить запрос, вы должны использовать chrome.tabs.sendRequest и в скрипте содержимого. Вы слушаете этот запрос и обрабатываете его.Как я объяснил в другом вопросе stackoverflow .

Answer 3

Если проблема не сложнее, чем я думаю, почему бы просто не использовать для этого jQuery или другой удобный js api? Это то, для чего они были созданы - чтобы легко пересечь дом. Вы можете добавить jquery и ваш скрипт, который будет использовать его, на нужные страницы в манифесте:

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