Hundar är bäst!

För ett tag sedan dök Henerator upp, en extension till webbläsaren Chrome. En extension används för att utöka en webbläsares funktioner med funktionalitet som skapats av en tredje-part. Extensions fungerar  i princip som app:ar, vilka man kan installera i sin webbläsare.  Exempel på populära extensions som finns idag till Chrome är ”Adblock Plus”, vilket blockerar internet annonser på webbsidor, samt ”Hover Zoom”, vilket gör att en bild på en webbsida förstoras upp när man ”hovrar” över den med muspekaren.

Men nu tillbaks till Henerator,  genom att installera denna extension i Chrome, så kommer orden ”han” och ”hon” i texten på en webbsida – vilken som helst,  att ersättas med det kösneutrala ordet ”hen”.

Kul, tänkte jag!

Jag blev sugen på att testa att bygga något liknande, mest för att lära mig tekniken, men också för att det slog mig att det skulle kunna vara användbart i media och reklam, som jag ofta arbetar på uppdrag av. Jag spånade kring att man skulle kunna göra om designen i webbläsaren så att den till exempel har ett Hammarby tema, eller varför inte skapa en knapp i menyn som vid tryck visar senaste nyheterna om ett företag man vill följa?  Du kan säkert själv komma på både fler och bättre exempel, dela gärna med dig här i så fall!

Nu skulle jag som sagt testa tekniken bakom Henerator specifikt och då valde jag att bygga en Chrome extension,  där ordet ”katt”  i texten på en webbsida – vilken som helst,  ersättas med  ordet ”hund”. Varför? Därför att hundar är bäst – förstås! Om du vill testa direkt, och inte är intresserad av att veta hur man skapar i kod, så kan du installera ”Hundgenerator” nu och sluta att läsa vidare. (Du måste dock ha Chrome webbläsare installerad först.)

Här följer en genomgång av koden, och mina tankar kring den:

Först måste man skapa en manifest fil, vilken ska vara i JSON format därav namnet på filen manifest.json. Manifest filer är i det här sammanhanget en sorts installationsfil, eller en fil med meta information om andra filer – en programförklaring. Filen ser i Hundgenerator fallet ut så här:

{
  "name": "Katt blir hund",
  "version": "1.1",
  "manifest_version": 2,
  "description": "Katt blir automatiskt hund",
  "content_scripts": [
    {
	  "matches": ["http://*/*", "https://*/*"],
      "js": ["doggie.js"]
    }
  ]
}

Texten i manifest.json beskriver närmast sig själv, vilket alltid är trevligt! Ett par saker är värda att notera:

	  "matches": ["http://*/*", "https://*/*"],

Det betyder att denna extension användas för alla webbsidor som en användare av Chrome surfar på. Man kan alltså om man vill begränsa en extension till en specifik webbadress, exempelvis ett visst företags hemsida.

	  "js": ["doggie.js"]

Här hakas koden in som gör själva jobbet med att byta ut ord. Det är en javascript fil vilken heter doggie.js. så här ser den ut:

function doggie(node) {
  if (node.nodeType== 3) { // text
	node.data = node.data.replace(find,
		function (me) {
		 return (me.charAt(0) == 'k') ? 'hund' : 'Hund'
		});
  } else {
    for(var i=0; i<node.childNodes.length; i++)
      doggie(node.childNodes[i]);
  }
}

var find = /[kK]att/g;

if (document.readystate == "complete") {
    doggie(document.documentElement);
} else {
    window.addEventListener(
	  "DOMContentLoaded",
	  function(e) { doggie(document.documentElement); },
	  false
	);
    window.addEventListener(
	  "load",
	  function(e) { doggie(document.documentElement); },
	  false
	);
}

Javascriptet innehåller en funktion, ett reguljärt uttryck och ett par händelselyssnare. Det är allt som behövs = nice!.  Ansvarsfördelningen ser ut så här:

1. Händelselyssnarna ansvarar för att se till att Chrome har laddat in hela webbsidans innehåll. Det är det första steget och det görs för att annars kan vi missa ord som vi vill byta ut.
2.  Funktionen ”doggie” letar upp ord som ska bytas ut genom att gå igenom hela webbsidan. Löv för löv  rekurseras hela dokumetträdet igenom, med början vid roten. Innan ordet byts ut kollas om det börjar med stor bokstav ”K”  eller liten ”k”. Om det är liten bokstav ”k” så blir början på hund med liten bokstav annars Hund.
3. Det reguljära uttrycket /[kK]att/g , bestämmer vad som ska bytas ut, i det här fallet är vi intresserade av  alla delar av ett ord som innehåller antingen ”Katt” eller ”katt”.