MACpraxis - Eigene Erweiterung für Safari 5

MacMagazin

Apple hat Safari runderneuert. Neben mehr Geschwindigkeit kann man Safari 5 nun mit eigenen Erweiterungen bestücken. Dies sind keine Plug-ins im herkömmlichen Sinne, um etwa zusätzliche Medientypen darstellen zu können. Sie basieren ausschließlich auf HTML, CSS, PHP und JavaScript und können dazu beitragen, Safari nach persönlichen Vorlieben aufzumöbeln. Außerdem laufen sie in einer Sandbox. Dadurch wird das Risiko minimiert, dass Schadcode über Safari-Erweiterungen ins System eingeschleust werden kann.

TeaserExtensions

MACup_09_2010_Titel_140
Dieser Artikel erschien in der MACup und wurde von den Online-Lesern als bester Artikel der Ausgabe 09/2010 ausgezeichnet.

Unser Angebot: 2 Ausgaben der MACup kostenlos und unverbindlich testen!

http://www.macup.com/macnews/

Welche Voraussetzungen müssen erfüllt sein, um ansprechende Erweiterungen zu entwickeln? Installieren Sie zuerst die aktuelle Version von Safari 5, falls noch nicht geschehen. Ohne die schon angesprochenen HTML-, CSS- und JavaScript-Kenntnisse geht schon mal gar nichts. Unter Einstellungen · Erweitert aktivieren Sie dann in Safari das Entwickler-Menü. Rufen Sie Entwickler · Erweiterungen aktivieren auf. Nun erscheint in den Einstellungen von Safari der neue Unterpunkt Erweiterungen. Hier können Sie alle installierten Erweiterungen für Safari global ein- und auch wieder ausschalten.

Erweiterungen

Um selbst zu entwickeln, muss man sich außerdem beim Safari-Entwicklerprogramm von Apple anmelden. Die Mitgliedschaft ist kostenlos. Melden Sie sich als Privatperson und nicht als Firma an, um den Vorgang zu beschleunigen. Sie müssen auf dieser Seite auch dann auf Register gehen, wenn Sie bereits eine andere Developer-Mitgliedschaft von Apple haben. Ihre bereits vorhandene Apple-ID können Sie weiterverwenden. Nach Anmeldung und erfolgreichem Login erstellen Sie ein Zertifikat. Folgen Sie unter Safari Extension Certificates den Schritt-für-Schritt-Anweisungen auf dem Bildschirm, um ein Safari-Entwicklerzertifikat anzufordern und mit der Schlüsselbundverwaltung zu installieren. Beginnen Sie über das Menü Schlüsselbundverwaltung · Zertifikatsassistent · Zertifikat einer Zertifizierungsinstanz anfordern. Nun können Sie das Zertifikat herunterladen. Die Datei endet auf .cer und wird per Doppelklick im Schlüsselbund installiert. Anschließend geben Sie Ihre unter der Apple-ID hinterlegte E-Mail ein und verleihen dem Key eine aussagekräftige Bezeichnung. Kreuzen Sie Auf der Festplatte sichern an und fahren Sie fort. Diese Prozedur muss für jede Erweiterung, die man selbst entwickelt, wiederholt werden.

Erweiterung erstellen

Unsere Erweiterung benötigt einen Apache-Server mit aktiviertem PHP, JavaScript und etwas HTML mit CSS-Stilen. Da es sich um eine US-Vorlage handelt, ist ohne eine umfangreichere Umwandlung von Sonderzeichen wie Umlaute das Scheitern vorprogrammiert. Deshalb haben wir uns dazu entschieden, einen englischsprachigen Nachrichten-Feed der Nasa auf Twitter über eine Erweiterungsleiste in Safari zu integrieren. Es besteht auch die Möglichkeit, Icons für die Symbolleiste zu erstellen, doch ein solcher Befehlsaufruf erfordert weitaus größeren Aufwand und würde den Rahmen des Artikels sprengen. Denkbar sind zum Beispiel Steuerelemente für iTunes

