Home > Open Source, Web 2.0 > Extensions für Google Chrome / Chromium

Extensions für Google Chrome / Chromium

Ich schreibe derzeit einige Extensions für den Google Browser und finde das ein ganzes Stück einfacher als bei Firefox. Bin zwar nach wie vor Firefox-Nutzer und schreibe auch Extensions für diesen Browser, aber hier gebührt Google wirklich Lob. Das ist sehr gut gelöst.

Hintergrund für meine Extension-Entwicklung ist das Projekt 2ndspring. Letztlich geht es um ein Entwicklung für das Tablet um ältere Mitbürger mit einer vereinfachten Bedienoberfläche den Einstieg in das Netz der Netze möglichst einfach und intuitiv zu gestalten. Dabei nutzen wir natürlich Browser-Technologie als Basis und haben uns hier für den Google-Browser entschieden. Diese Entscheidung ist maßgeblich bestimmt durch 2 Dinge

  • Chrome gibt es auch als App für das iPad
  • Wir werden Telefonie und Video-Conferencing im Browser anbieten und nutzen daher WebRTC („WebRTC is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple Javascript APIs.“)

Ziel unserer Entwicklung ist eine Web-Applikation, die im Kioskmode betrieben wird. Der Anwender am Tablet sieht also eine Seite ohne Browser-Rahmen und Navigation im Vollbild-Modus. Damit er aber während des Surfens wieder zurück zu seinem Heimathafen, der 2ndspring-Startseite, findet, benötigt er als Overlay eine unaufdringliche, aber permanent verfügbare Navigation über jeder besuchten Seite. Dazu soll die 2ndspring-Extension sich bei jedem Seitenaufruf einklinken und diese Navi drüberlegen (inject html auf gut Neudeutsch).

Nun aber genug Hintergrund. Ich beschreibe jetzt einfach kurz die Komponenten einer solchen Extension und biete dann zum Schluss einen Link um sich den Source-Code herunterzuladen.

Funktionierendes Beispiel für eine Chrome-Extension mit Download

Damit es auch ein sinnvolles Beispiel ist,  ist die Extension komplett unsichtbar und blendet nur zu gegebener Zeit einen „Back to Top“-Link am rechten unteren Rand ein, wenn die besuchte Seite zu lang ist und wir begonnen haben zu „scrollen“. Ist man wieder am Seitenanfang, verschwindet dieser Link wieder. Sieht so aus:

So was benötige ich für so eine Erweiterung ? Nun kurz gesagt einen Dateiordner mit ein paar Dateien und Chrome 🙂 …

Der Inhalt des Ordners sieht so aus:

Diese Icons sind lediglich kleine Bildchen (immer das Gleiche)  in verschiedenen Größen. Man sieht bei meiner Extension eigentlich nur das 48×48-Icon auf der Chrome-Erweiterungsseite. Aber das sind die 4 Standard-Icons und die erzeuge ich immer gleich alle.

jquery-1.7.2.min.js ist einfach jQuery, das ich für meinen Code benötige um mir nicht die Finger wund zu tippen.

Bleiben also noch genau 4 Files, die ich jetzt kurz beschreibe:

Startpunkt und zentrales File ist das manifest.json


{
  "name": "toTop",
  "version": "1.0",
  "description": "system worx GmbH Co KG : Get a dynamic To Top link in lower right corner on any long page",
  "background": { "scripts": ["background.js"] },
  "permissions" : [
    "tabs",
    ""
  ],
  "page_action" :
  {
    "default_icon" : "icon-19.png",
    "default_title" : "Back to Top"
  },
  "icons" : {
  	"16": "icon-16.png",
    "48" : "icon-48.png",
    "128" : "icon-128.png"
  },
  "manifest_version": 2
}

Überschaubar, nicht wahr ? Die meisten Zeilen sollten selbsterklärend sein.

In der Zeile mit „background“ gebe ich alle Scripts an, die ich laden möchte. Hier nur background.js, das es immer gibt und den Einstiegspunkt darstellt.

Der Block mit „permissions“ definiert die Berechtigungen unserer Extension. In diesem Fall benötige ich genu 2:

  • „tabs“ : ich möchte Zugriff auf die Tabs, Laschen des Browser haben
  • „<all_urls>“ : ich möchte meinen „Back to Top“ in jede Seite „einimpfen“

Das „background.js“ :

Dieses File ist zentral und notwendig. Es wird beim Browser-Start (bzw. Installation unserer Erweiterung) geladen. Wird definieren hier unsere Eventhandler um z.B. in unserem Fall bei jedem Seitenaufruf eine definierte Funktion aufzurufen.


/**
 * Called when a page is loaded in a tab
 * See event listener at the end of this file
 */
function newPageLoad(tabId, changeInfo, tab) {
	// we only create our toTop-Link when page is finished loading
	if (changeInfo.status == "complete") {

		/**
		 * Inject in any loaded page :
		 * 	- Our style sheet to style our toTop-Link
		 * 	- jQuery for our content.js - script
		 * 	- The code to show or hide our toTop-link
		 */
		chrome.tabs.insertCSS(null, { file: "totop.css" }, function() {
			chrome.tabs.executeScript(null, { file: "jquery-1.7.2.min.js" }, function() {
				chrome.tabs.executeScript(null, { file: "content.js" });
			});
		});

	}
};

/**
 * Event listeners
 */
// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(newPageLoad);

Am Ende definiere ich den Eventhandler, der bei jedem Update-Event in jedem Tab die Funktion newPageLoad aufruft.

Mit dem verschachtelten Aufruf dort „impfe“ ich die aufgerufene Webseite mit meinem jQuery und meinem Stylesheet und rufe content.js auf.

content.js:

show_toTop();

/**
 * inject the toTop on loaded page
 */
function show_toTop() {
	// create div with "Back to Top" text and show or hide it depending on page length
	var scrollDiv = document.createElement("div");
	$(scrollDiv).attr("id", "toTop").html("^ Back to Top").appendTo("body");
	$(window).scroll(function() {
		if ($(this).scrollTop() != 0) {
			$("#toTop").fadeIn();
		} else {
			$("#toTop").fadeOut();
		}
	});
	// event handler:
	$("#toTop").click(function() {
		$("body,html").animate({
			scrollTop : 0
		}, 800);
	});
}

Beim Aufruf wird also show_toTop aufgerufen, das den ganzen Zauber mit JavaScript, DOM und ein wenig jQuery erledigt.

totop.css der Vollständigkeit halber:

@CHARSET "UTF-8";

#toTop {
    background: none repeat scroll 0 0 #121212;
    border: 1px solid #333333;
    bottom: 0;
    color: #FFFFFF;
    cursor: pointer;
    display: none;
    font-size: 0.9em;
    padding: 5px;
    position: fixed;
    right: 0;
    text-align: center;
    text-transform: lowercase;
    width: 100px;
    z-index: 10;
}

Ist doch gar nicht so dramatisch, nicht wahr ?

Übrigens ist dieser Code als Javascript inkludiert auch auf unseren Webseiten eingebaut.

Hier nun der versprochene Download-Link : Zip-File mit Ordner

Ach ja :

Alles was es zur Entwicklung von Chrome-Extensions zu wissen gibt, findet man hier : http://code.google.com/chrome/extensions/index.html

Installation einer Erweiterung in Chrome:






  1. Bisher keine Kommentare
  1. Bisher keine Trackbacks