Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 5 years ago.
Improve this 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?
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.
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().
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
.
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'.
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
Look at Greasemonkey Hacks archived, especially the part Avoid Common Pitfalls archived - I'm often returning to the latter.
Edit: the original links are dead, added links to recent archived version in superscript.
