Nico Steiner - Frontend-Entwicklung und -Architektur

Montag, 24. Oktober 2011

Mini-Suchmaschine mit Frontend-Technologien

Die SenSEO-Extension bekommt ein neues Feature "Analyze all pages". Hiermit soll es möglich sein, mit einem Klick die gesamte Website zu crawlen und sämtliche Seiten anhand vorgegebener Keywords zu bewerten. Dieses Crawlen und Bewerten wird ausschließlich mit Frontend-Technologien implementiert. Die nachfolgende Grafik zeigt die geplanten Schritte.



Der Anfang ist bereits geschafft. Mit diesem Prototypen (läuft nur im Firefox) ist es möglich, aus dem Markup einer vorgegebenen Seite sämtliche Links zu extrahieren. Es können lediglich Seiten von sensational-seo.com angegeben werden, da die Same Origin Policy nur Seiten der selben Domain für die Analyse zulässt.

Das Markup wird mit der XMLHttpRequest API abgerufen und mit der evaluate Function der Firefox XPath JavaScript API geparst.

Da die API lediglich DOM Dokumente https://developer.mozilla.org/en/DOM/document verarbeitet, wird die als String gelieferte XMLHttpRequest Response vorher einem iFrame als Inhalt zugewiesen. Der folgende Code macht dies möglich.

// create iframe

var responseTextIframeElement = document.createElement('iframe');

responseTextIframeElement.setAttribute('width', '0');

responseTextIframeElement.setAttribute('height', '0');

responseTextIframe = document.body.appendChild(responseTextIframeElement);

responseTextIframe.contentWindow.document.write(responseText);

var responseXML = responseTextIframe.contentWindow.document;

// clear iframe

responseTextIframe.parentNode.removeChild(responseTextIframe);

mse.Crawler.gotPageContentByUrl(responseXML);

Möchte man ohne XMLHttpRequest API arbeiten, kann man einem zuvor erzeugten iFrame auch einfach den URL als scr-Attribut zuweisen.

// create iframe

var responseTextIframeElement = document.createElement('iframe');

responseTextIframeElement.setAttribute('width', '0');

responseTextIframeElement.setAttribute('height', '0');

responseTextIframe = document.body.appendChild(responseTextIframeElement);

responseTextIframe.addEventListener('load', function(e) {

  var responseTextIframe = this;

  var responseXML = responseTextIframe.contentWindow.document;

  // clear iframe

  responseTextIframe.parentNode.removeChild(responseTextIframe);

  // this is not the best sollution

  mse.Crawler.gotPageContentByUrl(responseXML);

}, false);

responseTextIframe.src = url;        

Die Extrahierung der href-Attribute aus sämtlichen Anker-Tags übernimmt dann der folgende Code.

var allLinksXpath = responseXML.evaluate('/html/body//a/@href', responseXML, null, XPathResult.ANY_TYPE, null);

In einem nächsten Schritt sollen all die Verlinkungen extrahiert werden, welche absolut (mit http Schema) auf die selbe Domain verweisen oder Seiten relativ referenzieren. Diese Verlinkungen werden mit der Local Storage API auf einem Stack abgelegt und sequentiell nach dem LILO-Prinzip (Last in, Last out) gecrawlt. Dabei wird die Bereinigung von Dubletten mit Hilfe des Canonical-Tag eine wichtige Rolle spielen. Im Local Storage wird neben der extrahierten URL also auch immer eine zweite kanonische URL abgelegt, welche durch einen entsprechenden Abgleich das doppelte Crawlen von Seiten verhindern soll.

Geschrieben von Nico Steiner in Referenzen um 20:44 | Kommentare (2) | Trackbacks (0)