webrebel html css javascript laravel oop php mysql wordpress kurz

Vylepši si internety s UserScripts

napísal , 30 Jul 2012 [ Hacky JavaScript Tutoriály ]

Predstavte si, že sa vám nepáči nejaký web. Máte veľmi jasnú predstavu ako ho vylepšiť, ale nemáte nad ním žiadnu kontrolu. Buď napíšete adminovi (veľa šťastia pri stránkach ako Google;) alebo si napíšete Userscript. (alebo napíšete do Googla a on vám nájde Userscript)

UserScripts sú minimalistické rozšírenia pre Chrome, Firefox a Operu, ktoré slúžia na vylepšenie vzhľadu a správania stránok. Občas aj na vylepšenie správania celého prehliadača. Fungujú veľmi jednoducho - na stránkach definovaných skriptom sa spustí kúsok javascriptu, ktorý stránku "opraví". Narozdiel od extensions, Userscripty majú takmer nulový dopad na svižnosť prehliadača a spotrebovanú pamäť.

Čo je veľmi dôležité. Napríklad taký AdBlock (v základnom nastavení) pre Chrome pridá k načítaniu stránky aj viac ako sekundu. Na čo sa dajú UserScripty použiť, uvidíte na pár príkladoch, ktoré často používam.

Twitter bullshit remover

Mňa osobne maximálne nezaujímajú kydy z 4square-u, akákoľvek zmienka Klout-u a podobné kraviny, preto som spravil skript, ktorý skrýva tweety obsahujúce "4sq" alebo "klout". Protip: 4square zaujíma len tých, čo sú na 4square-i, ostatných nie! Keď vypnete automatické postovanie na Twitter, veľa ľudí dozaista potešíte. A sorry, Marcel, že som zrovna teba použil ako príklad, na niekoho to už len muselo padnúť :)

Download - Bullshit remover for Twitter.user.js (filterPattern si môžete upraviť podľa ľubovôle).

Pôvodný štýl google výsledkov

V Googli mi oveľa viac vyhovoval starý štýl, kde bol pri každom výsledku odkaz na cacheovanú verziu a nezavadzala šípka so screenshotom, ktorá sa vždy rozbalí keď nechcem. Na to tiež existuje Userscript.

Download - Remove Google previews.user.js

Fix na správne fungovanie stredného tlačítka v Chrome

Samotný Chrome nie vždy správne reaguje na otvorenie linku stredným tlačítkom myši. Podľa správnosti by mal otvoriť odkaz v novom tabe, no občas ho otvorí v rovnakom okne (pre názorný príklad kliknite stredným tu na názov produktu).

Download - Fix Chrome Middle Click.user.js

Are you sure you want to leave this page?

I sure AM sure! Feature Chrómu, ktorá mi po prechode z Opery liezla na nervy je, že stránky sa môžu pred zavretím tabu vypytovať, či ich naozaj chcem zavrieť. A keďže naozaj chcem, zbúchal som disableodbeforeunload.user.js. Predpokladám, že na to existuje nejaký extension, ale určite zaberá viac ako 206 bajtov.

Download - Disable Chrome onBeforeUnload.user.js

Google maps fullscreen

Zase raz niečo súvisiace s Googlom - Google Maps Fullscreen. Biely pásik na vrchu mapy sa síce dá prežiť, no keď zbadáte ako cool vyzerá Google mapa na celú obrazovku, budete cítiť silu!

Tajný bonus

Musíte najskôr sľúbiť, že sa mi nebudete moc smiať. Iba trochu.

Nuž.. V zúfalých momentoch občas zavítam na Pokec a samozrejme sa mi nepáčilo zobrazenie používateľov, tak som si spravil vlastné. Navyše väčšinu používateľov tvoria stále tí istí a väčšinu z nich nechcem vidieť. Teraz si ich môžem permanentne skryť X-kom v rohu, ba čo viac, skript najväčších blbcov automaticky povyhadzuje aj sám :) Toto všetko je ale takmer prd platné a aj tak odtiaľ vždy odídem sklamaný. :p Škoda, že neexistuje žiadna inteligentná stránka, kde by boli úplne random neznámi Slováci, s ktorými by sa dalo len tak kecať. (alebo len o nej neviem?)

Download - eh.. napíšte mi mail, ak to naozaj chcete :)

Ako sa to inštaluje?

Chrome - Na stiahnuté userscripty stačí kliknúť a Chrome sa spýta, či ich chcete nainštalovať. Vlastnoručne nakódené userscripty sa inštalujú drag & dropnutím do okna Chrome.
EDIT (11.8.2012) - Chrome po novom nechce inštalovať UserScripty a treba ich povoliť command line parametrom "--enable-easy-off-store-extension-install". "Bezpečnosť" opäť útočí :/
Firefox - Je potrebné nainštalovať extension Greasemonkey (to je vlastne pôvodca Userscriptov), reštartovať a zvyšok je podobný ako v Chrome.
Opera - Tu je to o niečo zložitejšie. Treba ísť do Menu > Settings > Preferences > Advanced > Content > JavaScript options a nastaviť User JavaScript folder na adresár, z ktorého sa majú ťahať UserScripty. Druhá vec, čo je vhodné spraviť, je povoliť spúšťanie skriptov na HTTPS stránkach (Google aj Twitter napríklad používajú HTTPS). To spravíte v mega pokročilých nastaveniach opera:config#UserPrefs|UserJavaScriptonHTTPS. Má to jeden háčik, prehliadač sa po každom spustení raz spýta, či naozaj chcete spúšťať UserScripty na HTTPS.

