Het idee achter Greasemonkey is vrij eenvoudig. Het is een Firefox-extensie, die op dezelfde manier is geïnstalleerd als elke andere Firefox-extensie (vind deze via het menu Extra> Add-ons en klik op Installeren).

Het doet echter niets op zichzelf: wat het doet is om u in staat te stellen om scripts uit te voeren, door andere mensen of door uzelf, wat de manier waarop webpagina's eruit zien en functioneert zal veranderen..

Greasemonkey-gebruikersscripts zijn de stukjes code die het werk feitelijk doen - Greasemonkey zelf laadt en beheert deze gewoon. Gebruikersscripts zijn geschreven in JavaScript, maar wees gewaarschuwd: om veiligheidsredenen is dit niet alleen een kwestie van regelmatig JavaScript schrijven en ga je weg.

Er zijn enkele valkuilen om op te letten, hoewel de scripts in deze handleiding geen enkele tegenkomen. Een korte opmerking als u onbekend bent met JavaScript: deze gids gaat de JavaScript-syntaxis niet in detail verklaren, maar laat u er niet door weerhouden om het eens te proberen. Het is allemaal redelijk logisch en de codefragmenten worden allemaal uitgelegd.

Om een ​​script te installeren dat iemand anders heeft geschreven, navigeert u naar de locatie in Firefox en klikt u op de koppeling naar het script. Je krijgt een installatie pop-up, net als bij een normale extensie, en kan ofwel eerst naar de broncode van het script kijken, of, als je vertrouwen voelt, installeer het gewoon.

Deel 1 - Je eerste Greasemonkey-script

Greasemonkey biedt een nuttige dialoog om het schrijven van een script zo eenvoudig mogelijk te maken. Nadat je Greasemonkey hebt gedownload en geïnstalleerd in je Firefox-venster, zie je een klein apengezicht in de rechterhoek van de statusbalk.

Klik met de rechtermuisknop op dat en u krijgt een menu met de optie "New User Script". Klik daarop en je krijgt een dialoogvenster dat een beetje lijkt op het vak aan de rechterkant.

De 'naam' is slechts de naam van uw script - u kunt het beste iets kiezen dat duidelijk aangeeft wat het doet, voor het gemak van scriptbeheer later. De 'naamruimte' is om te voorkomen dat je script botst met anderen.

Als u probeert een script te installeren dat dezelfde naam heeft als een reeds geïnstalleerd script, is het de naamruimte die bepaalt of het de oude zal overschrijven (als de naamruimte hetzelfde is) of er naast zou bestaan ​​(als ze verschillend).

Er zijn een paar dingen die u hier kunt doen: de eerste is om uw eigen website te gebruiken als de domeinnaam. Als alternatief kunt u gebruiken http: // localhost, of als je van plan bent om het te uploaden naar http://userscripts.org als je klaar bent, kun je dat gebruiken.

Huidige versies van Greasemonkey laten je niet toe om het leeg te laten. 'Beschrijving' is voor een door mensen leesbare regel die beschrijft wat het script doet. Het is een heel goed idee om dit veld in te vullen, zelfs voor je eigen scripts - je kunt eindigen met stapels dingen en ze zullen een stuk gemakkelijker te beheren zijn als je extra aanwijzingen geeft over welke dingen.

Hack het web

De regels 'include' en 'exclude' bepalen op welke sites een script wordt uitgevoerd en kunnen jokertekens bevatten. Zo, www.example. com / * zal matchen www.example.com/ en alle pagina's die met die URL beginnen (terwijl www.example.com/ zonder dat de asterisk alleen de voorpagina zal bevatten).

U kunt ook jokertekens gebruiken voor delen van namen: http: //*.example.com/f* komt overeen met elke pagina waarvan het pad begint met f, op elke server in het example.com-domein. Standaard bevat het include-vak de pagina waarop u zich bevond toen u op de nieuwe scriptoptie klikte, maar u bent vrij om dat te verwijderen.

Als een include-regel is gekoppeld en geen uitsluitingsregel is gekoppeld, wordt het script uitgevoerd. Als u geen regel voor opnemen heeft, gaat Greasemonkey ervan uit @include *, dat wil zeggen dat elke URL overeenkomt, dus het script zal op elke pagina die u laadt worden uitgevoerd.

Dit eerste script stelt de achtergrond van een pagina in op wit - erg handig als je een pagina tegenkomt waarvan de auteur een voorliefde heeft voor oogverblindend roze, of de soort herhaalde achtergrondafbeelding die binnen enkele seconden tot hoofdpijn leidt.

Dus kies een website waarvan je de achtergrond wilt veranderen en plaats deze in de @ include box (hier gebruik ik www.example.com) en stel de andere velden in zoals van toepassing.

Nadat u dit hebt ingevuld, wordt u om uw gewenste editor gevraagd (als er nog geen een is) en vervolgens laadt Greasemonkey het scriptbestand - dat momenteel alleen de metadata bevat - in uw editor, klaar voor u om iets te schrijven.

Op dit punt ziet de code waarmee u wordt geconfronteerd er ongeveer zo uit:

// == UserScript ==
// @name Achtergrond wijzigen
// @ namespace http://www.example.com/ juliet /
// @description De achtergrondkleur van een pagina wijzigen
// @include http://www.example.com/*
// == / UserScript ==

Nu is het tijd om het script daadwerkelijk te schrijven. Al dit eerste script doet is om de achtergrondkleur van alle pagina's van sites in de omvatten domein naar wit. (Er zijn echt een aantal onaangename achtergrondkleur keuzes die er zijn.)

Voor een pagina zonder frames of andere complicaties is dit heel eenvoudig: slechts één regel.

document.body.style.background = "#ffffff";

document is de ingebouwde manier om naar de huidige pagina te verwijzen. Het is een DOM (Document Object Model) -object dat het volledige HTML-document vertegenwoordigt.

Zie dit als een boom met HTML-elementen die als objecten worden gezien, waarbij elk nieuw element zich aftekent als een 'kind' van de voorgaande elementen - kijk eens naar het onderstaande diagram, waarin een mogelijke structuur voor het hoofdgedeelte van een HTML wordt weergegeven document.

DOM TREE: Een HTML-document als een DOM-structuur - elk kindknooppunt vertakt zich vanaf het bovenliggende knooppunt

De notatie voor verwijzing naar een object in dit model is toplevel.child.childofchild. Dus deze regel neemt het document, dan het lichaamselement, dan de stijl van het lichaam, dan het achtergrondattribuut van de stijl ... en zet het op wit. (#ffffff is wit in hexadecimale notatie, wat een van de HTML-standaarden is. Je kunt ook gewoon wit gebruiken.)

Probeer het nu - kies een pagina met een niet-witte achtergrond, gebruik het menu Scripts beheren om dat toe te voegen aan de tekst voor uw script en de pagina opnieuw te laden.

Houd er bij het testen rekening mee dat u niets doet met de webpagina die u aan het bewerken bent. Je verandert het alleen maar voor jou. Dus als je iets catastrofaals doet, geen probleem! U kunt uw script gewoon uitschakelen of bewerken en de pagina opnieuw laden. Dus voel je vrij om te experimenteren.

Als je aan het testen bent, als je met de linkermuisknop op het gezicht van de kleine aap hebt geklikt, schakelt het de Greasemonkey in of uit. Dus je kunt het uitschakelen, controleren hoe de pagina er momenteel uitziet, schakel het in, herlaad en bekijk wat je script aan het doen is.