Google logo cseréje Greasemonkey és jQuery segítségével
Greasemonkey és jQuery segítségével bármilyen oldalon futtathattok saját javascript kódot. Most megmutatom hogyan cserélhetitek le a Google logoját.
Feladat
Gondolom sokan voltatok már úgy, hogy egy gyakran látogatott oldalon hiányoltatok egy funkciót, például amikor betölt a kezdőlap, a kurzor nem ugrik automatikusan a kereső mezőbe, vagy az oldal tetején lévő menü görgetéskor nem tapad a böngésző tetejéhez és kísér minket tovább lefelé.
Ezek mostmár megoldhatóak, ugyanis lehetőséged van akármelyik oldalhoz javascript kódokat írni, és az elemekhez esemény kezelőket kötni, vagy megváltoztatni a css tulajdonságaikat. Persze a módszer nem új, azonban most unatkoztam csak annyira, hogy kicsit tüzetesebben átnézzem.
Miután lesz néhány szó a Greasemonkey-ról, megosztom veletek azt a scriptet aminek segítségével lecserélhetitek a Google logóját valami másra, és ami a legfontosabb, megmutatom hogyan lehet használni jQueryt Greasemonkeyban
Greasemonkey
A Greasemonkey egy Firefox plugin, amivel saját javascript kódokat futtathatsz bármilyen oldalon. Jó videó található róla itt, ha még nem hallottál róla érdemes megnézni.
Alapból Firefoxra van kitalálva, de más böngészőkben is működésre lehet bírni:
- Opera: http://www.opera.com/docs/userjs/
- Safari: GreaseKit
- IE: Ezt nem mondom meg, ne használjatok IE-t
Chrome alatt elvileg simán kellene menniük, azonban a Google logó változtatás nekem ott nem jött össze, ha lesz időm utánanézek mi a probléma.
Ha feltettétek, nézzetek körül a
Saját kód készítése
Egyszerűen annyi a dolgunk, hogy írunk egy javascript fájlt, elmentjük valami.user.js néven, és ha csak mi akarjuk használni akkor behúzzuk a böngésző ablakba, ha más számára is elérhetővé akarjuk tenni, akkor pedig egyszerűen feltöltjük valamilyen tárhelyre.
Fontos, hogy mikor a linkre kattintunk, vagy mikor behúzzuk az ablakba, a Greasemonkey legyen bekapcsolva, különben csak simán megjelenik a js kód.
Nézzünk bele abba a kódba amit én osztok majd meg veletek a cikk végén:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. | // ==UserScript== // @name Google logo // @namespace http://67developer.hu/ // @description Változtasd meg a Google logot // @include http://google.tld/#* // @include http://www.google.tld/#* // @include http://google.tld/ // @include http://www.google.tld/* // @require http://67developer.hu/files/gm_jquery_67.js // ==/UserScript== var NEW_LOGO = 'http://67developer.hu/kepek/google_67.jpg'; // Ide pakold a jquery kódot function letsJQuery() { $(function(){ $('#logo').css('background-image','url('+NEW_LOGO+')'); $('#logo div').html('developer'); $('#logo div').css('top','83px'); }) } |
A kommentelt rész megadása nem kötelező, de ajánlott. Látható a kód neve, leírása, egy névtér amivel különösen nem kell foglalkozni. Ami viszont fontos azok a következők:
@include
Megadható, hogy melyik oldalakon legyen aktív a szkript. A .tld egy joker dolog, ami minden domain végződésre illeszkedik. Ha lusta lettem volna írhattam volna ezek helyett azt, hogy *.google.*, vagy csak simán *, ekkor az összes oldalon megváltozik a logo idvel rendlkező elemek háttere. Az már egy másik kérdés, hogy mennyire fog szépen kinézni.
@require
Most ugrik a Greasemonkey a vízbe: itt adható meg olyan kód, amit a szkriptünk betöltése előtt be szeretnénk tölteni külső forrásból. Mivel lusta vagyok minden szkriptem elejére beírni a kódot amivel használható lesz a jQuery, ezért egy külön fájlba tettem, és ezt ti is tudjátok használni.
Mindössze annyira kell figyelni, hogy a kódot a letsJQuery blokkba pakoljátok. Ezen kívül is definiálhattok függvényeket, viszont ez lesz az ami meg fog hívódni mikor betöltött a jQuery.
Összegzés
Miután feltelepítettétek a Greasemonkeyt, kattintsatok ide a Google logo cserélő szkript letöltéséhez.
Szabadon felhasználhatjátok és módosíthatjátok, és ha feltüntetitek honnan van az ötlet, azt megköszönöm.
