INFO 343 Web Technologies

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.