Der einfache Weg zur Google-Chrome-Erweiterung
Kommentare

Jetzt können Sie die Erweiterung bereits in Google Chrome laden. Gehen Sie dazu auf GOOGLE CHROME ANPASSEN (Werkzeugsymbol), wählen Sie TOOLS und klicken Sie auf ERWEITERUNGEN. Alternativ geben Sie chrome://settings/extensionSettings

Jetzt können Sie die Erweiterung bereits in Google Chrome laden. Gehen Sie dazu auf GOOGLE CHROME ANPASSEN (Werkzeugsymbol), wählen Sie TOOLS und klicken Sie auf ERWEITERUNGEN. Alternativ geben Sie chrome://settings/extensionSettings in die Adressleiste ein. Lassen Sie die Optionen des Entwicklermodus anzeigen, indem Sie die Checkbox oben rechts aktivieren. Klicken Sie nun auf den Button ENTPACKTE ERWEITERUNG LADEN. und wählen Sie den Ordner mit der von Ihnen erstellten JSON-Datei aus.

Bestätigen Sie anschließend und die Erweiterung wird geladen. Durch einen Klick auf das kleine Dreieck vor dem Icon lassen sich weitere Optionen anzeigen. Wenn Sie später eine Änderung an der Erweiterung durchführen, genügt es, diese mit AKTUELLE SEITE NEU LADEN erneut zu laden.

Das heißt, Sie müssen das Add-on nicht komplett entfernen und wieder hinzufügen, um Änderungen anzeigen zu lassen. Die geladene Erweiterung wird in Google Chrome angezeigt. Aktuell hat dieses Add-on noch keinerlei Funktion. Um gewisse Aktionen zu definieren, passen Sie die manifest.json wie in Listing 1 zu sehen an.

Listing 1
{
 "name":"hCard-Finder",
 "version":"1.0",
 "description":"Zeigt die wichtigsten Informationen der gefunden hCards an zentraler Stelle übersichtlich an.",
 "icons":{
   "16":"img/hCardFinder-16.png",
   "48":"img/hCardFinder-48.png",
   "128":"img/hCardFinder-128.png"
 },
 "page_action":{
   "default_icon":"img/hCardFinder-16.png",
   "default_title":"hCard-Finder - Zeige Kontaktdaten an.",
   "default_popup":"popup.html"
 },
 "background_page":"background.html",
 "content_scripts":[
   {
     "js":[
       "js/microformats-shiv.min.js",
       "js/microformats-coredefinition.min.js",
       "js/hCard-Finder.js"
     ],
     "matches":[
       "http://*/*",
       "https://*/*"
     ]
   }
 ],
 "permissions":[
   "tabs",
   "http://*/*",
   "https://*/*"
 ]
}

Die Erweiterung nutzt eine so genannte Seitenaktion (Page Action). Damit können Sie ein kleines Icon in der Adressleiste anzeigen, falls die Erweiterung im aktuell geöffneten Tab eine programmierte Aktion anwenden konnte. Unter page_action werden drei Details definiert:

das Icon für die Adressleiste (default_icon, in diesem Fall das bereits zuvor genutzte 16*16 Pixel-Icon), ein Text für den Tooltip beim Überfahren des Icons (default_title) und eine einfache HTML-Datei, die beim Klick auf das Icon im Standard-Pop-up, einer Art Sprechblase, angezeigt wird (default_popup).

Unter den Inhaltsskripten (Content Scripts) definieren Sie JavaScript-Dateien, die im Kontext der aktuellen Webseite laufen. Diese können durch das Document Object Model (DOM) Details des HTML auslesen oder bearbeiten. Innerhalb content_scripts definieren Sie unter js die Dateien, die in den Quelltext der Webseite eingebunden werden. Die Dateien werden genau in der Reihenfolge geladen, in der Sie sie angeben, daher sind mögliche Abhängigkeiten zu beachten.

Unter matches definieren Sie, dass diese Skripte nur bei HTTP- beziehungsweise HTTPS-Seiten angewendet werden. Weiterhin benötigen Sie eine Hintergrundseite (Background Page). Diese HTML-Datei, die später hauptsächlich JavaScript enthält, läuft im Hintergrund und ist für die Kommunikation zwischen den Content Scripts und dem Standard-Pop-up der Seitenaktion verantwortlich.

Es läuft je geladener Erweiterung nur eine Hintergrundseite. Das ist wichtig zu wissen, damit später verständlich ist, warum bei der Kommunikation immer die eindeutige Identifikationsnummer des Tabs angegeben werden muss. Die globalen Berechtigungen der Erweiterung setzen Sie unter permissions. Hier wird neben HTTP- und HTTPS-Seiten auch die Berechtigung für Browser-Tabs genehmigt, um Zugriff auf Informationen wie die Identifikationsnummer zu erlauben.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -