Run Javascript through a Firefox Bookmark to Highlight Components

Read <a href=’https://scottizu.wordpress.com/2014/10/31/executing-javascript-through-a-firefox-bookmark/’>Executing Javascript Through A Firefox Bookmark</a> to find out how to run javascript through a bookmark.

The modification from that page will allow you to store your BookmarkScript.js file in the root directory of Tomcat.  This is accessed in the Firefox Bookmark via:

http://localhost:8080/BookmarkScript.js

This code will highlight components whose id matches the string given. For instance, the following code will place an overlay on top of all div elements whose id starts with “abc_”.

This code needs to reside in the Root directory of your local Tomcat instance and be named as BookmarkScript.js.


// Print a message at the bottom of the page
err=function(e){
  s=e.description;
  if(!s){
    s=String(e);
  }
  d=document.createElement("div");
  d.innerHTML=s;
  d.style.color="red";
  document.body.appendChild(d);
  return d;
};
// Create an overlay above the placement
createOverlayDiv=function(e, zind){
  d=document.createElement("div");
  d.id=e.id+"_epo";
  d.name=e.name+"_epo";
  
  // Set style, width and height, top and left offset based off e
  d.style.cssText=e.style.cssText;
  d.style.width=e.clientWidth+"px";
  d.style.height=e.clientHeight+"px";
  d.style.top=e.offsetTop+"px";
  d.style.left=e.offsetLeft+"px";

  // Add extra overlay styling
  d.style.zIndex=zind;
  d.style.position="absolute";
  d.style.opacity = .5;
  d.style.display="block";
  d.style.textAlign="center";
  d.style.border="2px solid #A7A"; // Pink Outline
  d.style.background="#ADF"; // Blue Background
  
  // Set Minimum Width/Height and add text (undefined, auto, 0)
  w=e.clientWidth;
  if((!w)||((w!="auto")&&(w<150))){
	w=150;
	d.style.width="150px";
  }
  h=e.clientHeight;
  if((!h)||((h!="auto")&&(h<50))){
    h=50;
    d.style.height="50px";
  }
  d.innerHTML=d.id+"<br>"+w+" x "+h;
	
  return d;
}
// Highlights the placement by creating an overlay
highlighter=function(es, match){
  els=[];
  for(i=0;i<es.length;i++){
    e=es[i];
    if(e.id.indexOf(match)>-1){
      els.push(e);
    }
  }
  for(i=0;i<els.length;i++){
    e=els[i];
    d=createOverlayDiv(e, 10+i);
	e.parentNode.appendChild(d);
  }
};
err("Highlighter, Version 1.0");
err("Errors:");
err("").style.paddingTop="50px";
// Highlight Divs with Ids starting with abc_
try{
  highlighter(document.getElementsByTagName("div"), "abc_");
}catch(e){
  err(e);
}
Advertisements

Executing Javascript through a Firefox Bookmark

In Firefox, you may open the bookmark menu by clicking on the downward triangle next to the star in the address bar.

ADD A NEW BOOKMARK

  • Go to http://www.google.com.
  • Open the bookmark menu.
  • Select “Bookmark This Page”.
  • In the Name: Field, enter “Hello World”.

CHANGE THE LOCATION TO INCLUDE JAVASCRIPT

  • Open the bookmark menu.
  • Right click the new “Hello World” bookmark and select Properties.
  • In the Location: Field, enter the following line:
    
    javascript:log=function(message){d=document.createElement("div");d.id="bmDiv";d.innerHTML=message;d.style.color="red";document.body.appendChild(d);};log('Hello%20World');
    
  • Hit Save.

Note: This code will create a div element, place the message within the div, style the div with red coloring and add the div with the message to the html (ie DOM).

USE THE NEW BOOKMARK TO EXECUTE JAVASCRIPT ON A PAGE

  • Open the bookmark menu.
  • Select the “Hello World” bookmark.

You should see new text on the bottom of the page, since a div element was added with the text “Hello World”.

MODIFY CODE TO EXECUTE JAVASCRIPT FROM A LOCAL SERVER
You can host javascript on a local instance of Tomcat and execute it on the page.

Step 1. Create the bookmark to execute the script from a server.

  • Create a new book mark named “Bookmark Script”.
  • Right click the “Bookmark Script” and select Properties.
  • In the Location: Field, enter the following line:
    
    javascript:addScript=function(){s=document.getElementById("bmScript");if(s){document.body.removeChild(s);}s=document.createElement("script");s.id="bmScript";s.src="http://localhost:8080/BookmarkScript.js";document.body.appendChild(s);};void(addScript());
    
  • Hit Save.

Note: This code will create a script element, change the source of the div element to point to a script running on the local host (ie local Tomcat Server) and add the script to the html (ie DOM).

Step 2. Run the server and add the script to the server.

  • Start the Tomcat Server (see Step 11: Setup Tomcat on the Server to Host the Front End Display from¬†https://scottizu.wordpress.com/2014/06/21/a-basic-dashboard/).
  • Add a file in the tomcat root directory named “BookmarkScript.js”.
  • Edit the javascript file “BookmarkScript.js” to include the following javascript:
    
    log=function(message){
      d=document.createElement("div");
      d.id="bmDiv";
      d.innerHTML=message;
      d.style.color="red";
      document.body.appendChild(d);
    };
    log('BookmarkScript');
    

Note: This code will create a div element, place the message within the div, style the div with red coloring and add the div with the message to the html (ie DOM).

USE THE NEW BOOKMARK TO EXECUTE JAVASCRIPT ON A PAGE FROM A LOCAL SERVER

  • Open the bookmark menu.
  • Select the “Bookmark Script” bookmark.

Note: In Firefox, you can right click and “Inspect element” which will give you access to the Console Tab, HTML Tab, etc. You can verify the html is being added by looking at the HTML Tab. To avoid getting an “Blocked loading mixed active content” error in the Console Tab, make sure you use http://www.google.com instead of https://www.google.com.