Der einfache Weg zur Google-Chrome-Erweiterung
Kommentare

popup.html: das Standard-Pop-up
Das Standard-Pop-up ist die einzige Datei, die der Benutzer Ihrer Erweiterung zu sehen bekommt. Sie enthält eine Mischung aus HTML, CSS und JavaScript und ist dafür verantwortlich,

popup.html: das Standard-Pop-up

Das Standard-Pop-up ist die einzige Datei, die der Benutzer Ihrer Erweiterung zu sehen bekommt. Sie enthält eine Mischung aus HTML, CSS und JavaScript und ist dafür verantwortlich, dass die durch das Inhaltsskript sowie die Hintergrundseite bereitgestellten Informationen anschaulich dargestellt werden.

Das Vorgehen hierbei ist folgendes: Die popup.html enthält ein HTML-Grundgerüst. Eine JavaScript-Funktion erstellt aus den übergebenen Daten ein JSON-Objekt, das weiterverarbeitet und als HTML ausgegeben wird. Mittels des zuvor heruntergeladenen Skripts smart-2.5.min.js wird die Ausgabe durch ein Template-System ähnlich wie Smarty realisiert. Übernehmen Sie den Quelltext aus Listing 4 in die popup.html.

Listing 4


 hCard-Finder   

Es sind zwei Skriptelemente innerhalb des HTML Body enthalten. Das erste Element mit der ID output enthält später das Smarty Template, das für die Ausgabe in HTML umgewandelt wird. Im zweiten Skriptelement wird in der Variable tpl ein jSmart-Objekt mit dem Inhalt des Smarty Templates gespeichert.

Mit chrome.tabs.getSelected() bekommen Sie Zugriff auf Informationen des aktuellen Tabs, der das Pop-up anzeigt. Durch chrome.extension.getBackgroundPage() haben Sie die Möglichkeit, auf das JavaScript-Objekt window der Hintergrundseite background.html zuzugreifen. Somit können Sie in der Variable backgroundPage die Daten des zuvor in der Hintergrundseite definierten JavaScript-Objekts forPopup zwischenspeichern.

Achten Sie auf die Übergabe der aktuellen Tab-Identifikationsnummer, damit das Skript die Informationen aus dem richtigen Tab anzeigt. Mittels einer For-Schleife wird backgroundPage durchlaufen, das alle gefundenen hCards als durch JSON formatierten Text enthält. In der Variable jsonObj speichern Sie ein mit der JavaScript-Funktion JSON.parse erstelltes JSON-Objekt.

In html wird das zuvor definierte Smarty Template mit den Inhalten von jsonObj befüllt. In der letzten Zeile wird dem HTML Body das in HTML umgewandelte Template hinzugefügt.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -