Extension Chrome: DOM traversal

Question

Je souhaite écrire une extension Chrome qui regarde le code HTML de la page, et si elle trouve par exemple <div id="hello">, elle sera affichée, comme une liste HTML dans la fenêtre contextuelle, 'Cette page a un div sym court et s'il trouve par exemple <a href="http://bananas.com">I am married to a banana</a> alors il sortira 'Ce mec est bizarre'. Donc, en d'autres termes, la recherche de choses spécifiques dans le DOM et la sortie des messages dans le popup en fonction de ce qu'il trouve.

J'ai jeté un oeil à Google Chrome Extension - Accessing The DOM pour accéder au dom mais j'ai bien peur de ne pas le comprendre vraiment. Alors bien sûr, il y aura traverser le dom et probablement en utilisant regex et ensuite des instructions conditionnelles.

Answer 1

Bien que la question stackoverflow a demandé comment laisser votre extension parler au DOM. Il y a de nombreuses façons, une façon est à travers chrome.tabs.executeScript, et une autre façon est à travers le passage des messages comme je l'ai expliqué dans cette question.

Pour revenir à votre question, vous pouvez utiliser XPath pour rechercher dans le DOM. C'est assez puissant. Par exemple, vous avez dit que vous voulez rechercher <div id="hello">, vous pouvez le faire comme ceci:

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

Maintenant, pour votre deuxième exemple, la même chose .. <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'); 
} 

Eh bien, vous pouvez utiliser XPath qui fonctionne parfaitement dans Chrome, et vous pouvez rendre votre requête simple, comme trouver des nœuds que vous voulez ou même complexes avec des détails. Vous pouvez interroger n'importe quel noeud, puis effectuer un post-traitement si vous le souhaitez également.

Espérons que cela a aidé. Souvenez-vous que tout ceci devrait se trouver dans un content script dans l'extension Chrome. Et si vous voulez que votre extension communique avec cela, vous pouvez utiliser Message Passing comme je l'ai expliqué dans l'autre article. Donc, fondamentalement, dans votre popup.html, vous envoyez une requête au script de contenu pour vous trouver du texte. Votre script de contenu renverra une réponse à partir de son rappel. Pour envoyer la requête, vous devez utiliser chrome.tabs.sendRequest et dans le script de contenu. Vous écoutez cette requête et la gérez. Comme je l'ai expliqué dans l'autre stackoverflow question.

Answer 2

À moins que le problème soit plus complexe que je ne le pense, pourquoi ne pas simplement utiliser jQuery ou un autre API ji pratique pour cela? C'est pour cela qu'ils ont été faits pour - traverser le dom facilement. Vous pouvez injecter jquery et votre script qui utilisera dans les pages nécessaires dans le manifeste:

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

Answer 3

Est-ce PAS utiliser des expressions régulières pour analyser HTML. Le <center> ne peut pas tenir.

Avec cela à l'écart ... bien que vous puissiez utiliser XPath, je pense que querySelector est similaire en puissance tout en étant un peu plus simple aussi bien.

Vous passez simplement un sélecteur CSS comme une chaîne, et il renvoie les éléments qui correspondent au sélecteur. Un peu comme utiliser jQuery sans avoir besoin de charger la bibliothèque jQuery.

Voilà comment vous l'utiliser:

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 ne trouve qu'un seul élément, et retourne null si cet élément est introuvable.Document.querySelectorAll renvoie un faux-tableau d'éléments, ou un faux-tableau vide si aucun n'est trouvé.

... cependant, il semble que vous vouliez mettre à jour la fenêtre d'action du navigateur lorsqu'un élément est détecté sur une page Web, n'est-ce pas? Si oui, c'est possible mais immensément plus difficile. La publication de Mohamed Mansour vous permettra de communiquer entre les scripts de contenu et la page d'arrière-plan/popup, mais il y a aussi d'autres bits à faire.