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.

Advertisements

One thought on “Executing Javascript through a Firefox Bookmark

  1. Pingback: Run Javascript through a Firefox Bookmark to Highlight Components | scottizu

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s