Ich habe gestern mit Hilfe des @Bakerolls ein kleines Chrome Addon geschrieben, welches ich hier kurz vorstellen möchte. Zudem soll dies ein kleiner Einstieg in die Chrome-Addon-Entwicklung werden.
Der Aufbau
Ein Chrome Addon besteht aus mindestens drei Dateien. Ein Icon in drei verschieden möglichen Größen (128×128, 64×64, 32×32 Pixel), einer Manifest-Datei, in welcher man Einstellungen festlegen kann, sowie einer HTML-Datei, welche sich öffnet, wenn man auf das Icon klickt.
Manifest.json
In der Manifest.json müssen die Einstellungen des Addons im JSON Format festgelegt werden. Darunter fallen Addon-Name, Addon-Version, Addon-Rechte, usw. Ein beispielhafter Aufbau:
{
"manifest_version": 2,
"name": "NoEmailInput",
"description": "This extension changes the inputs of type 'email' into type 'text'",
"version": "1.0",
"permissions": [
"<all_urls>",
"storage"
],
"content_scripts": [ {
"matches": ["<all_urls>"],
"js": [ "noemailinput.js" ],
"run_at": "document_end"
}],
"icons": { "128": "noemailinput.png" },
"browser_action": {
"default_icon": "noemailinput.png",
"default_popup": "popup.html"
}
}
Dies ist die Manifest-Datei meines noEmailInput-Addons. Ich denke die ersten Einträge sind selbsterklärend und den Rest erläutere ich kurz.
"permissions": [
"<all_urls>",
"storage"
],
Mit der ersten Option legen wir fest, dass mein Plugin auf alle möglichen URLs angewendet wird. Zudem benötige ich Zugriff auf den Datenspeicher, damit ich die späteren Einstellungen abspeichern kann.
"content_scripts": [ {
"matches": ["<all_urls>"],
"js": [ "noemailinput.js" ],
"run_at": "document_end"
}],Hier legen wir fest, was unser Addon an den aufgerufenen Seiten anstellen darf. Wieder dürfen alle URLs vom Addon manipuliert werden. Auf der Seite wird das von uns mitgelieferte „noemailinput.js“-Script am Ende des Dokuments ausgeführt.
"browser_action": {
"default_icon": "noemailinput.png",
"default_popup": "popup.html"
}Hier legen wir einmal unser Icon, welches im Browser als Addon angezeigt wird, sowie die HTML Datei, welche bei dessen Klick angezeigt wird, fest.
Popup.html
Wie ich schon sagte, ist dies die HTML Datei, welche beim Klick auf das Addon-Icon angezeigt wird. Diese kann ganz „normal“ geschrieben werden, ohne irgendwelche Eigenarten beachten zu müssen. Bei mir sieht diese folgendermaßen aus:
<html>
<head>
<title>NoEmailInput plugin</title>
</head>
<body>
<strong>NoEmailInput plugin</strong>
<br />
<input type="checkbox" id="noemailinputactive"><label for="active">Enabled?</label>
<script src="popup.js"></script>
</body>
</html>Die HTML Seite ist nicht wirklich besonders, außer das ich im unteren Teil die popup.js einbinde.
Popup.js
In der Popup.js habe ich die Speicherung des Addon-Zustandes (aktiv/inaktiv) umgesetzt. Dafür benötigte ich die „storage“-Permission, damit die Angabe über mehrere Tabs bzw. Sessions festgehalten werden kann. Um die Speicherungen/Wiederherstellungen zu nutzen, kann man auf die API von Chrome zurückgreifen.
var checkelem = document.getElementById("noemailinputactive")
//wait for changes
checkelem.addEventListener('change',changestate,false)
//initial state
window.onload = loadstate
//change state
function changestate() {
enabled = checkelem.checked;
savestate(enabled);
}
//load state
function loadstate() {
chrome.storage.sync.get("noemailinputstate", function(items) {
enabled = items['noemailinputstate'];
checkelem.checked = enabled;
});
}
//save state
function savestate(state) {
chrome.storage.sync.set({'noemailinputstate':state}, function() { })
}noemailinput.js
Diese letzte Datei wird in jede aufgerufene Seite „eingebaut“ und ausgeführt. Dort passiert der eigentliche Teil des Addons. Mein Addon wurde dazu entwickelt Eingabefelder vom Typ „email“ in den Typ „text“ umzuwandeln, damit der Browser beim Abschicken des Formulares nicht meckert, ich hätte eine ungültige Email eingegeben. Den entsprechenden Quelltext führe ich nur aus, wenn das Häkchen gesetzt ist.
function loadstate() {
chrome.storage.sync.get("noemailinputstate", function(items) {
enabled = items['noemailinputstate'];
if(enabled)
wipeEmail()
});
}
window.onload = loadstate;
function wipeEmail() {
var inputelems = document.getElementsByTagName("input")
for(var i = 0; i < inputelems.length; i++) {
if (inputelems[i].type == "email") {
inputelems[i].type = "text"
}
}
}
Ich hole mir alle Eingabefelder der Webseite in ein Array. Dieses Array gehe ich daraufhin durch und prüfe, ob das „type“-Attribut entsprechend den Wert „email“ enthält. Falls dies der Fall ist, wird die Eigenschaft ersetzt.
Addon testen
Bevor man ein Addon veröffentlichen kann/möchte sollte man dieses ausgiebig testen. Chrome bzw. Chromium bietet dazu eine einfache Möglichkeit an. Zunächst legt man die benötigten Dateien in einen Ordner auf der Festplatte ab. Danach kann man das Addon als „ungepacktes Addon“ unter Chrome einbinden. Man geht dazu auf „Menü“->Tools->Erweiterungen; dort auf „Entpackte Erweiterung laden…“ und gibt den entsprechenden Ordner an.
Das Addon sollte nun installiert und bereits aktiv sein. Hat man am Quelltext was verändert, so kann man über den Link „Aktualisieren“ das Addon neu laden, um die Veränderungen wirksam zu machen.
Ist die Testphase abgeschlossen, kann man über den Button „Erweiterung packen“ das entsprechende Archiv (.crx) erstellen lassen. Falls man sein Addon im „Addon-Market“ anbieten möchte, so muss man Google einmalig 5$ für den Entwicklerstatus zahlen.
Überblick & Fazit
Wie man leicht erkennen kann, benötigt man nur Kenntnisse in HTML bzw. Javascript um ein Addon für Chrome zu schreiben. Eine ausreichend dokumentierte API vereinfacht die Programmierung von umfangreichen Addons ungemein.
Den kompletten Quelltext, so wie ein fertig zur Installation gepacktes Archiv (.crx) meines NoEmailInputs findet ihr auf Github: https://github.com/gehaxelt/Chrome-NoEmailInput
~Sebastian