Greasemonkey. Uživatelské skriptování (nejen) ve Firefoxu

Transkript

1 Greasemonkey Uživatelské skriptování (nejen) ve Firefoxu

2 Úvod Co jsou uživatelské skripty? Umožňují spouštět uživatelem definované skripty na(cizích) webových stránkách Typicky v JavaScriptu K čemu je to dobré? Přidání funkčnosti, změna vzhledu,... Co je Greasemonkey? Rozšíření do Firefoxu, které toto umožňuje Sám od sebe nedělá nic, jen zprostředkovává spouštění skriptů

3 Motivace Čeho se dá s Greasemonkey dosáhnout? Book Burro

4 Hello World skript v Greasemonkey helloworld.user.js // ==UserScript== Hello World display "Hello World" on every page * // ==/UserScript== alert('hello, world!');

5 Instalace a spuštění skriptu Instalace se spustí automaticky při otevření libovolného souboru *.user.js ve Firefoxu (pokud je nainstalován Greasemonkey plugin)

6 Metadata U každého skriptu jsou metainformace, které určují název skriptu, kdy se má spouštět, // ==UserScript== Hello World "Hello World" on every page * // má přednost

7 Příklad využití Greasemonkey Google Image Search Odkazy z obrázků vedou na frameset, kde je thumbnail a až po kliknutí na něj se zobrazí žádáný obrázek Chceme změnit toto chování, aby odkaz vedl rovnou na cílový obrázek

8 Podrobnosti o Google Image Search Obrázky mají link na takovouto URL: /imgres?imgurl= Stačí najít všechny elementy <a>, které mají odkaz na URL tohoto formátu, a změnit jim atribut href Pro nalezení elementů lze použít document.getelementsbytagname('a'), nebo document.evaluate document.evaluateje k dispozici pouze ve Firefoxu a vyhodnocuje Xpath výrazy

9 Uživatelský skript pro Google Image Search // ==UserScript== Google Image Search Upgrade // ==/UserScript== nodes = document.getelementsbytagname('a'); for (var i = 0; i < nodes.length; i++) for (var i = 0; i < nodes.length; i++) { var linkelement = nodes[i]; var match = linkelement.href.match( /\/imgres\?imgurl\=(.*?)\&imgrefurl\=/ ); if (match) linkelement.href = decodeuri(match[1]); }

10 Greasemonkey API GM_log(message); Zapíše zprávu do JavaScriptové konzole, ladící účely GM_getValue(key, defaultvalue); GM_setValue(key, value); Uloží nebo načte konfigurační hodnotu, ukládají se trvale, specifické pro jednotlivé skripty, k dispozici v přehledu konfigurace about:config GM_registerMenuCommand(menuText, callbackfunction); Umožňuje přidat do menu Nástroje GreaseMonkey Příkazy uživatelských skriptůpoložku, která spustí zadanou funkci GM_xmlhttpRequest(details); Provede HTTP požadavek (GET nebo POST) na libovolné URL (bez bezpečnostních omezení!)

11 Použití API Chceme za každý odkaz připsat velikost dokumentu, na který odkaz směřuje (GM_xmlhttpRequest) Možnost vypnout a zapnout (GM_registerMenuCommand), toto nastavení aby se ukládalo (GM_setValue, GM_getValue) Logovat všechny tyto odkazy (GM_log)

12 Použití API řešení // ==UserScript== Linker // ==/UserScript== GM_registerMenuCommand("Enable Linker", function() { GM_setValue("enabled", true); }); GM_registerMenuCommand("Disable Linker", function() { GM_setValue("enabled", false); }); function MakeRequest(linkElement) { GM_xmlhttpRequest({ method: 'GET', url: linkelement.href, onload: function(responsedetails) { GM_log(linkElement.href + ": " + responsedetails.responsetext.length); linkelement.innerhtml += " (" + responsedetails.responsetext.length + " bytes)"; } }); } if (GM_getValue("enabled", false)) { GM_log("Linker is enabled, processing all links."); nodes = document.getelementsbytagname('a'); for (var i = 0; i < nodes.length; i++) MakeRequest(nodes[i]); }

13 Bezpečnost uživatelských skriptů Greasemonkey spouští skripty v sandboxu, cílový web k nim nemá přístup Všechny API funkce jsou přístupné pouze z tohoto sandboxu Je zakázáno přepisování metod a vlastností objektů document a window Kvůli sandboxu je prostředí uživatelských skriptů mírně pozměněno

14 Drobné rozdíly v DOM/JavaScriptu Nefunguje string eval na funkce window.settimeout("func", 1000); window.settimeout(func, 1000); Nelze přistupovast přímo k event-handlerům e.onclick = 'func(this)'; e.onclick = func; e.addeventlistener("click", func, true); K vlastním atributům elementů lze přistupovat pouze pomocí.setattribute a.getattribute Nelze iterovat pomocí for (var e in elements)

15 Drobné rozdíly v DOM/JavaScriptu, #2 K formulářům a jejich prvkům je nutné přistupovat přes document.forms.nameditem("form1")a f.elements.nameditem("input1") Nefunguje window.location = "...", používat window.location.href = "..." Proměnné unsafewindow, unsafedocument Nefunguje e.setattribute("style", "color: blue;"), používat e.style.color = 'blue'

16 Kompilace skriptů Greasemonkey Compiler Webová aplikace, z uživatelského skriptu (*.user.js) vytvoří samostatné rozšíření do Firefoxu (*.xpi)

17 Neocenitelní pomocníci při vývoji uživatelských skriptů DOM Inspector Pro procházení DOM stromu dokumentu Firebug Inspect Elementnajde element v DOM stromu, živé editování JavaScript Shell Bookmarklet, umožňuje vyhodnocovat JavaScriptové příkazy v kontextu aktuálního dokumentu, umí zobrazit všechny metody a vlastnosti nějakého objektu Web Developer Toolbar View Generated Sourcezobrazí HTML obsah dokumentu po vykonání JavaScriptu

18 Uživatelské skriptování v jiných prohlížečích Opera Od verze 8 má vestavěnou podporu uživatelských skriptů, nemá GM API Internet Explorer Greasemonkey for IE, Trixie, Turnabout (včetně GM API) Safari GreaseKit Konqueror Konqueror Userscript

19 Možné problémy Některé služby zakazují používání uživatelských skriptů Např. webové hry, internetové obchody Změny na webu způsobí nefunkčnost GM skriptů Bezpečnostní riziko Špatně napsané uživatelské skripty mohou webové stránce zpřístupnit nepovolené údaje nebo funkce (GM_xmlhttpRequest)

20 Odkazy GM Homepage GM Wiki Kniha/manuál ke Greasemonkey Kniha Greasemonkey Hacks (O'Reilly 2005) Databáze uživatelských skriptů

21 Otázky?