Page contents = "window.content.document"
You can script against the web page by using the "window.content.document" object. Strategy note: It's probably best not to assume that all the many web pages you will host in your browser will have identical structures. Hence, it's probably best to target types of HTML elements. Note that the following command creates an array of the <img> tags:
var allImages = window.content.document.getElementsByTagName("img");
Nested context menus
Illustrated in the XUL file below are nested context menus and separators.
ff-overlay.xul
<?xml version="1.0" encoding="UTF-8"?> <overlay id="contextMenuOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="browser.js" /> <menupopup id="contentAreaContextMenu"> <menuseparator /> <menu label="Background colors"> <menupopup> <menuitem label="Red" oncommand="turnRed.onCommand(event)"/> <menu label= "Blue colors"> <menupopup> <menuitem label="Navy" oncommand="turnNavy.onCommand(event)" /> <menuitem label="Cyan" oncommand="turnCyan.onCommand(event)" /> </menupopup> </menu> </menupopup> </menu> <menuseparator /> <menuitem label="Image marker" oncommand="markImages.onCommand(event)" /> </menupopup> </overlay>
Running scripts against page contents
Note the use of the "window.content.document" object.
browser.js
turnRed = { onCommand: function(event) { // body tag var i = window.content.document.getElementsByTagName("body")[0]; i.bgColor = "red"; } }; turnNavy = { onCommand: function(event) { // body tag var i = window.content.document.getElementsByTagName("body")[0]; i.bgColor = "navy"; } }; turnCyan = { onCommand: function(event) { // body tag var i = window.content.document.getElementsByTagName("body")[0]; i.bgColor = "cyan"; } }; markImages = { onCommand: function(event) { // gather image tags var allImages = window.content.document.getElementsByTagName("img"); for (var i = 0; i < allImages.length; i++) { allImages[i].setAttribute("style","padding: 5px; border: solid 5px black"); } } };
Example: Turning bgcolor = "red"
Example: Outlining images in black
Surprise! A web bug on Yahoo
One of the advantages of outlining all the images on a webpage is the discovery of one-pixel images, i.e., web bugs. Yahoo's "The most popular news" has a web bug to spy on you.
Build your own extension to manipulate webpage content
Build an extension to Firefox that reaches into the webpage and changes its contents. For example, Outline all the DIVs, change the size of all the images, hilight all the <a> tags, etc.