Eigenes Firefox Searchplugin – Javascript Tutorial
Posted on 26. Jul, 2009 by admin in CSS/HTML Tutorials
So sieht das Suchfeld in Firefox aus.
Hier ein Tutorial für alle Firefox User oder für Webmaster die Firefox Usern eine Möglichkeit bieten wollen, die eigene Seite einfach und schnell direkt in Firefox zu durchsuchen. Firefox hat nämlich eine kleine Suchbox in der man standartmässig auf Google oder Yahoo suchen kann, jedoch kann man dort auch ganz einfach dem User ermöglichen dort die eigene Seite einzubinden. Wie das genau geht und was ihr dazu braucht, erkläre ich euch hier in diesem Tutorial.
Lernziele:
- Javascript Browserweiche
- Firefox Suchplugin erstellen
Voraussetzungen:
- Basis HTML Kentnisse
Für eine Vorschau hier klicken.
Zuerst etwas Theorie, Firefox und der Internet Explorer (ab ver 7.0) unterstützen den Opensearch Standard. Dieser wurde eingeführt um Suchergebnisse zu vereinheitlichen um so möglichst vielen Clients das Auslesen der Sucherebnissen zu ermöglichen.
So nun aber zum eigentlichen “Plugin”. Eigentlich ist dies nichts weiter als eine .xml Datei. Erstellt also eine neue .xml Datei und gebt ihr zum Beispiel den Namen “opensearch.xml”. Nun gebt ihr dort folgendes ein:
1 2 3 4 5 6 7 8 9 10 | <?xml version="1.0" encoding="UTF-8"?> <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> <ShortName>Name der Seite</ShortName> <Description>eine kurze Beschreibung</Description> <Url template="die Suchurl" type="text/html" method="GET" /> <Image height="16" width="16" type="image/vnd.microsoft.icon">Adresse zu Bild in .ico Format</Image> <OutputEncoding>UTF-8</OutputEncoding> <InputEncoding>UTF-8</InputEncoding> </OpenSearchDescription> |
Das meiste sollte eigentlich klar sein, unter “Url template” gebt ihr an, an welche URL der Suchstring gesendet werden soll. Diese kann zum Beispiel so aussehen: www.deinedomain.de/suche.php?suche=. Unter “Image” kann man optional noch den Link zu einem Bild im .ico Format angeben, dieses wird dann in dem Suchfeld angezeigt. Zum Beispiel kann man den Link zu einem Favicon angeben: http://www.xdee.net/favicon.ico
Nun da wir unsere .xml Datei haben, müssen wir dem Browser noch mitteilen, dass die Seite ein solches Plugin anbietet. Dies tun wir ganz einfach indem wir in einem HTML Dokument im HEAD Bereich folgendes hinzufügen:
1 | <link rel="search" type="application/opensearchdescription+xml" title="Titel deiner Seite" href="Adresse von opensearch.xml Datei" /> |
Nun weiss der Browser also, dass so ein Plugin vorhanden ist, um das Plugin aber nun hinzuzufügen brauchen wir nun aber noch etwas Javascript.
Mit folgendem Code bewirken wir, dass das Suchplugin beim Aufruf der Funktion hinzugefügt wird:
1 2 3 4 5 6 7 8 | function searchAdd() { if (window.external && ("AddSearchProvider" in window.external)) { window.external.AddSearchProvider("Link zu opensearch.xml Datei"); } else { alert("Ihr Browser unterstütz leider keine Suchplugins. Benutzen Sie doch Firefox oder den IE 7.0"); } } |
Zuerst wird geprüft ob “window.external” und die Funktion “AddSearchProvider” existieren. Im Firfox und im IE ist dies der Fall. Danach wird eben diese Funktion aufgerufen und das Suchplugin wird hinzugefügt.
Nun müssen wir diese Funktion noch aufrufen, mit etwas HTML Code können wir dies zum Beispiel beim Klick auf einen Link tun:
So, beim Klick auf den Link wird eine Meldung erscheinen und euer Browser wird euch fragen, ob ihr die Suche hinzufügen wollt oder nicht. Danach wird die Suche im Browser im Suchfeld möglich sein.
Dies ist eine gute Möglichkeit um dem User eine einfache Suche zu ermöglichen, ohne dass er zuerst die Seite aufrufen muss.
Für Fragen, Kritik etc. benutzt doch einfach die Kommentarfunktion 
MFG
Michael
Christopher
Jul 29th, 2009
Auf yahoo hat glaube ich schon lange niemand mehr die Suche standardmäßig eingestellt
Google ist bei mir Standard, aber ich nutze auch wirklich oft, die anderen Suchen, die ich persönlich hinzugefügt habe. Das ist echt praktisch und ärgere mich schon immer, wenn eine Seite diese Funktion nicht zur Verfügung stellt. Von daher hoffe ich, dass das hier ganz viele lesen, damit man in Zukunft noch viel mehr verschiedene Suchoptionen speichern kann.
admin
Jul 29th, 2009
Yahoo war nnur ein Beispiel. Doch auf vielen Seiten ist es angenehm wenn man sie so durchsuchen kann.
Wir werden sehen, ob ein Suchplugin irgendwann vielleicht sogar zur Standartausrüstung einer Website gehören wird…
MFG
Michael
Karl
Sep 3rd, 2009
Hi,
ich habe die Anleitung ziemlich genau befolgt allerdings kommt bei mir nach einem Klick auf den Button die folgende Fehlermeldung:
“Diese Suchmaschine wird von Firefox nicht unterstützt und kann nicht installiert werden.”
woran kann das liegen?
Meine xml datei sieht so aus:
ShortName
Description
http://www.xdee.net/favicon.ico
UTF-8
UTF-8
Siehst du einen Fehler, an dem es liegen könnte?
Danke im Voraus
Karl
Karl
Sep 3rd, 2009
Ich hatte es befürchtet… vielleicht klappt es so
2
3
4
5
6
7
8
<ShortName>ShortName</ShortName>
<Description>Description</Description>
<Url template="http://www.afroo.org/search.php?query={searchTerms}" type="text/html" method="GET"/>
<Image height="16" width="16" type="image/vnd.microsoft.icon">http://www.xdee.net/favicon.ico</Image>
<OutputEncoding>UTF-8</OutputEncoding>
<InputEncoding>UTF-8</InputEncoding>
</OpenSearchDescription>
Karl
Sep 3rd, 2009
Eine weitere Frage gleich jetzt schonmal:
Ich würde gerne mehrere Suchlinks verwenden bzw. eine Liste anlegen (vorerst nur in der xml-datei und nicht vom Nutzer änderbar), mit verschiedenen Seiten, von denen eine zufällige genommen wird. Hat jemand eine Idee, wie man das machen kann? Kann ich zb. eine Variable bei template angeben, die jedes mal zufällig aus einer Liste ausgewählt wird?
admin
Sep 5th, 2009
Guten Tag,
das Problem liegt nicht an dem XML File selbst sondern an der Art wie es eingebunden wird. Ich habe ähnliche Probleme erhalten, als ich mein XML File lokal auf dem Computer gespeichert hatte. Firefox meckert dann nämlich, da er keine eindeutige URL zu dem File hat.
=> Lade alles auf einen Server hoch und gib bei Pfad zu dem XML File einen absoluten Pfad an.
Zu deiner zweiten Frage,
soweit ich dich verstanden habe, willst du, dass jedesmal zufällig eine andere Suchmaschine hinzugefügt wird.
Dies lässt sich relativ einfach durch ein PHP Script realisieren, kontaktiere mich doch einmal per E-Mail, damit ich dir alles weitere erklären kann.
mz[at]cinipac[dot]com
MFG
Michael