Chrome Todo App
Es ist kein Geheimnis, dass der Chrome Browser mein absoluter Lieblingsbrowser ist. Eben einer dieser Gründe ist, die leichte Erweiterbarkeit des Chrome Browsers. Heute zeige ich euch wie ihr mit vier Dateien und weniger als 100 Zeilen Programmcode eine einfache Todo Erweiterung für den Chrome Browser macht. Ich habe in meiner App ganz speziell auf externe Bibliotheken verzichtet um euch die einfachheit von purem javascript ein bisschen näher zu bringen.
Die manifest.json Sie ist der Grundstein jeder Chrome Erweiterung und beinhaltet die Berechtigungen, den Erweiterungsnamen und weitere Eigenschaften. Solange diese Datei nicht existiert kann keine Browser Erweiterung geschrieben werden. Für unsere App ist der Sektor „permissions“ von grosser Bedeutung. Hier erlaubt ihr eurer Applikation Zugriff auf den Speicher von Chrome um auch eure Einträge konsistent abzuspeichern.
{ "name": "Todo App", "description": "Simple Todo App", "manifest_version": 2, "version": "1.0.0", "permissions" : ["storage"], "chrome_url_overrides" : { "newtab": "app.html" } }
Die app.html
Sie enthält das Gerüst unserer Erweiterung. Dieses Gerüst definiert welche Elemente beim öffnen eines neuen Tabs zu sehen sind. Wir benötigen ausschliesslich ein Eingabefeld (<input />) und ein Listengerüst (<ul></ul>) mit welchem über den Programmcode neue Elemente zugefügt werden. Ausserdem binden wir unser Stylesheet app.css und unsere Programmlogik app.js mit ein.
<html> <body> <link rel="stylesheet" href="app.css"> <script type="text/javascript" src="app.js"></script> <div class="content"> <input id="inputTodo" type="text" placeholder="add todo..." /> <ul id="list"> </ul> </div> </body> </html>
Die app.js
Meine app.js beinhaltet die eigentliche Programmlogik für das hinzufügen und weglöschen von Aufgaben. Ich habe dafür im wesentlichen drei Funktionen geschrieben.
addListItemToDom
Mit ihr kann ich einzelne Aufgaben meiner Liste hinzufügen. Ich benutze hier reine DOM Manipulation um ein neues Listenelement hinzuzufügen.
function addListItemToDom(name) { var item = document.createElement("LI"); var list = document.getElementById("list"); var textnode = document.createTextNode(name); item.onclick = function() { this.parentNode.removeChild(this); saveItemsToStorage(); } item.appendChild(textnode); list.insertBefore(item, list.firstChild); }
saveItemsToStorage
Mit dieser Funktion werden alle li-Elemente aus dem Code gelesen und in den Chrome Storage geschrieben. Dies ist nötig um die Todo Einträge auch nach dem schliessen des Tabs wieder zur Verfügung zu haben.
function saveItemsToStorage() { var items = []; var listItem = document.getElementById("list").getElementsByTagName("li"); var newNums = []; for (var i = listItem.length-1; i >= 0; i--) { items.push(listItem[i].innerHTML); } if (typeof(chrome.storage) !== 'undefined') { chrome.storage.local.set({items: items}, function() { }); } }
loadItemsFromStorage
Mit dieser Funktion werden wiederum alle Todo Einträge aus dem Chrome Storage ausgelesen und via Funktion addListItemToDom dem ul hinzugefügt.
function loadItemsFromStorage() { if (typeof chrome.storage !== 'undefined') { chrome.storage.local.get(['items'], function(result) { if(typeof result.items !== 'undefined'){ result.items.forEach(function(item){ addListItemToDom(item); }); } }); } }
Am Ende füge ich noch einen Event Listener hinzu. Ein Event Listener überwacht ein Objekt auf ein bestimmtes Ereignis. In meinem Falle möchte ich das Input Element auf das Ereignis „Tastatureingabe“ überwachen. Nachdem das Ereignis ausgelöst wurde prüfe ich die gedrückte Taste auf die Eingabetaste und löse anschliessend das hinzufügen der Aufgabe aus.
document.getElementById("inputTodo") .addEventListener("keyup", function(e) { if (event.which == 13 || event.keyCode == 13) { addListItemToDom(this.value); this.value = ''; saveItemsToStorage(); } });
Am Ende löse ich noch das Laden aller gespeicherten, mit dem Aufrufen der Funktion loadItemsFromStorage(), Elemente aus.
loadItemsFromStorage();
Die app.css
Unser Stylesheet definiert wie und wo die Elemente in meiner App angezeigt werden. Und ist sozusagen reine Kosmetik um auch ein freundliches auftreten zu gewährleisten. Ausserdem habe ich um das ganze visuell noch ein bisschen zu optimieren ein zufälliges Hintergrundbild der „unsplash“ library hinzugefügt. Hier findet die Beschreibung der unsplash API.
*:focus { outline: none; } body { background: url('https://source.unsplash.com/1600x900/?nature,landscape') no-repeat center center fixed; } input[type=text] { border: none; border-bottom: dotted; background: transparent; height: 32pt; font-size: 24pt; margin-top: 24pt; } ul { padding: 0; list-style-type: none; } li { list-style: none; font-size: 24pt; cursor: pointer; position: relative; } li:hover { color: lightblue; text-decoration: line-through; } .content { max-width: 320px; position: absolute; left: 0; right: 0; margin: auto; padding: 25px; border-radius: 6px; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)); }
Nun wünsche ich euch viel Spass beim selber ausprobieren!
Hier gehts zum CodePen Beispiel für den WebBrowser
Hier findet ihr den Beispielcode auf Github
Hier findet ihr eine Anleitung um Chrome extensions zu laden
Chrome Todo App was originally published on [ilovete.ch]