Najväčším zdrojom hotových userscriptov je http://userscripts.org/. Ak budete nejaké googliť, skúste aj "greasemonkey scripts", to je vlastne ekvivalent.

Ako sa to vyrába?

Neprogramátori môžu v tomto momente pokojne prestať čítať :)

Celkom jednoducho. Vytvoríte nový súbor s kódovaním UTF-8 a koncovkou .user.js - napríklad Vajcia.user.js. Na začiatok tohoto súboru ide špeciálna hlavička:

// ==UserScript==
// @name           Môj geniálny vylepšovač stránky
// @include        http://drist.com/*
// @include        https://drist.com/*
// @exclude        http://drist.com/tuto/sa/nepustaj/*
// @exclude        https://drist.com/tuto/sa/nepustaj/*
// @run-at         document-end
// ==/UserScript==

Po hlavičke už môžete veselo písať akýkoľvek Javascript s pár rozšíreniami navyše.

Ak by ste chceli bindovať funkcie obsiahnuté v Userscripte na tlačítka na stránke, za normálnych okolností to nejde (kvôli bezpečnosti). Čo je trocha nepraktické. Dá sa to samozrejme odrbať tzv. code injectionom - vložením kódu Userscriptu na koniec stránky.

function exec(fn) { // greasemonkey script injection
	var script = document.createElement('script');
	script.setAttribute("type", "text/javascript");
	fn = fn.toString();
	
	script.textContent = fn.substring(fn.indexOf("{") + 1, fn.lastIndexOf("}"));
	document.body.appendChild(script);
	// na niektorych strankach je potrebne chvilu pockat (napriklad na Twitteri), lebo loaduju skripty oneskorene
	//setTimeout(function() { document.body.appendChild(script); }, 1000);
}

exec(function() {
	// moj kod, ktory uz moze veselo volat funkcie userscriptu
});

Pozor, injectnutý kód stráca privilégiá Greasemonkey kódu. Ale to vám bude asi jedno. Komplet dokumentáciu nájdete na http://wiki.greasespot.net.

napísal , 30 Jul 2012

6 komentárov

komentuj
  1. yablko [ Utorok 31.7.2012, 12:51 ]

    ešte by si mohol napísať o nezákladnom nastavení AdBlock:)

  2. 81403 (blade) [ Streda 1.8.2012, 10:49 ]

    No.. potrebuješ tento AdBlock https://chrome.google.com/webstore/detail/gighmmpiobklfepjocnamgkkbiglidom potom choď do nastavení a všetky lists odškrtni.
    Dôvod prečo Chrome zamrzne na pár sekúnd keď otvoríš nový tab v pozadí je ten "Easylist" (pozri aký je hovadský http://adblockplus.mozdev.org/easylist/easylist.txt )

    Potom si môžeš začať vytvárať vlastný malý zoznam (v options > customize), podobne ako v Opere. Zatiaľ tam mám toto:
    /ad*.js
    /banner*
    adserver
    /ads*/*
    /adv*/*
    http://www.google.sk##DIVid="tads"][class="c"]
    http://www.google.sk##DIVid="rhs_block"][class=" rhstc5"]
    ##iframe[id*="ad"]
    ##iframe[title*="ad"]
    ##iframe[class*="ad"]
    http://*quantserve.com/*
    ?*banner*
    iframeAd
    *.googlesyndication.com
    admeld.com
    *.yieldmanager.com

    Nie všetky reklamy eliminuje a pár stránok blbne, ale je to určite lepšie ako spomalený Chrome.

  3. yablko [ Streda 1.8.2012, 21:32 ]

    Ok, tak toto fakt citeľne pomáha a fakt sa kopa vecí aj rozbíja:( teraz len či si viac cením rýchlosť alebo pohodlnosť...

  4. 81403 (blade) [ Štvrtok 2.8.2012, 00:46 ]

    Najlepšie asi bude vyhodiť tie príliš matchujúce veci (/ads*/*, /adv*/*) a postupne robiť filtre na stránky, kde najčastejšie chodíš. If you're up for a lil' challenge.

    Pozerám, že WP ten filter trocha rozbil (chýbajú "[").. oh well.. ak bude jedného dňa za niečo stáť, snáď ho zverejním aj v nerozbitej forme.

  5. Cesticka [ Piatok 28.9.2012, 12:22 ]

    najjednoduchšia cesta jak teraz inštalovať US v Chrome je otvoriť si chrome://chrome/extensions/ a script tam normálne pretiahnuť :)

  6. Ronny [ Štvrtok 31.1.2013, 12:05 ]

    Používam Operu už asi 10 rokov takže s týmto mám veľké skúsenosti. Používam jak užívateľské CSS tak užívateľské JavaScript-y.

    Takže skoro každú často navštevovanú stránku mám *vyčistenú* od vecí ktoré nepotrebujem ja (rozumej: sprostých + klikajúcich reklám, a blokov).