How to modify web page elements loaded in a browser

Question

I want to associate some actions with keys (of a keyboard) and then modify the contents of a webpage loaded in the browser. For example, I'll write a firefox plugin and that would be listening to some keyboard events. Based on a key press (or something like that) I want to modify the html code of the page. For example, I would like to change the color of a link. Any suggestions on how can I go about doing this?

Answer 1

Take a look at Safely accessing content DOM from chrome over at developer.mozilla.org

Answer 2

I think follwing sites will be helpfull on has dom reference and next has event examples, https://developer.mozilla.org/en/Gecko_DOM_Reference http://www.w3schools.com/JS/js_examples_3.asp

You can read the elements in the page using follwing methods,
1. getElementById 2. getElementsByTagName 3. getElementByName

and using the DOM you can play with it. ex

//change the background of text box to red
var ele = document.getElementById('textBox1')
ele.style.background = "red";

Answer 3

1. The simplest way to do this would be to write a Greasemonkey script, in which you'd implement the functions you wanted just like you would do it in a web page.
2. A similar solution is to write your own add-on that simply injects your code (similar to the greasemonkey script in (1)) in the page. See this very simple add-on for an example: https://addons.mozilla.org/en-US/firefox/addon/10275
3. If you needed full power (not limited to what the web page can do) in the shortcut handler, you could set it up in an extension (e.g. with a <key> element and then work with the content page from the extension code.

Answer 4

Install the Greasemonkey extension. You will need to read a lot of reference material.