Kako napraviti Greasemonkey skriptu?

Srijeda, 27. Siječnja

Greasemonkey je plugin za Firefox koji omogućava korisnicima da instaliraju skripte koje automatski prepravljaju web stranice nakon što se one učitaju u preglednik.

(Primjeri takvih skripata bili bi sakrivanje određenih reklama na stranici, pretvaranje neklikabilnih linkova u prave linkove, povećavanje presitnog fonta itd.)

Kako su Greasemonkey skripte zapravo JavaScript, za izradu istih potrebno vam je malo bolje poznavanje spomenutog jezika te bar osnovna upućenost u DOM.

U nastavku ću opisati kako se radi jednostavna GM skripta koja radi u Firefoxu te Operi.

• • • • •

JAVASCRIPTA

Internet Explorer ima jedan bug tj. feature: ako slika na web stranici nema TITLE atribut onda se u tooltipu prikazuje sadržaj ALT taga, ako postoji. Ostali preglednici dobro rade tj. na mouseover prikazuju samo sadržaj TITLE atributa, ako postoji.

Želimo li dobiti takvo ponašanje u drugom browseru potrebno je malo programirati.

Napravit ćemo skriptu koja će se izvršavati nakon učitavanja stranice. Ona će uzeti sve IMG elemente i prekopirati ALT atribut na TITLE atribut, naravno ako je TITLE atribut prazan.

Cijela funkcija izgleda ovako:

function userjs_alt2title()
{
var images = document.getElementsByTagName('img')

  for(var i in images)
  {
    if(typeof images[i] == 'object')
    {
      if(images[i].getAttribute)
      {
        if(images[i].getAttribute('title') == null)
          images[i].setAttribute('title', images[i].getAttribute('alt'))
      }
      else
      {
        if(images[i].title == '')
          images[i].title = images[i].alt
      }
    }
  }
}

Kako se nismo s JavaScriptom upoznali jučer stvar ima dodatne provjere: idemo u akciju samo ako je element objekt te koristimo getAttribute() i setAttribute() ako postoje.

Provjeriti da li stvar radi kako spada možemo na 2 načina: stavimo je u html kod koji ima nekoliko slika te je pozovemo na onload() ili je zaokružimo u bookmarklet (upute u malo starijem postu: Kako napraviti bookmarklet).

GREASEMONKEY

Ako već niste instalirajte Greasemonkey u Firefox. Nakon obvezatnog restarta browsera u meniju Tools dobit ćete Greasemonkey podmeni. U njemu odaberete New User Script i dobit ćete ovakav prozor:

Greasemonkey: New User Script

Prema primjeru popunite naziv, namespace (URL vaše stranice) i opis. Includes su stranice na kojima će skripta raditi. Zvjezdica znači SVE. Excludes su stranice na kojima skripta neće radit. Tu stavite neku kritičnu stranicu koja neće imati feature na kojem radimo.

Nakon toga (ako prvi put koristite ovu opciju) GM će vas pitati koji editor koristite, pa mu dajte putanju do njega.

U zadnjem koraku konkretna datototeka tj. JavaScript će se otvoriti u editoru.

GREASEMONKEY SKRIPTA

Upisom podataka kao na slici gore otvara se datoteka pod nazivom copy_img_alt_2_img_title.user.js ovakvog sadržaja:

// ==UserScript==
// @name ImgAltToTitle
// @namespace http://lionsfart.com/
// @description Copies images' ALT attribute to TITLE attribute
// @include *
// ==/UserScript==

To su kao nekakvi obavezni podaci u zaglavlju. Proširit ćemo to s autorom (here! here!) i verzijom:

// ==UserScript==
// @name ImgAltToTitle
// @author Dado
// @namespace http://lionsfart.com/
// @version 1.0
// @description Copies images' ALT attribute to TITLE attribute
// @include *
// ==/UserScript==

Ispod toga dodamo našu JS funkciju userjs_alt2title() i preostaje nam samo da je pozovemo. GM pokreće skripte nakon što se stranica učita tako da nam je za poziv dovoljno napisati ovo:

userjs_alt2title()

Ali nećemo tako jer ipak poznajemo JavaScript za napredne, nego ovako:

document.addEventListener('load', function(e) { userjs_alt2title(); }, false)

