Discussion :

[tomlev]

Salut,

Désolé si c'est une question de noob, j'ai un niveau proche de zéro en Javascript et j'ai rien trouvé de probant sur Google et dans les tutos...

Je m'essaie au développement d'extensions pour Google Chrome, et je voudrais extraire des infos d'une page récupérée grâce à un XmlHttpRequest. Je récupère bien le HTML de la page, mais je n'arrive pas à accéder à son DOM.

J'ai bien testé avec DOMParser :

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var parser = new DOMParser();
var doc = parser.parseFromString(req.responseText, "text/xml");

Mais pas moyen d'accéder au contenu... doc.getElementById ne renvoie pas l'élément que je cherche, alors que je sais qu'il est bien là ! et même doc.getElementsByTagName("body") me renvoie une liste vide...

Une petite idée de ce qu'il faut faire ?

[E.Bzz]

Salut,
la page que te retourne Ajax, ce n'est visiblement pas pour l'afficher ...

Pourquoi ne pas retourner uniquement les infos que tu cherches à extraire (avec JSON, par exemple si infos structurées) ?

EDIT : Visiblement, le DOMparser n'aime pas la soupe HTML ?

A+

[tomlev]

Pourquoi ne pas retourner uniquement les infos que tu cherches à extraire (avec JSON, par exemple si infos structurées) ?

Parce que c'est pas une page à moi, c'est une page d'un site existant dont je veux extraire une info...

EDIT : Visiblement, le DOMparser n'aime pas la soupe HTML ?

non
j'ai essayé de mettre "text/html" à la place de "text/xml", mais ça me renvoie null...

[E.Bzz]

j'ai essayé de mettre "text/html" à la place de "text/xml", mais ça me renvoie null...

Oui, car comme précisé dans le lien, ce n'est visiblement pas avec ce parser là que tu y arriveras (il ne sait pas faire) ...

Par contre, si la page n'est pas à toi (en fait : si elle n'est pas dans le même domaine que la page appelante), il devrait y avoir des problèmes de sécurité lors de l'accès ...
Tu as pu le gérer, ou le problème ne se posait pas ?

Parce que sinon, quelque soit le parseur, ça va bloquer

A+

[tomlev]

Par contre, si la page n'est pas à toi (en fait : si elle n'est pas dans le même domaine que la page appelante), il devrait y avoir des problèmes de sécurité lors de l'accès ...
Tu as pu le gérer, ou le problème ne se posait pas ?

Ben je récupère bien la source HTML...
En fait je pense que c'est parce que dans le manifeste de l'extension chrome, j'ai ajouté une permission pour le site en question

[E.Bzz]

D'après ce post là, ça semble assez mal barré

Dans la mesure où tu récupères bien ton code HTML, mais sous forme de chaîne de caractères (la soupe HTML de Mozilla ), tu n'as pas moyen de t'en sortir en la traitement comme telle (une extraction de chaîne) ?

C'est sûr que c'est (infiniment) moins propre qu'un accès DOM, mais à défaut de grives ...

A+

[tomlev]

Oui, j'avais vu ce post, c'est ce qui m'avait poussé à chercher du côté de DOMParser...

Enfin bon, j'ai fini par trouver une solution, pas très propre mais ça marche

En gros :
- je crée un div caché dans ma page
- je mets dedans (innerHTML) le responseText de mon XHR, je peux donc accéder aux éléments via DOM
- je récupère ce qui m'intéresse
- je supprime le DIV caché

Comme je disais, c'est pas très propre... c'est même super bourrin

[tomlev]

Pour info, si ça intéresse quelqu'un à titre d'exemple, c'est pour une extension Google Chrome qui affiche le statut StackOverflow.com (réputation, badges, indicateur de nouveaux messages).

Voilà les fichiers de la première version (pour l'installation, voir ici)


manifest.json :

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "Stack Overflow status",
  "version": "1.0",
  "description": "Extension to show StackOverflow.com reputation, badges and new message flag.",
  "browser_action": {
    "default_icon": "stackoverflow.ico",
    "popup": "popup.html",
    "default_title": "Stack Overflow"
  },
  "permissions": [
    "http://stackoverflow.com/",
    "http://sstatic.net/"
  ]
}

