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

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

Úvod

•

Co jsou uživatelské skripty? • •

•

K čemu je to dobré? •

•

Umožňují spouštět uživatelem definované skripty na (cizích) webových stránkách Typicky v JavaScriptu 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ů

Motivace

•

Čeho se dá s Greasemonkey dosáhnout? •

Book Burro

„Hello World“ skript v Greasemonkey

•

helloworld.user.js // // // // //

==UserScript== @name Hello World @description display "Hello World" on every page @include * ==/UserScript==

alert('Hello, world!');

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)

Metadata

•

U každého skriptu jsou metainformace, které určují název skriptu, kdy se má spouštět, … // // // // // // // //

•

==UserScript== @name Hello World @namespace http://www.example.com/ @description "Hello World" on every page @include * @exclude http://google.com/* @exclude http://www.google.com/* ==/UserScript==

@exclude má přednost před @include

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

Podrobnosti o Google Image Search

•

Obrázky mají link na takovouto URL: /imgres?imgurl=http://ex.com/image.gif&imgrefurl=http://ex.com/index.html

• •

Stačí najít všechny elementy , 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.evaluate je k dispozici pouze ve Firefoxu a vyhodnocuje Xpath výrazy

Uživatelský skript pro Google Image Search // // // //

==UserScript== @name Google Image Search Upgrade @include http://images.google.*/* ==/UserScript==

nodes = document.getElementsByTagName('A'); 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]); }

Greasemonkey API •

GM_log(message);

• •

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);

•

•

Zapíše zprávu do JavaScriptové konzole, ladící účely

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í!)

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)

Použití API – řešení // // // //

==UserScript== @name Linker @include http://www.google.com/ ==/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]); }

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

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)

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'

Kompilace skriptů

•

Greasemonkey Compiler •

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

Neocenitelní pomocníci při vývoji uživatelských skriptů

•

DOM Inspector •

•

Firebug •

•

Inspect Element najde element v DOM stromu, živé editování

JavaScript Shell •

•

Pro procházení DOM stromu dokumentu

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 Source zobrazí HTML obsah dokumentu po vykonání JavaScriptu

Uživatelské skriptování v jiných prohlížečích

•

Opera •

•

Internet Explorer •

•

Greasemonkey for IE, Trixie, Turnabout (včetně GM API)

Safari •

•

Od verze 8 má vestavěnou podporu uživatelských skriptů, nemá GM API

GreaseKit

Konqueror •

Konqueror Userscript

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)

Odkazy

•

GM Homepage •

•

GM Wiki •

•

http://wiki.greasespot.net/

Kniha/manuál ke Greasemonkey •

• •

http://www.greasespot.net/

http://diveintogreasemonkey.org/

Kniha Greasemonkey Hacks (O'Reilly 2005) Databáze uživatelských skriptů •

http://userscripts.org/, http://userjs.org/

Otázky?