I to je sve. Snimite, učitajte neku stranicu u browseru i uvjerite se da radi.

Datoteke:

Cijela skripta (774b)
Stranica za testiranje (vidi source)

OPERA

Još od verzije 9.nešto Opera podržava User JS tj. JavaScripte koje slično kao Greasemonkey nešto rade sa stranicom. Da bi ih uključili potrebno je otići u konfiguraciju, uključiti User JavaScript (dva checkboxa) te ubaciti putanju do skripata, ako već ne postoji:

Opera Config: User JavaScript

Zapamtite direktorij (putanju) jer u nj ćete kopirati skripte.

Dakle, kad ste sve fino te lijepo postavili kako je priloženo preostaje vam da uzmete skriptu koju smo gore konstruirali, nabijete je u spomenuti direktorij i napravite par promjena na njoj.

Šalim se, nema se što mijenjati, sve odmah radi i u Operi, pa valjda znamo programirati po Pravilniku službe! :)

btw Ovaj Operin logo iznad nema TITLE tako da ga možete iskoristiti za test ako ste odrađivali korake čitajući ovaj tekst. ;)

• • • • •

Coming soon: Kako napraviti WordPress plugin?

PS. Namechk, još jedan dobar alat za provjeru zauzetosti aliasa na društvenim webovima.

Vezani post:

- Kako programski postati na Twitter?
- 10 korisnih bookmarkleta
- Kako napraviti bookmarklet
- Korisni bookmarkleti

[Programiranje]

Komentari

28.01.2010. 3:14 | 1

Deda

Steve Jobs ušetao je na pozornicu centra u San Franciscu, neglamurozan kao i uvijek, a čitava dvorana je zašutjela. "Želimo započeti 2010. godinu predstavljanjem istinski čarobnog i revolucionarnog proizvoda", započeo je Jobs prezentaciju iPada, novog Appleovog gadgeta na kojem se zasniva financijska budućnost tvrtke. Jobs tvrdi kako se radi o napravi koja je spoj laptopa i smartphonea...

SUPERSIZED iPhone...

NEMA multitaskinga...

NEMA flasha...

NEMA kamere...

NEMA USB...

http://i.gizmodo.com/5458382/8-things-that-suck-about-the-ipad

28.01.2010. 4:41 | 2

Deda

10 najboljih igara za Ivana ;-)

http://wolfwoodscrowd.info/2010/01/26/10-najboljih-igara-za-linux/

http://search.twitter.com/search?q=%23racunalozaivana

https://spreadsheets.google.com/ccc?key=0Ajl_6EjtYcssdEZKRG5oZl9zRTFWdUlzQ0lzcHRiUWc&hl=hr
Želim -- Hoću -- Mogu popis

https://spreadsheets.google.com/viewform?formkey=dEZKRG5oZl9zRTFWdUlzQ0lzcHRiUWc6MA
Želim -- Hoću -- Mogu

28.01.2010. 7:32 | 3

Deda

Now that our future has been revolutionized, at least for today,
with a Moses-like tablet
that will change how we publish, read, think and watch NSFW videos in public spaces, it's easy to forget about the real future of computers - the one that involves no physical screen, and no real gadget, at all.

http://www.motherboard.tv/2010/1/27/what-s-better-than-a-tablet-a-computer-that-doesn-t-need-a-screen

28.01.2010. 12:10 | 4

Deda

o, dajte me prosvijetlite:

koja je razlika, osim cijene, između LCD Photo Frame-a te Apple iPad-a

btw, zanimljiva igra riječi: Apple i Pad

kao i uvijek, nenadjebif sam :-)) hehehe

29.01.2010. 16:18 | 5

Deda

lijep efekat
http://www.romancortes.com/blog/pure-css-coke-can/

lijepe stranice
http://www.romancortes.com/

31.01.2010. 7:00 | 6

Deda

Sveučilište u Zagrebu
STUDENTSKI CENTAR U ZAGREBU
Temeljem odredbi iz CARNetove Odluke CDA0035 donosi
PRAVILNIK
o korištenju domskog Interneta

U Zagrebu, 4. siječnja 2010. god.

http://www.iugrina.com/files/Pravilnik_DI_30.pdf

to kaj da su pisali teški debili...