popup.html :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
<head>
<link rel="stylesheet" href="http://sstatic.net/so/all.css">
<script type="text/javascript" language="Javascript">
var xhr = new XMLHttpRequest();
 
window.onload = function() {
    xhr.open(
        "GET",
        "http://stackoverflow.com/",
        true);
    xhr.onload = extractStatus;
    xhr.send(null);
}
 
function extractStatus() {
 
    var content = "";
    var soDiv = document.getElementById("soDiv");
    soDiv.innerHTML = xhr.responseText;
    var hlinks = document.getElementById("hlinks");
    var nLinks = 0;
    var nSpans = 0;
    var loggedIn = -1;
    
    for(i = 0; i < hlinks.childNodes.length; i++) {
    
        var node = hlinks.childNodes[i];
        if (node.nodeType != 1)
            continue;
        
        if (node.nodeName == "A") {
            
            var href = node.getAttribute("href");
            
            if (nLinks == 0) {
                if (href.indexOf("/users/recent/") == 0) {
                    loggedIn = 1;
                }
                else {
                    loggedIn = 0;
                    break;
                }
            }
            
            if (nLinks >= 2)
                continue;
            
            href = "http://stackoverflow.com" + href;
            node.setAttribute("href", href);
            node.setAttribute("target", "_blank");
            content = content + node.outerHTML + " ";
 
            nLinks++;
        }
        else if (hlinks.childNodes[i].nodeName == "SPAN")
        {
            if (nSpans >= 4)
                continue;
            
            content = content + node.outerHTML;
            
            nSpans++;
        }
            
    }
    
    if (loggedIn <= 0)
        content = 'Not connected to Stack Overflow. <a href="http://stackoverflow.com/users/login" target="_blank">Login</a>';
 
    document.body.removeChild(soDiv);
    
    var header = document.createElement("div");
    header.setAttribute("id", "header");
    header.style.height="auto";
    
    var topbar = document.createElement("div");
    topbar.setAttribute("id", "topbar");
    topbar.style.width = "265px";
    
    var hlinks2 = document.createElement("div");
    hlinks2.setAttribute("id", "hlinks");
    hlinks2.innerHTML = content;
    hlinks2.style.margin = "0px";
    
    topbar.appendChild(hlinks2);
    header.appendChild(topbar);
    document.body.appendChild(header);
}
 
</script>
</head>
<body>
<div id="soDiv" style="visibility:hidden;background-color:#EEE"></div>
</body>
</html>

stackoverflow.ico :




PS: j'envisage une extension similaire pour le tableau de bord utilisateur de Developpez.com

[E.Bzz]

PS: j'envisage une extension similaire pour le tableau de bord utilisateur de Developpez.com

Excellent

J'avais bien pensé à la solution du div, mais je ne te l'ai pas proposée à cause de nombreux problèmes potentiels :

• des id éventuellement dupliqués
• des balises (<META>, <head>, <body> etc.) qui vont se retrouver dans un div alors qu'elles n'ont rien à y faire
• des éventuels passage <script> qui risquent de poser problème
• ...

Mais c'était sans connaitre le contenu de ta page distante ...
Donc, si rien de tout ça ne pose soucis, tant mieux

A+

[tomlev]

Effectivement c'est pas top... mais en l'occurrence ça ne pose pas vraiment de problème :

des id éventuellement dupliqués

La page est initialement vide (à part du script et une div vide)

des balises (<META>, <head>, <body> etc.) qui vont se retrouver dans un div alors qu'elles n'ont rien à y faire

apparemment ça dérange pas chrome... de toutes façons je supprime tout ça quand j'ai récupéré les infos qui m'intéresse

des éventuels passage <script> qui risquent de poser problème

effectivement, ça peut être plus gênant... il faut juste que ça n'interfère pas avec mes scripts à moi, mais là ça a l'air bon