How to modify web page elements loaded in a browser
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 pag开发者_高级运维e. For example, I would like to change the color of a link. Any suggestions on how can I go about doing this?
- 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.
- 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
- 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.
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";
精彩评论