Looking for Greasemonkey Scriptwriting basics/tutorial

Question

I have been searching the internet for days now trying to find out how to write my own script, one more complicated than the "Hello World" script.

I understand for the most part how to find specific elements using firebug (I have Firefox). I understand the metadata and how to do all that.

I do not however understand how I am supposed to get whatever I want into the page. Be it links or tabs for Facebook or other sites.

Can anyone help me get a full tutorial/guide that is up to date and easy to understand for total scriptwriting beginners?

Answer 1

From what you have described in the, I suspect that anything that meets your criteria will actually just be a Javascript tutorial with some extra Greasemonkey-specific sections / focus

There's not links to many guides and tutorials (might add them in later) but I really think that what you need is a beginner's guide to Javascript such as sections 1-8 (except 5) of the one provided at the Mozilla Developer Network.

Greasemonkey stuff:

Specifically, the Greasemonkey-related topics that you will need to read up on are related to the DOM, altering styles of DOM nodes, and the Greasemonkey API. All else that you need will be generic Javascript that will be specific to the script you are creating.

1. DOM Manipulation:

   Inserting / editing / deleting "nodes" ( in the HTML code) - for example, <a>nchors, <div>s, <img>s

   This is how the extra links and tabs etc are added into the page.

   Specifically, look into appendChild(), createNode() and insertNodeBefore().

2. DOM Traversal

   Moving around the DOM (HMTL Document) and selecting where to insert the new nodes / selecting which nodes to editor delete.

   Specifically, look into XPATH, getElement(s)By_____, parentNode, querySelectorAll()

   • https://developer.mozilla.org/en/Introduction_to_using_XPath_in_JavaScript
   • https://developer.mozilla.org/en/docs/Web/API/Node/parentNode

   .

3. CSS Using Javascript

   The basics of changing the CSS of a node are to either use .setAttribute() to set the 'style' attribute, or to alter specific CSS properties using nodeReference.style.cssAttribute = 'value'.

4. Greasemonkey API

   Again, this stuff will be specific to what you want to use within the script you create but the basics include GM_getValue(), GM_setValue(), GM_log()

   • http://wiki.greasespot.net/API