Lav dit eget browser-søgeplugin

Hvorfor ikke gøre det nemmere for dine besøgende at søge i din blog eller på din hjemmeside ved at gøre det muligt for dem at søge direkte fra deres browser? Se her hvordan du gør. [Læs mere]

En af fordelen ved Mozillas Firefox 2 (og nyere) og Microsofts Internet Explorer 7 (og nyere) er, at de begge bruger OpenSearch til de søgninger, der foretages direkte i browseren — det vil sige via det søgefelt, der er i browserens øverste højre hjørne.

Bemærk: Dette gælder også for browsere, der baserer sig på Firefox 2 og nyere, såsom Flock og Netscape.

OpenSearch er basalt set blot en XML-fil, som puttes ind i browseren, se OpenSearch-specifikationerne for mere info om det.

Her vil jeg ikke gå 100 procent i dybden med, hvad du kan med OpenSearch, men blot illustrere, hvordan du kan lave dit eget søgeplugin til Internet Explorer 7 og Firefox 2 (eller nyere), så folk for eksempel kan søge i din blog direkte fra deres browser.

Trin 1: Lav en XML-fil:
Som du kan se i OpenSearch-specifikationerne, skal din xml fil starte med disse to linjer:

<?xml version="1.0" encoding="UTF-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">

Disse to linjer fortæller blot browseren, hvilket tegnsæt, der er brugt til XML-filen og, at der er tale om en OpenSearch-XML-fil.

Næste linje skal være det navn, din søgemaskine skal have i browseren, altså det der står i højre hjørne, hvor der for eksempel står "Google", når Google-søgemaskinen er valgt. Hvis vi bruger onlineminds.dk som eksempel, skal der altså stå:

<ShortName>Online Minds</ShortName>

Næste linje er beskrivelsen. Denne linje bruges bruges ikke til noget specielt, men for en god ordens skyld, kan du jo skrive en kort beskrivelse af din side eller blog. Igen bruger vi Online Minds som eksempel:

<Description>Kim Elmose og Lars K Jensens leg med alt online</Description>

Nu skal vi så fortælle browseren, hvilket tegnsæt, den skal bruge, når den skal sende søgningerne til din side eller blog. Bruger du WordPress, som vi bruger her (egentlig bruger vi dansk WordPress) skal du skrive "UTF-8":

<InputEncoding>UTF-8</InputEncoding>

Nu bliver det så lidt teknisk. Vi skal nemlig have knyttet et billede til vores søgemaskine. Med de gamle søgeplugins til Firefox, vedlagde man blot et PNG-billede med samme navn som søgeplugin-filen, men sådan fungerer OpenSearch ikke.

I stedet skal du have dit billede omkodet til tegn, som du sætter ind i din XML-fil. Til det bruger vi URI Kitchen. Her de seneste par dage har jeg oplevet, at URI Kitchen har været ret ustabil, så græd ikke, hvis den melder en "Internal Error", men forsøg eventuelt igen senere :-)

URI Kitchen fungerer på den måde, at vi giver den et billede, som den laver om til de tegn, vi skal bruge i vores XML-fil. Du kan enten uploade dit billede til URI Kitchen eller specificere adressen på det billede, der skal laves om. Du kan også bruger ikoner (.ico-filer).

Bemærk: Billedet/ikonet skal have en størrelse på 16 x 16 pixels!

For at sikre konsistens, er det en god idé at have samme billede til din søgemaskine, som det billede du bruger som "favicon", altså det lille ikon der vises ved siden af adressen, når folk besøger din side. Her på Online Minds er vores "favicon" en jordklode, så den skal vi bruge igen. Vi sender denne adresse ind i URI Kitchen:

http://www.onlineminds.dk/favicon.ico

Den adresse skriver vi i tekstfeltet til højre for teksten: "Alternatively, give an HTTP URI to use as input:".

Nu trykker vi på "Generate", og nu kan der ske to ting:

  1. URI Kitchen giver os en side med én lang linje med tegn, formatteret som et link. Det er den linje vi skal bruge. Højreklik på linket og kopier link-adressen. I Firefox hedder den på engelsk "Copy link lokation".
  2. Ellers viser URI Kitchen dig dit billede. Bemærk i browserens adresselinje. Der skulle gerne stå noget med "data:image". Kopier HELE adressen ved at markere den og trykke CTRL+C.