Rufen Sie im aktivierten Entwickler-Menü Extension Builder einblenden auf. Klicken Sie unten links auf das Pluszeichen und im Auswahlmenü auf Neue Erweiterung, um mit der Entwicklung zu beginnen. Geben Sie der neuen Erweiterung einen Namen und legen Sie den Speicherort fest. Zunächst wird ein Ordner mit einer Info.plist erstellt. HTML-Dokumente und Icons, also alles, was zur Erweiterung gehört, legen Sie später ebenfalls in diesen Ordner. Der Extension Builder unterstützt den Entwickler bei der Erstellung, doch es kommen auch Fragen auf. Es werden nur Dateien mit den Endungen .html, .css, .js oder .png akzeptiert. Andere erscheinen erst gar nicht zur Auswahl im Ausklappmenü. Achten Sie also darauf, .htm gegen .html auszutauschen.
Als Grundgerüst für unsere Erweiterung besuchen Sie die URL: www.dynamicdrive.com/dynamicindex17/rsspausescroller/
Scrollen Sie auf der Website etwa zur Mitte und laden Sie rsspausescroller.zip. Darin befinden sich die Dateien, um einen dynamischen Scrolltext zu erstellen. Auch dieses Archiv finden Sie in den Materialien zum Workshop auf der Heft-CD. Im Ordner lastrss liegt der erforderliche PHP-Code. Auch wenn Sie die Erweiterung nur lokal nutzen möchten, müssen Sie PHP in der Datei httpd.conf einschalten, da die Inhalte damit dynamisch generiert werden. Öffnen Sie die Datei mit einem reinen Texteditor wie TextWrangler oder nano im Terminal. Sie befindet sich im Verzeichnis /private/etc/apache2/. Navigieren Sie auf Zeile 144, die mit #LoadModule php5_module beginnt. Entfernen Sie die Raute (#) und speichern Sie die Konfiguration. PHP 5 ist damit aktiviert. Im Terminal muss nun noch die PHP-Konfiguration angepasst werden. Mit cd /private/etc wechseln Sie in das Verzeichnis. Im Anschluss geben Sie sudo cp php.ini.default php.ini ein, um die Default-Werte in die Konfiguration zu kopieren. Da es sich um eine Systemdatei handelt, muss sudo vorangestellt und das Admin-Passwort bestätigt werden.

Um zu testen, ob alles funktioniert, navigieren Sie in den Ordner /Library/WebServer/Documents im Wurzelverzeichnis Ihrer Festplatte. Erstellen Sie hier eine Datei namens test.php mit dem Inhalt <?php phpinfo(); ?>


Unter Systemeinstellungen · Freigaben aktivieren Sie die Webfreigabe. Damit startet der Apache-Webserver. Geben Sie in Safari localhost/test.php in die Adresszeile ein, um zu testen, ob die PHP-Konfiguration erfolgreich verlaufen ist.

Kopieren Sie den ausgepackten Ordner namens rsspausescroller ebenfalls auf den Webserver unter /Library/WebServer/Documents.
Ändern Sie die Endung von demo.htm auf .html und bewegen Sie diese und die Datei rsspausescroller.js in den noch leeren Erweiterungsordner. Den Feed selbst passen Sie in der Datei scrollerbridge.php im Ordner /Library/WebServer/Documents/rsspausescroller/lastrss an. Entfernen Sie die RSS-Feeds von CNN & Co. aus der Vorlage und verwenden Sie wie in der Abbildung stattdessen “macup” => “http://twitter.com/statuses/user_timeline/11348282.rss”,
Navigieren Sie in demo.html zur Zeile, die mit new rsspausescroller beginnt, also zur fünften Zeile von unten. Ändern Sie darin den Delay-Wert für eine angenehmere Scroll-Geschwindigkeit zur nächsten Meldung von 3000 auf 4500 Millisekunden. In der HTML-Datei passen Sie den CSS-Teil etwas an, damit die Textzeile gut lesbar in der Safari-Leiste erscheint.

