Kako napraviti bookmarklet

Utorak, 8. Travnja 2008.

Bookmarklet (ili favelet) se od normalnog bookmarka (ili favorita) razlikuje po tome što to nije link na neku stranicu nego Javascripta koja kad se na nju klikne nešto radi sa stranicom.

Za detaljno objašnjenje i primjere jednostavnih bookmarka pogledajte ovaj post u kojem sam početo piliti o tim stvarima.

Plus ovdje se nalazi opis nekih naprednih bookmarka.

U ovom postu objasnit ću kako se radi bookmarklet na konkretnom primjeru. Potrebno je osnovno poznavanje HTMLa i Javascripta.

• • • • •

PROBLEM

Kad unosiš lozinku na web stranicu ona se, zbog sigurnosti, prikazuje sa zvjezdicama umjesto sa normalnim znakovima. Ako si se već prije prijavio negdje stranica ti može unaprijed popuniti lozinku.

Problem je kad tu lozinku zaboraviš, a nakon nekog vremena ti zatreba. Tada je rješenje gledanje HTML koda stranice (View Source) da dođeš do lozinke.

Ideja je napraviti bookmarklet koji će na samoj formi umjesto zvjezdica ispisati lozinku slovima, da je možeš jednostavno prepisati ili napraviti copy&paste.

Rješenje bi bilo pretvoriti PASSWORD polje (INPUT TYPE="PASSWORD") u INPUT polje (INPUT TYPE="TEXT") koji će lozinku prikazati konkretnim znakovima.

Usput želimo i pokriti slučajeve kada (napredni) web preglednik nakon učitavanja stranice sam popuni polje za lozinku.

POSTAVLJANJE OKRUŽENJA

Bookmarklet se radi kao i svaki drugi Javascript: direktno na stranici. A kada smo zadovoljni rezultatom jednostavno ga prebacimo u bookmarklet (link tipa A HREF="javascript:...").

Zato ćemo si napraviti praznu stranicu i na nju postaviti tri forme - želimo da naš kod pronađe sve passworde u svim formama na stranici.

<html
<head>
<title>Bookmarklet</title>
</head>
<body>
<form name="form1">
<input type="text" name="text1" value="text1" />
<input type="password" name="password1" value="password1" />
</form>
<form name="form2">
<input type="text" name="text2" value="text2" />
<input type="password" name="password2" value="password2" />
</form>
<form name="form2">
<input type="text" name="text2" value="text3" />
<input type="password" name="password2" value="password3" />
</form>
</body>
</html>

Kako se bookmarklet okida na naš klik, napravit ćemo nešto takvo na stranci, neki ONCLICK događaj kojim ćemo testirati bookmarklet u toku razvoja.

<a href="#" onclick="javascript:reveal()">Revel</a>

I u HEAD ćemo staviti Javascript koji će biti radna verzija bookmarkleta:

IDEJA

Password polje ne može prikazivati ništa osim zvjezdica ili točica ili koji je već znak kojim operacijski sustav ili browser maskiraju lozinku.

Idealna bi situacija bila da pretvorimo tip polja iz PASSWORD u TEXT:

if(element.type == 'PASSWORD') element.type = 'TEXT'

Ali to ne ide iz više razloga.

Zato ćemo napraviti nešto drugo, a to je kloniranje PASSWORD elementa u novi element, postavljanje type atributa na 'TEXT' i na kraju zamjena PASSWORDA TEXTom.

Kod bi išao ovako:

var e = password_polje.cloneNode(true)
e.setAttribute('type', 'text')
password_polje.parentNode.replaceChild(e, password_polje)

INTERNET EXPLORER

Znali ste, jelda? Ne možeš napisati jednu normalnu skriptu a da ne načneš Internet Explorer bube. Jebiga. Ali moramo i njega pokriti.

Na IE6 (i IE7 izgleda) cloneNode() je pokidan i ne radi.

Zato ćemo KREIRATI element INPUT i na njega iskopirati čim više atributa (PROPERTIES) PASSWORD polja.

var e = document.createElement('input')
e.setAttribute('type', 'text')
e.setAttribute('name', password_polje.getAttribute('name')
e.setAttribute('value', password_polje.getAttribute('value')
// itd po atributima
password_polje.parentNode.replaceChild(e, password_polje)

I radi! Ovaj kod radi u velikoj četvorki (IE, Firefox, Opera, Safari)

PETLJA

Kako nam je cilj zamijeniti SVA polja koja su PASSWORD tipa moramo napraviti pelju koja će izvući sve INPUT elemente i one kojima je TYPE="PASSWORD", iskopirati atribute u novo INPUT polje i zamijeniti ga s tim novim poljem.

var a = document.getElementsByTagName('input')
for(i = 0; i < a.length; i++)
{
if (a[i].getAttribute('type') == 'password')
{
// zamjena
}
}

ATRIBUTI

Atribute (osobine) treba iskopirati malo ljepše, jer ako napravimo niz tipa:

e.setAttribute('name', password_polje.getAttribute('name')
e.setAttribute('value', password_polje.getAttribute('value')
// itd po atributima

Netko će nas prijaviti da programiramo šampionski i onda imamo velike šanse da kad danas sutra idemo ulicom neki klinac na nas pokaže prstom i kaže:
"Gle mama ovog luzera, on programira šampionski!"

Zato ćemo si fino atribute nabiti u array i kopirati ih moderno:

var p = new Array('id', 'name', 'value', 'class', 'style', 'maxlength', 'size');
for (j = 0; j < p.length; j++) e.setAttribute(p[j], password_polje.getAttribute(p[j]));

SVE ZAJEDNO

Kad sve ovo spojimo, funkcija koja sve ovo radi izgleda ovako:

I sad ovo testiramo u svim browserima. Radi okej u sva četiri, ali još nismo gotovi.

PRETVARANJE U BOOKMARKLET

Primjećujete točka-zareze na kraju liniju? E oni su potrebni jer ćemo sad sve to prebaciti u jednu liniju.

Obrišemo "function reveal()" i prvu otvorenu i zadnju zatvorenu vitičastu liniju i maknemo sva NEWLINE mjesta tako da sve dobijemo u jednoj liniji.

Nakon toga link kojim smo testirali izmijenimo:

HREF="#" ONCLICK="javascipt:reveal()"

postaje

HREF="javascript:..."

pri čemu je "..." naša jednolinijska kobasica.

ZAVRŠNICA

Link uvijek nekud vodi, a mi imamo javascript: link koji ne smije voditi nikud.

Da bismo spriječili browser da ode tamo nekamo, moramo ga zaokružiti u funkciju. Jedan od načina da se to napravi je zarobljavanje u tijelo funkcije. To se radi ovako:

HREF="javascript:function(){...}()

pri čemu je "..." ista ona kobasica od Javascripta

Link koji smo ovako dobili na stranici odvučemo gore u toolbar, mjesto gdje imamo ove brze linkove koji su nam uvijek pri ruci.

Nakon jednostavne provjere u ona četiri browsera vidimo da sve radi kako spada.

Odlazimo do frižidera i uzimamo jedno hladno pivo. Nakon prvog gutljaja radosno uskliknemo: "Ja sam jebeni Javascript majstor".

• • • • •

Bookmarklet je ovdje (drag&dropajte ga gore u linkbar browsera):

Password Revealer.

Testna stranica:

password-revealer.zip (cca kilobajt).

Pozdrav Javascriptašima i ostalima koji se loše osjećaju.

[Programiranje]