extension chrome - l'ajout d'un div au corps ne fonctionne pas avec le bouton facebook like

Question

Je suis en train de créer une extension chrome et j'ai réussi jusqu'à présent. Comme dernière fonctionnalité, j'essaie d'attacher un div (quelque chose qui affiche une petite publicité non irritante sur mon site personnel) au corps de l'onglet/page actuellement ouvert lorsque l'utilisateur clique sur la section about dans le panneau de mon extension. J'ai réussi à le faire fonctionner aussi.

Mais le problème est que cette division n'est PAS attachée à la balise body de la page principale si cette page contient un widget facebook like ou twitter follow. Au lieu de cela, elle est attachée à la balise body de l'iframe des widgets susmentionnés.

Lorsque j'ai vérifié la structure dom de ces pages, ces widgets créent leur propre structure html>body dans un iframe. Et c'est ce qui cause ce problème.

J'ai essayé d'attacher cette division au premier élément du corps comme suit :

var mainbody = document.getElementsByTagName('body');
mainbody[0].appendChild(adDiv);  --> adDiv = new element I created above this code with its own properties

Dans la deuxième phrase ci-dessus, je m'attendais à ce qu'il soit attaché à la première balise et non aux balises intérieures.

Malheureusement, cela ne fonctionne pas non plus. Je peux voir qu'il est attaché au widget facebook/twitter au lieu du widget principal. Y a-t-il un problème dans ce que je fais ?

---

Editar

D'après le commentaire de @stan, j'ai pu résoudre le problème dans les pages avec un widget facebook/twitter (c'est-à-dire celles avec des iframes). Maintenant mon code ressemble à ceci :

document.body.appendChild(adDiv);

-- Merci, Stan.

Mais maintenant, je suis confronté à un autre problème. Dans certains sites (comme http://www.glassdoor.com/index.htm ) n'apparaît pas dans la page. Ce qui se passe en fait, c'est que le div est attaché au corps mais qu'au même moment, il est également retiré. Cela ne peut être vu qu'avec l'aide de l'inspecteur html (l'inspecteur de chrome dans ce cas).

Le div(adDiv) est attaché au corps dans le balisage et disparaît. C'est comme si elle était incapable de se lier au corps. . Résultat : rien n'apparaît dans la page.

Une idée de la raison pour laquelle cela se produit ? Cela ne se produit que sur une minorité de sites, comme celui mentionné ci-dessus.

---

background.js

chrome.browserAction.onClicked.addListener(function(tab){
    chrome.tabs.sendMessage(tab.id,{clicked:1});
});

content.js

chrome.extension.onMessage.addListener(function(request,sender,sendResponse){
    if(request.clicked==1){
        /* Create adDiv and apply style to it using JS */
        document.body.appendChild(adDiv);
    }
}

Answer 1

Pour la première partie de la question, vous devriez éventuellement essayer document.body.appendChild . (Il s'est avéré que cela a bien fonctionné.)

Pour la deuxième partie de la question, j'ai réalisé une extension de test avec votre code (j'ai juste ajouté quelques éléments pour définir le div) et cela fonctionne parfaitement sur le site http://www.glassdoor.com/index.htm Je ne vois que la division en bas de la page après avoir cliqué sur le bouton d'action. Veuillez vous assurer qu'aucune autre extension n'intervient dans votre navigateur - désactivez toutes les autres extensions. Voici comment je définis la division (cela peut être important aussi) :

var adDiv = document.createElement('div'); 
adDiv.id = "idadv"; 
adDiv.style.width = "200px"; 
adDiv.style.height = "100px"; 
adDiv.style.display = "block"; 
adDiv.style.backgroundColor = "blue";

Comme vous avez dit que le problème apparaît sporadiquement (et je ne suis pas non plus capable de le reproduire), je suppose qu'il sera difficile de l'intercepter. Comme solution de contournement, vous pouvez essayer de regarder DOM et de recréer la div chaque fois qu'elle semble manquer, quelque chose comme ça :

setInterval(createDivIfDoesNotExist, 1000);

Vous devriez également envisager un autre emplacement pour votre publicité personnelle, par exemple en affichant simplement une fenêtre contextuelle liée à l'action du navigateur via le manifeste et en ne modifiant pas les pages externes par le biais de l'écouteur d'événements de browserAction.