Falls die Erweiterung ein eigenes Icon erhalten soll, erstellen Sie dafür eine quadratische PNG-Datei mit 100 Pixeln in Höhe und Breite und legen diese ebenfalls in den Erweiterungsordner.
Jetzt geht es darum, die Erweiterung zu testen. Seien Sie nicht entmutigt, wenn der Balken nach dem ersten Klick auf Installieren leer bleibt oder eine Fehlermeldung anzeigt. Auch bei uns hatte sich bei Verwendung der Vorlagen eine falsche Pfadangabe eingeschlichen. Infrage kommen nur zwei mögliche Ursachen: Entweder wird der PHP-Code oder das JavaScript nicht gefunden oder die Feed-URL ist fehlerhaft.

Sie können den Code jederzeit erweitern und zum sofortigen Ausprobieren die Erweiterung im Extension Builder neu laden. Wenn Sie das Skript anpassen, um andere Feeds darzustellen, beachten Sie, dass die URL mit http:// und nicht etwa feed:// beginnen muss. Zur erneuten Initialisierung im Extension Builder müssen Sie nicht etwa über Deinstallieren gehen, sondern Sie klicken einfach auf den Button Neu laden. Wie Sie sehen, handelt es sich nicht um ein langweiliges Laufband, sondern die Texte bleiben 4500 Millisekunden stehen und scrollen elegant vertikal aus der Leiste.
Etwas unpraktisch hat Apple gelöst, dass die Leiste nach der Installation auf allen bereits geöffneten Safari-Fenstern erscheint. Sie kann aber über das Menü Darstellung individuell aus- und wieder eingeblendet werden. Hinter den eingeblendeten Feeds sind auch Links hinterlegt, doch hier ist es uns in der Kürze der Zeit noch nicht gelungen, dass sich nach einem Klick darauf auch die entsprechende Website öffnet.

Erweiterung veröffentlichen

Um einen Installer für die Erweiterung zu erstellen, genügt im Extension Builder ein Klick auf Paket erstellen. Damit erhält man im gleichen Ordner ein Installer-Paket mit der Endung .safariextz, das sich zur Weitergabe eignet. Da unser Beispiel auf dem lokalen Rechner einen Webserver mit PHP erfordert, ist für die Weitergabe des Installers Folgendes vonnöten: die Veröffentlichung des PHP-Ordners auf einem frei zugänglichen Webserver mit aktiviertem PHP und eine entsprechende Pfadanpassung im JavaScript-Teil. Testen Sie die Erweiterung entsprechend gründlich vor der Veröffentlichung. Die Erweiterung kann bei Apple eingereicht werden, wo sie in der Extensions Gallery gelistet wird. Dazu muss sie mit einem Zertifikat signiert sein, ein Download-Link bereitgestellt werden und ein Icon mit 100 x 100 Pixeln mitgeliefert werden. Außerdem muss ein Bildschirmfoto beigefügt sein und die Kategorie angegeben werden. Die Galerie möchte Apple im Laufe des Sommers live schalten. Ob die Veröffentlichung ähnlich streng reglementiert ist, wie im App Store muss sich erst noch zeigen.

Fazit
Es sei jedem angeraten, sich die drei PDFs zur Dokumentation von Apple herunterzuladen und diese genau zu studieren. Doch auch ohne tiefschürfende Vorkenntnisse lassen sich bereits Erweiterungen erstellen, die wie die hier vorgestellte permanent, aber unaufdringlich Nachrichten als Schlagzeilen in Safari einblenden. Komplexe Erweiterungen können Einfluss auf das Aussehen und die Darstellung von Websites in Safari nehmen, aber keinen eigenen Content anzeigen. Dies kann im Extension Builder über Start-Skripts und End-Skripts und Style-Sheets erfolgen. me

Materialien und Beispielcode:
http://developer.apple.com/safari/
Dokumentation:
http://developer.apple.com/safari/library/
Einreichung:
https://developer.apple.com/submission/safari/

Weitere Themen: Apple