Jest to kolejne pytanie o dołączanie HTML (widziałem kolejne pytania już odpowiedział, ale nie mogę sprawić, że działa samodzielnie).

Muszę dodać kilka linii HTML wewnątrz div w formie DL. Aby umieścić kontekst, jest to (hiszpański) forum, gdzie chcę dodać dodatkowe informacje pod każdym użytkownikiem w wątku.

Weź tę stronę jako przykład: http: //www.antronio. Cl / nici / Comunidad-Steam-Antronio.1127070 / Page-222, każdy użytkownik ma swój awatar, nazwę Nick, drugorzędną nazwę NICK i pod tym wszystkim pudełkiem z dodatkowymi informacjami. To jest pudełko, które chcę zmodyfikować.

Pudełko jest div o nazwie "Etuiuserinfo" i każdą linię na tym pudełku jest dl o nazwie "Pairsjustified". Chcę dodać DL na początku z tekstem na tym jak te już tam, ale nie mogę sprawić, by działało.

To jest mój manifest.json

{
"manifest_version": 2,
"content_scripts":  [{
    "js":   ["js\/medallas.js"],
    "matches":  ["http://www.antronio.cl/threads/*/*/"]
}],
"description":  "medallas para usuarios",
"name":         "medallas",
"version":      "1",
"permissions": ["tabs","http://www.antronio.cl/threads/*/*/"]
}

I moje "medallas.js"

var dl  = document.createElement("dl");
dl.setAttribute("class","pairsJustified");
dl.innerHTML = "<dt>Status:</dt><dd>OK</dd>";
document.getElementById("extraUserInfo").appendChild(dl);

Jestem nowy w tym i faktycznie staram się uczyć się z tym rozszerzeniem. Może nawet moja struktura folderu jest błędna

/medallas/
  manifest.json
  /js/
    medallas.js

Każda pomoc będzie mile widziana.

0
Jojondro 15 sierpień 2014, 04:35

2 odpowiedzi

Najlepsza odpowiedź

Głównym problemem jest brak elementu z ID extraUserInfo. Używają klasy. Będziesz chciał użyć getElementsByClassName i iterserist przez NODEList. Coś podobnego do tego powinno zacząć.

var extraUserInfos = document.getElementsByClassName("extraUserInfo");
for (var i = 0; i < extraUserInfos.length; ++i) {
    var item = extraUserInfos[i];
    var dl  = document.createElement("dl");
    dl.setAttribute("class","pairsJustified");
    dl.innerHTML = "<dt>Status:</dt><dd>OK</dd>";
    item.appendChild(dl);
}
0
abraham 15 sierpień 2014, 01:13

Z źródła na stronie, o której wspomniałeś "Etuauserinfo" to klasa nie identyfikator.

Chciałbyś użyć

document.getElementsByClassName("extraUserInfo")

Jednak zwróci to tablicę wszystkich elementów pasujących do tego. Aby poradzić sobie z tym, trzeba będzie pętlować się przez tablicę na raz.

var items = document.getElementsByClassName("extraUserInfo");
for( var i = 0; i < items.length; i++) {

  // place your logic here for each item.

    var dl  = document.createElement("dl");
    dl.setAttribute("class","pairsJustified");
    dl.innerHTML = "<dt>Status:</dt><dd>OK</dd>";
    items[i].appendChild(dl);
}

FYI: GetElementByid zwróci tylko pierwszy dopasowany element, (atrybuty ID powinny być unikalne)

Mam nadzieję że to pomoże

Więcej informacji: GettelementsByClassName

Edytować:

Ponieważ strona wykorzystuje jQuery, możesz umieścić kod wewnątrz imprezy gotowości Doc Doc, a nawet użyjesz jQuery do dołączania elementów

$(document).ready(function(){
    $('.extraUserInfo').each(function(){
        $('<dl class="pairsJustified"><dt>Status:</dt><dd>OK</dd></dl>').appendTo(this)
    })
});
0
Bogus Hawtsauce 15 sierpień 2014, 02:31