ugotit.de » Erweiterungen http://ugotit.de and I say "It's all right" Fri, 09 Sep 2011 07:16:50 +0000 en hourly 1 http://wordpress.org/?v=3.2 Adress- und Suchfeld im Firefox kombinieren: Awesomebar HD http://ugotit.de/2011/04/28/adress-und-suchfeld-im-firefox-kombinieren-awesomebar-hd/ http://ugotit.de/2011/04/28/adress-und-suchfeld-im-firefox-kombinieren-awesomebar-hd/#comments Thu, 28 Apr 2011 10:38:49 +0000 Daniel http://ugotit.de/?p=265

Ich nutze ja schon lange Chrome und Chromium, komme aber bei der Webentwicklung nicht an Firebug und somit Firefox vorbei. Eine der Dinge, die mir, neben der noch immer mäßigen Geschwindigkeit, an Firefox nicht gefällt sind die getrennten Leisten für die Adresse und die Suche aus dem Browser. Das geht schöner, wie uns Chrome schon lange zeigt.

Natürlich gibt es hier schon ein paar nette Erweiterungen für den Firefox, seit kurzem, wie ich auf golem.de gesehen habe, aber auch aus den Mozilla Labs: Awesomebar HD. Einfach auf die Addon-Seite gehen und das experimentelle Addon installieren. Klappt direkt ohne Neustart.

]]> http://ugotit.de/2011/04/28/adress-und-suchfeld-im-firefox-kombinieren-awesomebar-hd/feed/ 0 Chrome Extensions: Hello World http://ugotit.de/2009/12/28/chrome-extensions-hello-world/ http://ugotit.de/2009/12/28/chrome-extensions-hello-world/#comments Mon, 28 Dec 2009 15:11:36 +0000 Daniel http://ugotit.de/?p=12 Langsam aber sicher gewinnt Googles neuer Browser Chrome (für die, die Google nicht vertrauen gibt es noch Chromium) mehr und mehr an Beliebtheit was sicherlich an der schnellen Ladezeit (sowohl des Programms als auch von Webseiten) liegt. Auch wenn noch nicht klar ist, wo genau Google mit Chrome hin will (Chrome OS ist hier ja eine Variante) habe ich das Gefühl, dass Google der Konkurrenz zeigt, wie sich ein Browser verhalten sollte.

Besonders gut gefällt mir bei Chrome der Ansatz, den die Entwickler bei den Erweiterungen gehen: Mozillas Firefox zeigte hier ja schon vor einigen Jahren, wie interessant Erweiterungen für Nutzer sein können. Angefangen bei Werbeblockern, E-Mail Benachrichtungen bis zu vollwertigen Twitter-Clients findet man allerlei nützliches (aber auch überflüssiges) um den eigenen Browser zu verbessern.

Googles Chrome geht hier einen interessanten Weg denn im Prinzip basieren die Extensions erstmal auf HTML, CSS und JavaScript und nutzen die Möglichkeiten, die diese Sprachen liefern (u.a. auch client-side data storage in HTML5), vollständig. Es lässt sich also, mit Kenntnissen in diesen drei Sprachen schon eine eigene Erweiterung programmieren, was ich Euch an einem einfachen beispiel demonstrieren möchte.

Vorbereitungen

  1. Lade Dir Chrome oder Chromium (wenn Du ein wenig Googlest ersparst Du Dir ggf. den Browser selber compilieren zu müssen) auf Deinen Rechner: (Windows/Linux / Mac)
  2. Erstelle einen Ordner "HelloWorld" auf Deinem Rechner der den Code beinhalten wird.
  3. Erstelle eine Datei manifest.json, die einige Informationen zu Deiner Erweiterung beinhalten wird.

manifest.json

  1. {
  2. "name": "Hallo Welt",
  3. "version": "1.0",
  4. "description": "Meine erste Erweiterung.",
  5. "browser_action": {
  6. "default_icon": "icon.png"
  7. }
  8. }

Die Bezeichnungen in der JSON-Datei sollten selbsterklärend sein. Die einzigen Punkte hier sind "browser_action" und "default_icon" welche wir brauchen, damit unsere Erweiterung auch ein Icon neben der Adressleiste in Chrome bekommt.

icon.png

Natürlich brauchen wir auch ein passendes Icon für unsere Anwendung. Ich greife hier auf ein Iconset von Manuela Hoffmann zurück, welches ihr unter www.pixelgraphix.de findet. Das Icon Eurer Wahl wandelt Ihr dann noch schnell in png um und nennt es icon.png. Sowohl manifest.json als auch icon.png kommen in den Ordner HelloWorld.

Erster Test

Und schon können wir die Erweiterung testen:

  1. Öffne Chrome und dort die Seite mit den Erweiterungen. (Unter Linux findet man diese, wenn man auf das Icon mit dem Schraubenschlüssel klickt. Am Mac unter dem Menüpunkt "Fenster.")
  2. Klicke auf "Entwicklermodus"
  3. Importiere den Ordner HelloWorld indem Du auf "Entpackte Erweiterung laden…" klickst

Blick auf den Entwicklermodus in Googles Chrome

Du solltest jetzt, wenn Du alles richtig gemacht hast, das Icon oben neben der Adressleiste sehen. Du kannst zwar schon auf das Icon klicken aber noch bringt Dich das nicht weiter.

Etwas anzeigen

Interessanter wird es jetzt, wenn wir die Erweiterung ein wenig ausbauen. Es geht uns jetzt erstmal nur um ein kleines Fenster in dem, wie der Name des Tutorials schon vermuten lässt, "Hallo Welt" steht.

Damit unsere Erweiterung auch weiß, welche HTML-Datei sie anzeigen soll, ergänzen wir die manifest.json nun um eine neue Zeile:

  1. ...
  2. "browser_action": {
  3. "default_icon": "icon.png",
  4. "popup": "popup.html"
  5. },
  6. ...

popup.html

Bei der Datei popup.html, die wir ebenfalls in unserem Ordner HelloWorld speichern, handelt es sich um eine simple HTML5-Datei:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Hallo Welt</title>
  6. </head>
  7. <body>
  8. <p>
  9. Hallo Welt.
  10. </p>
  11. </body>
  12. </html>

Wenn Du diese Erweiterung jetzt installierst (deinstallier die allte Version besser vorher – habe ich schon erwähnt, wie toll es ist nicht bei jeder Änderung an Erweiterungen den Browser neu starten zu müssen?) solltest Du bei einem klick auf Dein Icon den Text "Hallo Welt" lesen können.

Optimierungen

Die fertige Erweiterung im EinsatzDamit unsere Ausgabe nun etwas schöner ist formatieren wir sie jetzt noch mit etwas CSS. Auf die Möglichkeiten die JavaScript uns noch bietet gehe ich vielleicht später mal ein.

HTML

  1. <head>
  2. ...
  3. <link rel="stylesheet" href="style.css" type="text/css" />
  4. </head>

CSS

  1. body {
  2. font-size: 150%;
  3. font-family: Helvetica,Arial,Verdana,sans-serif;
  4. color: #fff;
  5. text-shadow: 0px 2px 3px #555;
  6. font-weight: bold;
  7. background: #cdd9e6;
  8. width: 350px;
  9. height: 75px;
  10. }
]]> http://ugotit.de/2009/12/28/chrome-extensions-hello-world/feed/ 0