Mac OS X: Google Reader Desktop Client selber bauen

Nachdem ich für mein neues Macbook Pro auf der Suche nach einem schönen Desktop Client für Google Reader war – mir aber Adobe AIR Applikationen nicht so gut gefallen – war ich zunächst sehr erfreut darüber, dass NewsGator in der neuen NetNewsWire Version einen Google Reader Connector eingebaut hat. Was mich aber am neuen NetNewsWire gestört hat, war die blinkende Werbung in der linken Fensterecke. Darum habe ich mich daran gemacht, mir mit Fluid, HelvetiReader und ein paar Userscripts einen schicken Desktop Client zu bauen. Fluid ist eine Software mit der sich Anwendungen aus Webseiten erstellen lassen, die man mit Scripten erweitern kann.

Dieser von mir gebaute Desktop Client unterstützt Growl Notifications das Dock Icon hat ein Badge, dass die ungelesenen Reader-Items zeigt, Favicons der Feeds werden angezeigt und er sieht so aus:

Nur wie habe ich die Applikation gebaut? Als Erstes habe ich Fluid herunter geladen und installiert. Hinterher habe ich damit ein neues Programm erstellt:

Das Dock Icon für die Anwendung gibt es von Joshua Brewer bei Flickr.

Als nächstes kann das soeben erstellte Programm gestartet werden und es geht ans erstellen der Userscripts. Dazu muss auf die schwarze Papierrolle in der Menuleiste geklickt werden und ein neues Userscript erstellt werden.

Das erste Stück Script ist für das Aussehen unseres Desktop Clients nötig. Da mir der HelvetiReader gefällt habe ich auch dessen Skript eingefügt:


// ==UserScript==
// @name Helvetireader
// @description Helvetireader style for Google Reader
// @include https://*.google.com/reader/view/*
// @include http://*.google.com/reader/view/*
// @include htt*://*.google.*/reader/view*
// @author Helvetireader by Jon Hicks (http://www.hicksdesign.co.uk) with favicon override by MkFly
// ==/UserScript==

var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'http://www.helvetireader.com/css/helvetireader.css';
cssNode.media = 'screen';
cssNode.title = 'dynamicLoadedSheet';
document.getElementsByTagName("head")[0].appendChild(cssNode);


Als nächstes braucht ihr den Code für das Laden der Favicons den ich beim Userscripts User sethaurus gefunden habe:


function fetch(url, callback) {
var xhr = new XMLHttpRequest;
xhr.open('get', url);
xhr.onload = function () {
callback(xhr.responseText);
};
xhr.send(null);
};

drawFavicon(icon);
});
});
})();


Für die Growl Notifications ist der Code von tanguy zuständig:

(function() {

//return;
var news = getElementsByClassName('entry read');
for(i=0; i < ((fluid_unread/1)-(old_fluid_unread/1)); i++) { var feed = news[i].getElementsByClassName('entry-source-title link')[0].innerText; var preview = news[i].getElementsByClassName('entry-title')[0].innerHTML; //alert(i); fluid.showGrowlNotification({ title: feed, description: preview, priority: 1, onclick: activate_window, identifier: "greader_" + i, sticky: false }); } } function activate_window() { //alert('hi'); window.fluid.activate(); window.fluid.unhide() this.window.focus(); window.focus(); } function setfocused() { focused = true; } function notfocused() { focused = false; } })(); /* === GETELEMENTSBYCLASSNAME === Developed by Robert Nyman, http://www.robertnyman.com Code/licensing: http://code.google.com/p/getelementsbyclassname/ ============================== */ var getElementsByClassName = function(className, tag, elm) { if (document.getElementsByClassName) { getElementsByClassName = function(className, tag, elm) { elm = elm || document; var elements = elm.getElementsByClassName(className), nodeName = (tag) ? new RegExp("\\b" + tag + "\\b", "i") : null, returnElements = [], current; for (var i = 0, il = elements.length; i < il; i += 1) { current = elements[i]; if (!nodeName || nodeName.test(current.nodeName)) { returnElements.push(current); } } return returnElements; }; } else if (document.evaluate) { getElementsByClassName = function(className, tag, elm) { tag = tag || "*"; elm = elm || document; var classes = className.split(" "), classesToCheck = "", xhtmlNamespace = "http://www.w3.org/1999/xhtml", namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace) ? xhtmlNamespace: null, returnElements = [], elements, node; for (var j = 0, jl = classes.length; j < jl; j += 1) { classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]"; } try { elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null); } catch(e) { elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null); } while ((node = elements.iterateNext())) { returnElements.push(node); } return returnElements; }; } else { getElementsByClassName = function(className, tag, elm) { tag = tag || "*"; elm = elm || document; var classes = className.split(" "), classesToCheck = [], elements = (tag === "*" && elm.all) ? elm.all: elm.getElementsByTagName(tag), current, returnElements = [], match; for (var k = 0, kl = classes.length; k < kl; k += 1) { classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)")); } for (var l = 0, ll = elements.length; l < ll; l += 1) { current = elements[l]; match = false; for (var m = 0, ml = classesToCheck.length; m < ml; m += 1) { match = classesToCheck[m].test(current.className); if (!match) { break; } } if (match) { returnElements.push(current); } } return returnElements; }; } return getElementsByClassName(className, tag, elm); }; /* === //GETELEMENTSBYCLASSNAME === */

Wenn man diese Codestücke ins Userscript eingefügt hat, kann man es speichern. Jetzt muss es nur noch aktiviert werden, dies geht indem man nochmals auf die schwarze Papier Rolle im Menü klickt und ein Häkchen vor dem Script setzt. Ein Neustart genügt und man ist fertig.

Für Kommentare und Anregungen wäre ich dankbar. :-)