Nästan alla webbläsare kommer i dag fulltankade med tusentals möjliga och omöjliga funktioner. Och det som inte finns inbyggt på plats kan nästan alltid kompletteras med hjälp av ett tillägg. Fast bara nästan alltid. Ibland går du på en nit.
Bygg eget. Det finns en uppsjö av mer eller mindre fantastiska tillägg till Safari. Om du saknar något är det faktiskt inte särskilt svårt att bygga din egen specialanpassade plugg.
Ett exempel på en klar brist i tilläggsfloran på Apples hemsida är en enkel sökmotor för MacWorld. Vad världen otvivelaktigt behöver är en möjlighet att högerklicka på ett ord på nätet och direkt söka på det i idg:s motor. Du ska nu göra detta möjligt.
Först och främst måste du skaffa dig ett utvecklarkonto hos Apple. Detta är faktiskt ett krav. Genom att göra detta kommer du att få fatt på ett digitalt certifikat. Detta behövs för att kunna kompilera dina tillägg. Processen är lite omständlig, men kostar ingenting.
Safariutvecklare har en alldeles egen plats i Apples hierarki, vid sidan om Mac OS X- och iOS-knackare.
Väl inloggad på utvecklarsidorna kommer du att få tillgång till en hel del information plus en del verktyg. Det är hit du ska ta dig när du kommit förbi grunderna och vill ta nästa steg.
Dags att jobba på din klient. Starta Nyckelhanterare. Klicka på menyn med samma namn och välj Begär ett certifikat från en certifikatutfärdare…, under Certifikatassistent. I rutan som dyker upp skriver du in din e-postadress och ditt namn och väljer Sparas på skiva. Fortsätt och du får ladda hem en fil. Håll ett öga på var den hamnar.
När allting är färdigt har du ditt certifikat. Ladda hem det och dubbelklicka på filen. Nu kan du inte bara bygga tillägg i Safari, utan också kompilera och använda dem. Strax är det dags att börja bygga. Först ska bara verktyget lockas fram. Detta gör du i Safari. Starta därför webbläsaren och öppna inställningarna. Under Avancerat finns valet Visa utvecklarmenyn i menyraden. Se till att rutan till vänster är ikryssad.
Såväl privatpersoner som företag är välkomna som utvecklare hos Apple. Välj det som passar dig. I praktiken spelar det ingen större roll.
Att slå på utvecklarläget i Safari är enkelt. Du behöver inte ens vara registrerad hos Apple för att få just den grejen att fungera i din webbläsare.
Nu är det dags att kliva ur tilläggsbyggaren och in i en texteditor. Textwrangler, som du hittar på http://mw24.se/154, är ett bra gratisalternativ. Men du kan givetvis använda vilken redigerare du vill.
Det krävs inte mycket kod för att det ska bli ett riktigt användbart tillägg. Detta är för att Apple bakat in väldigt mycket funktionalitet i Safari som du kan anropa.
För att göra detta måste du förstå hur en vanlig sökning går till. Börja därför med att göra operationen manuellt. Gå till MacWorlds hemsida och knappa in till exempel Lion. När du får fram resultatsidan väljer du MacWorld i publikationslistan och kör igen. Nu har du en söksträng i adressfältet.
(contextmenu, handleMessage, false);
var userSelection = ’’;
userSelection = window.parent.getSelection()+’’;
userSelection = userSelection.replace(/^s+|s+$/g,);
safari.self.tab.setContextMenuEventUserInfo(event, userSelection);
}
<script type=text/javascript charset=utf-8>
safari.application.addEventListener(command, performCommand, false);
safari.application.addEventListener(validate, validateCommand, false);
För att kunna köra egen kod måste du ha ett certifikat. Det är kopplat till dig och gör eventuella dumheter spårbara tillbaka till ditt konto.
Först ut är kommandolyssnaren. Som namnet avslöjar är det den som går i gång när någonting faktiskt ska göras. Det är denna del som senare startas för att skapa en webbsida och göra en sökning.
function validateCommand(event)
{
var userString = event.userInfo;
if (event.command !== macworld || userString===undefined || userString.length == 0)
return;
userString = userString.substr(0,30);
userString = userString + ’…’
}
event.target.title = Leta efter [ + userString + ] i MacWorlds register;
}
Sedan kommer en lång kontrollsats. Här verifierar du att enbart anrop med flaggan macworld kommer vidare och att det finns en markerad text. Flaggan kommer från tilläggsbyggaren, där du senare kommer att mata in en identifierare.
Nästa kontroll undersöker hur lång den markerade texten är. Ifall den överstiger önskad längd tar du de första 30 tecknen och lägger till …. Resten kastas. Men bara från det som visas upp i kontextmenyn. Sökningen förblir intakt.
{
if (event.command !== macworld)
return;
var userString = event.userInfo;
var mwURL = http://www.idg.se/2.1085/1.50095?actionType=search&queryText= + userString + &articleType=0&publicationSelect=14&dateRange=2&sort=0;
var newTab = safari.application.activeBrowserWindow.openTab(foreground);
newTab.url = mwURL;
}
Det är här det händer. Om det är ett anrop från Macworld så läser du in användarens information och använder den för att bygga en url. Den öppnas i ett nytt Safarifönster.
Nu har du själva koden på plats. Men du har ännu inte kopplat ihop den med tillägget. Gå därför tillbaka till byggverktyget. Nu kan du välja global.html i listan till höger om Global sidfil. Gör det.
När du testat allting och det fungerar som det ska kan du skicka din plugg till Apple. Om du gjort din läxa ordentligt kommer den kanske med i den allmänna listan.
Nästa steg är att klicka på fliken Skript. Välj att aktivera felsökningen. Nu får du upp din kod till vänster och lite information till höger. Innan du gör någonting annat ska du skapa brytpunkter. När koden når dem kommer den att stanna, vilket ger dig en chans att undersöka vad som händer.
Med programmet safariextz2desktopfolder kan du låsa upp andra utvecklares tillägg och se hur de löst olika problem. Ett utmärkt sätt för att lära sig nya trick.
Klicka på siffrorna längst ut i kanten för att skapa en brytpunkt. Gör det på första riktiga kodraden i funktionerna. Två stycken totalt, alltså. Ta dig sedan till Safari och försök göra en sökning. Webbgranskaren kommer att dyka upp.
Förhoppningsvis kommer detta att hjälpa dig att lokalisera vad eller var det gått åt skogen. Om event.userInfo till exempel inte är satt är det något fel i händelselyssnaren. Hoppar koden ut vid kontrollen av event.command så matchar inte texten vad som står i tilläggsbyggaren.
Att göra kontextsökningar är givetvis inte allting. Som du sett i tilläggsbyggaren finns det massor av outforskade möjligheter. Vill du komma vidare finns det en hel del att jaga vidare på. Bäst är att börja med Apples dokumentationssidor för Safariutvecklare. Du hittar dem på utvecklingsdelen av webbplatsen: .
Har du speciella behov eller önskemål behöver du lyckligtvis inte förtvivla. Apple har gjort det väldigt enkelt att bygga egna tillägg till Safari. Det enda du behöver kunna är lite html och lite javascript. Har du bara det i din kunskapsarsenal kan du bygga nya knappar och menyer och förändra det mesta du ser i din webbläsare.
Bygg eget. Det finns en uppsjö av mer eller mindre fantastiska tillägg till Safari. Om du saknar något är det faktiskt inte särskilt svårt att bygga din egen specialanpassade plugg.
Skaffa utvecklarkonto
Ett exempel på en klar brist i tilläggsfloran på Apples hemsida är en enkel sökmotor för MacWorld. Vad världen otvivelaktigt behöver är en möjlighet att högerklicka på ett ord på nätet och direkt söka på det i idg:s motor. Du ska nu göra detta möjligt.
Gå till och logga på med ditt Applekonto. Alternativt kan du skapa ett nytt, om du inte vill blanda ihop din utveckling med det privata. När du kommit in klickar du på Programs & Add-ons. På nästa sida är det Join now som behöver en knuff.
Safariutvecklare har en alldeles egen plats i Apples hierarki, vid sidan om Mac OS X- och iOS-knackare.
Nu får du mata in inloggningsuppgifter igen. Använd samma konto som tidigare. Är du en ny utvecklare får du berätta om du är privatperson eller representerar företag. Välj rätt väg och klicka dig vidare. Gå också igenom de följande sidorna.
Förhoppningsvis har du nu hamnat på sidan Developer Program Resources. Här finns dokumentation och utvecklarforum. Men det intressanta just nu är certifikatverktyget. Klicka på Developer Certificate Utility.
Välj sedan att ladda ner ett certifikat. Det kommer inte att fungera, eftersom du inte skapat något ännu. Följ därför upp ditt klick med att trycka på Add Certificate. Detta öppnar en sida i sidan med instruktioner.
Väl inloggad på utvecklarsidorna kommer du att få tillgång till en hel del information plus en del verktyg. Det är hit du ska ta dig när du kommit förbi grunderna och vill ta nästa steg.
Börja med klienten
Dags att jobba på din klient. Starta Nyckelhanterare. Klicka på menyn med samma namn och välj Begär ett certifikat från en certifikatutfärdare…, under Certifikatassistent. I rutan som dyker upp skriver du in din e-postadress och ditt namn och väljer Sparas på skiva. Fortsätt och du får ladda hem en fil. Håll ett öga på var den hamnar.
Avsluta guiden och gå tillbaka till webbsidan du nyss lämnade. Ladda upp filen du precis skapade. Välj sedan att generera ett certifikat. Det kan ta en stund innan denna operation går i mål.
När allting är färdigt har du ditt certifikat. Ladda hem det och dubbelklicka på filen. Nu kan du inte bara bygga tillägg i Safari, utan också kompilera och använda dem. Strax är det dags att börja bygga. Först ska bara verktyget lockas fram. Detta gör du i Safari. Starta därför webbläsaren och öppna inställningarna. Under Avancerat finns valet Visa utvecklarmenyn i menyraden. Se till att rutan till vänster är ikryssad.
Såväl privatpersoner som företag är välkomna som utvecklare hos Apple. Välj det som passar dig. I praktiken spelar det ingen större roll.
När detta är gjort dyker menyn Utvecklare upp. Öppna den och klicka sedan på Visa tilläggsbyggare. Fönstret du får upp nu är hanteraren för själva byggandet. Allting sker inte i detta verktyg, men allting börjar där.
Tryck på plustecknet nere till vänster och välj Nytt tillägg. Ge projektet namnet MacWorldSökning och spara ner det på ett lämpligt ställe. Knappa in dina uppgifter i de olika rutorna under rubriken Tilläggsinfo.
Sätt Paketidentifierare till com.macworld.pro. Välj sedan Alla i listan under Åtkomst till tilläggswebbplats. Se till att dessutom inkludera säkra sidor genom att kryssa i rutan.
I detta exempel ska du bygga en kontextmeny, så grafiken kommer aldrig att synas för slutanvändarna. Om du däremot bygger lösningar med knappar är det desto viktigare.
Vill du ändå ha en egen ikon i stället för Safaris standardkvadrat är det inga problem. Lägg bara en fil vid namn icon.png i din katalog. Rätt proportioner är inte nödvändigt, annat än för estetiken.
Att slå på utvecklarläget i Safari är enkelt. Du behöver inte ens vara registrerad hos Apple för att få just den grejen att fungera i din webbläsare.
Tänk ut vad skriptet ska göra
Nu är det dags att kliva ur tilläggsbyggaren och in i en texteditor. Textwrangler, som du hittar på http://mw24.se/154, är ett bra gratisalternativ. Men du kan givetvis använda vilken redigerare du vill.
Skapa en ny fil och spara den direkt som global.html. Var noga med att välja kodning UTF-8. Du ska lägga filen i en mapp som tilläggshanteraren skapade åt dig automatiskt tidigare. Gå till den katalog du sparade ner ditt projekt i och du kommer att hitta MacWorldSökning.safariextension. Där ska global.html placeras. Öppna ett nytt dokument och spara ner det på samma sätt i samma mapp. Kalla det för mws.js.
Innan du börjar koda är det på sin plats att fundera lite över vad som behöver göras. Användaren ska alltså markera en text, högerklicka och få upp ett val. När detta väljs ska en ny flik öppnas och en sökning göras på www.idg.se. Sökordet ska bestå av den markerade texten.
Det krävs inte mycket kod för att det ska bli ett riktigt användbart tillägg. Detta är för att Apple bakat in väldigt mycket funktionalitet i Safari som du kan anropa.
Hur en sökning går till
För att göra detta måste du förstå hur en vanlig sökning går till. Börja därför med att göra operationen manuellt. Gå till MacWorlds hemsida och knappa in till exempel Lion. När du får fram resultatsidan väljer du MacWorld i publikationslistan och kör igen. Nu har du en söksträng i adressfältet.
Om du studerar raden kommer du att hitta ditt sökbegrepp. Programmet ska byta ut denna lilla del av adressen mot det användaren vill söka på. Allting annat är tekniskt lullull som du inte behöver bry dig om för funktionen du bygger.
Nu när du vet detta är det dags att börja koda. För att kunna fånga vad användaren gör behöver du skapa en rutin som jobbar mot kontextmenyn. Detta ska du göra i javaskriptfilen och därför måste du öppna mws.js. Sedan skriver du in följande rad längst upp:
document.addEventListener
(contextmenu, handleMessage, false);
Vad raden gör är att skapa en så kallad händelselyssnare. Den håller koll på anrop mot kontextmenyn, vilket första parametern också anger. När det händer något ska funktionen handleMessage anropas. Den finns inte ännu. Knappa därför in följande kod:
function handleMessage(event) {
var userSelection = ’’;
userSelection = window.parent.getSelection()+’’;
userSelection = userSelection.replace(/^s+|s+$/g,);
safari.self.tab.setContextMenuEventUserInfo(event, userSelection);
}
Här händer det grejer. Första raden öppnar själva funktionen och definierar inparameternamnet. Sedan skapar du en variabel vid namn userSelection och tilldelar den luft.
I raden efter kikar du efter vad det är användaren har markerat. Det är alltså själva texten som du ska leta efter på idg.se. Sedan rensar du bort tomrum före och efter strängen. På näst sista raden lägger du till den användarvalda texten till en variabel du kan nå senare. Allting avslutas med en klammerparantes, vilket stänger proceduren.
Det är allt du behöver göra i javaskriptfilen. Men det är fortfarande en hel del kodande kvar. Stäng därför mws.js och öppna upp global.html. Börja med att skriva in koden nedan.
<!DOCTYPE HTML>
<script type=text/javascript charset=utf-8>
safari.application.addEventListener(command, performCommand, false);
safari.application.addEventListener(validate, validateCommand, false);
De två första raderna definierar bara att det här är ett html-dokument och att javaskript kommer att följa nedan. Sedan har du två nya händelselyssnare. De fungerar precis likadant som den tidigare, men de aktiveras vid andra aktiviteter.
För att kunna köra egen kod måste du ha ett certifikat. Det är kopplat till dig och gör eventuella dumheter spårbara tillbaka till ditt konto.
Lägg in kontrollpunkter
Först ut är kommandolyssnaren. Som namnet avslöjar är det den som går i gång när någonting faktiskt ska göras. Det är denna del som senare startas för att skapa en webbsida och göra en sökning.
Valideringslyssnaren kör i gång när någonting ska verifieras. Den startar alltid före kommandodelen. Därför är det en god idé att lägga in kontrollpunkter under denna komponent. I detta fall ska du se till att kapa text som visas i kontextmenyn till 30 tecken. I annat fall kan kontextmenyn få spatt om användaren till exempel markerat en hel sida. Skriv in koden för detta.
function validateCommand(event)
{
var userString = event.userInfo;
if (event.command !== macworld || userString===undefined || userString.length == 0)
return;
if (userString.length > 30) {
userString = userString.substr(0,30);
userString = userString + ’…’
}
event.target.title = Leta efter [ + userString + ] i MacWorlds register;
}
Här händer en hel del. Men det är faktiskt inte så märkvärdigt om du bryter ner det. Du inleder med att öppna en funktion, precis som tidigare. Sedan läser du ut den markerade texten ur parametern userInfo. Som du kanske minns lades denna till tidigare, i mws.js.
Sedan kommer en lång kontrollsats. Här verifierar du att enbart anrop med flaggan macworld kommer vidare och att det finns en markerad text. Flaggan kommer från tilläggsbyggaren, där du senare kommer att mata in en identifierare.
Vad användaren ska se
Nästa kontroll undersöker hur lång den markerade texten är. Ifall den överstiger önskad längd tar du de första 30 tecknen och lägger till …. Resten kastas. Men bara från det som visas upp i kontextmenyn. Sökningen förblir intakt.
Precis innan funktionen stängs skriver du ut det som användaren ska se. Först en textrad, sedan lägger du till den markerade texten följt av ännu en textrad. Resultatet kan bli något i stil med Leta efter [Mac OS X 10.7 Lion] i MacWorlds register.
Nästa funktion hänger ihop med kommandolyssnaren. Det är nu som du ska öppna fliken och göra sökningen. Detta gör du med följande kodsnutt.
function performCommand(event)
{
if (event.command !== macworld)
return;
var userString = event.userInfo;
var mwURL = http://www.idg.se/2.1085/1.50095?actionType=search&queryText= + userString + &articleType=0&publicationSelect=14&dateRange=2&sort=0;
var newTab = safari.application.activeBrowserWindow.openTab(foreground);
newTab.url = mwURL;
}
Det är inte så mycket nytt här. Funktionen öppnas, en kontroll av identifieraren görs och den markerade texten läses in. Sedan klipper du ihop adressen från idg.se med sökbegreppet.
De två sista raderna före stängningen öppnar först en ny flik och klistrar sedan in den hopklistrade adressen. Som du ser på parametersättningen foreground kommer fokus att hamna på den nya fliken.
Det sista du behöver göra i global.html är att lägga till </script> längst ner. När du knappat in den raden är det bara att spara ditt alster. Kontrollera gärna att du skrivit allting korrekt.
Det är här det händer. Om det är ett anrop från Macworld så läser du in användarens information och använder den för att bygga en url. Den öppnas i ett nytt Safarifönster.
Koppla ihop kod och tillägg
Nu har du själva koden på plats. Men du har ännu inte kopplat ihop den med tillägget. Gå därför tillbaka till byggverktyget. Nu kan du välja global.html i listan till höger om Global sidfil. Gör det.
Klicka sedan på knappen Granska global sida. Välj fliken Resurser. Se till att du inte har någonting som är rödmarkerat. Om du har det finns det felaktigheter i den inmatade koden. Rätta till det innan du går vidare.
Nästa steg är att skapa en kontextmeny. Detta är den meny du får upp när du högerklickar i Safari. Klicka därför på Nytt kontextmenyobjekt. Sätt namnet till Sök efter ord på MacWorld, identifieraren till macworld och även kommandot till macworld. Du känner säkert igen ordet från koden ovan.
Skrolla ner ännu en bit och du hittar Starta skript. Klicka på knappen Nytt skript till höger. Välj mws.js för att koppla in javaskriptfilen. Detta kommer att aktivera händelselyssnaren för kontextmenyn.
När du testat allting och det fungerar som det ska kan du skicka din plugg till Apple. Om du gjort din läxa ordentligt kommer den kanske med i den allmänna listan.
Nu är det faktiskt dags att testa. Klicka på Installera uppe till höger. Gå sedan ut i Safari. Markera en text och tryck på höger musknapp. Om allting fungerar som det ska kommer du att se din markerade text, tillsammans med en uppmaning om att söka efter den på MacWorld.
När du klickar på raden ska en ny flik öppna sig. I princip omgående kommer adressfältet att fyllas i med rätt sökning. Efter ett par sekunder får du fram resultatlistan.
Nu är det inte säkert att allting fungerar direkt från början. Det är tyvärr sällan det gör det omgående. Tilläggsbyggaren erbjuder lyckligtvis en del avlusningsfunktioner. De är inte fantastiska, men hjälper dig på vägen.
För att komma åt dem öppnar du programmet och klickar på ditt projekt. Tryck på Granska global sida. Precis som tidigare börjar du med att undersöka resurserna så att det inte finns några syntaxfel.
Nästa steg är att klicka på fliken Skript. Välj att aktivera felsökningen. Nu får du upp din kod till vänster och lite information till höger. Innan du gör någonting annat ska du skapa brytpunkter. När koden når dem kommer den att stanna, vilket ger dig en chans att undersöka vad som händer.
Med programmet safariextz2desktopfolder kan du låsa upp andra utvecklares tillägg och se hur de löst olika problem. Ett utmärkt sätt för att lära sig nya trick.
Skapa brytpunkt
Klicka på siffrorna längst ut i kanten för att skapa en brytpunkt. Gör det på första riktiga kodraden i funktionerna. Två stycken totalt, alltså. Ta dig sedan till Safari och försök göra en sökning. Webbgranskaren kommer att dyka upp.
Nu kan du kika under Omfattningsvariabler för att se vad olika värden är tilldelade. Kontrollera att det verkar vettigt och tryck sedan på knappen med en pil som pekar ner på en boll. Detta kommer att ta koden ett steg längre. Kontrollera värdena igen. Iterera processen tills det går snett.
Vad gick fel?
Förhoppningsvis kommer detta att hjälpa dig att lokalisera vad eller var det gått åt skogen. Om event.userInfo till exempel inte är satt är det något fel i händelselyssnaren. Hoppar koden ut vid kontrollen av event.command så matchar inte texten vad som står i tilläggsbyggaren.
Om allting fungerar precis så väl som du önskade från början är det dags att sprida ditt verk. Detta är väldigt enkelt. Det enda du behöver göra är att klicka på Bygg paket… i tilläggsbyggaren. Tala om var du vill ha filen och välj att spara.
Resultatet kommer att bli en körbar fil med filändelsen extz. Denna kan du skicka vidare till vänner och bekanta. När de dubbelklickar på den kommer de att få samma fina funktion som du själv.
Nästa steg är att skicka upp din kod till Apple. I bästa fall kan du komma med bland de utvalda tilläggen. Men se till att du avlusat din kod ordentligt innan du skickar den så långt.
Forum och dokumentation
Att göra kontextsökningar är givetvis inte allting. Som du sett i tilläggsbyggaren finns det massor av outforskade möjligheter. Vill du komma vidare finns det en hel del att jaga vidare på. Bäst är att börja med Apples dokumentationssidor för Safariutvecklare. Du hittar dem på utvecklingsdelen av webbplatsen: .
Apple har dessutom ett forum där du kan ställa frågor. Men vill du söka dig bortom äppelramarna kan du kika på det utmärkta alternativet Stackoverflow. Det är ett populärt tillhåll för utvecklare från alla genrer och världsdelar. Du finner dem på .
En intressant applikation är Safariextz2desktopfolder, som du kan ladda ner på . Den dekompilerar tillägg så att du ser koden. Om du hittar något intressant på nätet kan du alltså kika på hur utvecklarna har gjort sina lösningar. Det är ofta en mycket stor källa till kunskap.
Förhoppningsvis har denna lilla introduktion till Safaritillägg gett dig blodad tand. För även om det redan finns en hel del att ladda ner så saknas mycket. Det är upp till dig att fylla delar av det behovet.