Nu går du tilbage til din XML-fil og indsætter den lange linje på en ny linje. Bemærk, at vi her angiver billedets størrelse: 16 x 16 pixels. Igen bruger vi Online Minds som eksempel (her indsat med linjeskift):

<Image width="16" height="16">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkW
g2AAAAB3RJTUUH1wkQCCwp63YRowAAAAlwSFlzAAALEwAACxMBAJqcGAAAAARnQU1BAACxj
wv8YQUAAAJtSURBVHjalZLbSxRRHMfPnJ3ZWddxV8e11dR1WbEFmzQ0IulCBVlERE8WpPUSBfX
QWy%2F5Er0mUSvRH9Bz0AV66OaFQBTcLKMixU3Ly87ssuvMzsw5M3NOM6xY%2BtaXL%2Fw
48PucH78LQykF%2FyN223tmzU6Nrb5exiVs74HoWpdw%2FmicYZjNBGazgkXpxbEjv%2BbeSJ3
7NWxPTr9SDFQsYb9eSl%2BJtO9KlNNgOWBCByZijbWwZycvRQ7tq%2B%2FuiAbEAMfzLGb9u5
%2F2jn%2BY3AJceHspUtkUUJ5I9ShmpJoDvW01XHOYq4BRKPwANHbreTaXy20Akws4FP6U%2
BTwa67gdqeQaw0xQ6xP8viAHq0IjYqIPZFPzDefuPHy5ATyaeueDGBOSzVzO6eS3asmGo1lEd12
S1peGQaskm86LrzUIIQ%2BYZe6pJkzuPW6JQ1rTjZlV54uM5nJ4WbUNm%2BD8WeDORTvYEEvLs
uyNtajTvK4LPA%2BZoom1jz8dRAzFsAqmpWPCxGMUAZFFjhrHGHtAdHlwpaqPgYyIcRUPF9Uicr
CKHBcAhkkdAFZP1zLi%2FEJAEAQPuNrdeH0u%2BW12iONtx27xQc1yKLFsgDAwMEiPg9bD1f5Id
0Kqq6vzehg40WbPPib5GpQP2JqM1nWi6kBzbQDdACXa7qsmi2dOHoi6K%2FcAN0zfDILWJKAjoK
ULrJc8lwHV7Axnkmt3pSLs7%2B%2F%2Fe0vtycSoMjGoDo8XAChgQO0QZ3SKhQqA1CIJmenh1
AOWZbfckit3l4P3n71fWpF2iCYCU9%2F9x%2BLZUz0N7t%2Fl7O1AWe52FEWxLCsYDLpd%2Fnu
qrv4AMzs7HfQr2EQAAAAASUVORK5CYII%3D</Image>

Se hele teksten ved at klikke her.

Efter den omgang skal du nu fortælle søgeplugin'et hvor den skal sende folks søgninger hen. Det finder du lettest ud af, ved at foretage en søgning på din hjemmeside og kigge på adressen på søgeresultatsiden og se, hvor den sætter det ind, som folk har søgt på.

Igen kan vi tage Online Minds som eksempel. Hvis du også bruger WordPress, kan du faktisk tyvstjæle denne linje (dog skal du ændre adressen til din blog), da WordPress håndterer søgeforespørgsler ens, uanset sprog og version.

Hvis du fx søger på "gimp" her på Online Minds, lander du på følgende side:

http://onlineminds.dk/?s=gimp

Det er adressen på WordPress' søgeresultatsiden og vi kan se, at parameteren "s" er det, folk har søgt på. I OpenSearch skal vi blot tage den adresse og erstatte det, vi søgte på med {searchTerms}.

For Online Minds skal linjen altså hedde:

<Url type="text/html" template="http://www.onlineminds.dk/?s={searchTerms}" />

Hvis du havde en WordPress-blog installeret på www.jegelskerat.dk/blogge, skal du skrive:

<Url type="text/html" template="http://www.jegelskerat.dk/blogge/?s={searchTerms}" />

Nu er du færdig med XML-filen, og så er det blot at lukke den med:

</OpenSearchDescription>

Hvis du bruger Firefox, kan du se vores XML-fil ved at klikke her. Internet Explorer-brugere kan klikke her.

Trin 2: Få XML-filen ind i browseren:
Nu skal vi så give folk mulighed for rent faktisk at bruge dit søgeplugin; Vi skal have skidtet ind i deres browser.

Det kan vi gøre på to måder:

Nummer 1: (Virker kun i Firefox-browsere!)
Den første mulighed er, at vi laver en HTML-fil, der putter XML-filen ind i browseren ved hjælp af et simpelt JavaScript. Det gør du ganske enkelt ved at uploade din XML-fil og skrive denne linje i HTML-filen (her vist med linjeskift):

<a href="" onClick="javascript:window.external.AddSearchProvider('http://adresse-til-plugin');"> Installér mit søgeplugin</a>

Hvis vi atter bruger Online Minds, skal vi altså skrive følgende udfor "OnClick" (her vist med linjeskift):

"javascript:window.external.AddSearchProvider
('http://www.onlineminds.dk/search/onlineminds.xml');"

Når folk så klikker på linket, kan de installere dit søgeplugin i deres browser.

Hvis du vil se, hvordan det fungerer, kan du gå ind på onlineminds.dk/search. Hvis du kigger på kildekoden (Vis –> Kilde) kan du se, hvordan koden skal se ud.

 
Tilføjelse: Stefan fra Overskrift.dk linker til www.ae35-unit.dk/iesearch/, hvor der tilsyneladende er opskriften til et JavaScript, der også virker i Internet Explorer 7.

Nummer 2 (Virker både i Firefox-browsere og Internet Explorer 7!):
Denne mulighed er noget nemmere. Både for dig, men også for den, der skal installere dit søgeplugin i sin browser.

Jeg tillader mig nu at antage, at du sidder på en WordPress-blog. I WordPress-administrationen skal du klikke på Udseende –> Temaredigering og klikke på "Header" ude til højre.

Find nu den linje, der henter dit stylesheet ind, den starter med "<link rel="stylesheet" …".

Lav et linjeskift og nedenunder skal du nu indtaste en linje, der henviser til din søgemaskine og navngive den. Igen bruger vi Online Minds, som eksempel, så tag blot denne linje og erstat adressen til vores XML-fil med adressen på din egen og titlen til din egen titel:

<link rel="search" title="online minds" href="http://www.onlineminds.dk/search/onlineminds.xml" type="application/opensearchdescription+xml" />

(Bemærk: Igen er linjen her vist med linjeskift, men det ovenstående skal stå på én linje!)

Når du har gjort det, klikker du på "Opdatér fil", og så er du færdig. Nu kan folk installere dit plugin direkte fra deres browser. Hvordan kommer jeg til lige om lidt.

Trin 3: Tjek at skidtet virker:
Som med alting er det en god idé at kontrollere, at det du har lavet rent faktisk også virker. I mit tilfælde, ville jeg altså først forsøge at installere søgeplugin'et fra onlineminds.dk/search.

Okay, det virker. Slet det igen fra Firefox ved at trykke på pilen ved siden af søgefeltet og vælge "Manage Search Engines" og fjern det. Så skal vi kontrollere, at det også virker med installation direkte fra browseren.

Først med Firefox:
Åbn Firefox og gå ind på din side. Tryk på pilen ved siden af søgefeltet i øverste højre hjørne af browseren og kontrollér at dit søgeplugin er i listen:

Klik på dit søgeplugin for at installere det og sørg for, at det virker.

Dernæst Internet Explorer 7:
Åbn Internet Explorer 7 og gå ind på din side. Her er proceduren den samme. Klik på pilen ved søgefeltet i browseren og kontrollér, at dit søgeplugin er i listen under "Tilføj søgemaskiner":

Installér det og tjek at det virker.

Nu er du færdig! Du har nu et søgeplugin til din hjemmeside/eller blog, som gør det meget nemmere for andre, og dig selv, at søge på din side/blog.

Forfatter: Lars K Jensen

Lars er uddannet journalist og arbejder nu med udviklingsprocesser og redaktionel udvikling. Han skriver blandt andet på Medieblogger. Følg ham på Twitter: @larskjensen.

5 meninger om “Lav dit eget browser-søgeplugin”

  1. Tak for gode links, Stefan.

    Kan se, at der faktisk er link til et JavaScript, der tilsyneladende virker i IE7 på den side, det tilføjer jeg lige i posten ;-)

    // Lars

Deltag! Skriv en kommentar: