Solved

Adding a new link to a DIV using Greasemonkey / JavaScript...

Posted on 2010-09-12
11
685 Views
Last Modified: 2012-05-10
I need to add a new link to a toolbar on a webpage dynamically using JavaScript/Greasemonkey.  The View Page Source code for the existing web page is included in the code snippet below.

Keep in mind that I do not have access to the web page on the server .. that this will be a Greasemonkey script that processes the page with Javascript after the page loads.  Suggestions?
<div id="toolbar"><a href="/game/home.pl" class="toolbar_item">Home</a>



<a href="/game/leagues.pl" class="toolbar_item">Leagues</a>

<a href="/game/search.pl" class="toolbar_item">Search</a>

<a href="/game/hof.pl" class="toolbar_item">HoF</a>

<a href="/game/market_free_agents.pl" class="toolbar_item">Marketplace</a>

<a href="/game/forum_main.pl" class="toolbar_item">Forum</a>

<a href="/game/inbox.pl" class="toolbar_item">Inbox<span id="messageCount"> (?|?)</span></a>

<a href="/game/chat.pl" class="toolbar_item">Chat</a>

<a href="/game/flex_points.pl" class="toolbar_item">Flex Points</a>



<a href="/guides.html" class="toolbar_item">FAQ/Guides</a>

<a href="http://www.glbwiki.com" class="toolbar_item" target="_new">Wiki</a>

<a href="http://www.blogtalkradio.com/goalline-blitz-radio" class="toolbar_item" target="_new">GLB Radio</a>

<a href="http://www.cafepress.com/goallineblitz" class="toolbar_item" target="_new">Shop</a>

<a href="/game/support.pl" class="toolbar_item">Support</a>

<a href="/game/logout.pl" class="toolbar_item" id="logout">Log Out</a>

</div>

Open in new window

0
Comment
Question by:ErDrRon
  • 6
  • 5
11 Comments
 
LVL 14

Expert Comment

by:sam2912
ID: 33660540

window.onload = function(){

   var myElement = document.createElement('<a href="http://www.google.com">Google</a>');

   document.getElementById('toolbar').appendChild(myElement); 

} 

Open in new window

0
 
LVL 14

Expert Comment

by:sam2912
ID: 33660546
greasemonkey:
(function(){

   var myElement = document.createElement('<a href="http://www.google.com">Google</a>');

   document.getElementById('toolbar').appendChild(myElement); 

})();

Open in new window

0
 

Author Comment

by:ErDrRon
ID: 33663712
Thank you for the response!

When I run the following script on the following page, http://goallineblitz.com/game/home.pl , I do not see the addition of a new Google tab in the toolbar.  I've included the code I used below.  Thoughts?

Thanks!

// ==UserScript==

// @name           Testing

// @namespace      ErDrRon

// @description    Testing

// @include        http://goallineblitz.com/game/home.pl

// ==/UserScript==



(function(){

   var myElement = document.createElement('<a href="http://www.google.com">Google</a>');

   document.getElementById('toolbar').appendChild(myElement); 

})();

Open in new window

0
 
LVL 14

Expert Comment

by:sam2912
ID: 33664662
open Firefox's Error Console under Tools menu, click clear, reload the page, and tell me what is the error message.
0
 

Author Comment

by:ErDrRon
ID: 33665846
Error: String contains an invalid character
Source File: file:///C:/Users/Ron/AppData/Roaming/Mozilla/Firefox/Profiles/72gmph1h.default/gm_scripts/testing/testing.user.js
Line: 9
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 14

Expert Comment

by:sam2912
ID: 33665872
That's weird. Anyway, try removing the function tag. It is not necessary for GM scripts. If there are any more errors also let me know.
// ==UserScript==

// @name           Testing

// @namespace      ErDrRon

// @description    Testing

// @include        http://goallineblitz.com/game/home.pl

// ==/UserScript==



var myElement = document.createElement('<a href="http://www.google.com">Google</a>');

document.getElementById('toolbar').appendChild(myElement);

Open in new window

0
 

Author Comment

by:ErDrRon
ID: 33667865
I made the changes as outlined above and still receive the following error:

Error: String contains an invalid character
Source File: file:///C:/Users/Ron/AppData/Roaming/Mozilla/Firefox/Profiles/72gmph1h.default/gm_scripts/testing/testing.user.js
Line: 8

The script is as below:

// ==UserScript==

// @name           Testing

// @namespace      ErDrRon

// @description    Testing

// @include        http://goallineblitz.com/game/home.pl

// ==/UserScript==



var myElement = document.createElement('<a href="http://www.google.com">Google</a>');

document.getElementById('toolbar').appendChild(myElement);

Open in new window

0
 
LVL 14

Expert Comment

by:sam2912
ID: 33668774

try {

	var myDiv = document.createElement("div");

	myDiv.innerHTML = '<a href="http://www.google.com">Google</a>';

	document.getElementById('toolbar').appendChild(myDiv);

} catch(e) {}

Open in new window

0
 

Author Comment

by:ErDrRon
ID: 33670382
I tried the above code.  I did not receive an error in the Error Console but also did not see the added tab on the page.  No changes were noted on the page after refreshing.  Thoughts?
0
 
LVL 14

Accepted Solution

by:
sam2912 earned 500 total points
ID: 33670986
Happens that their nav bar is using styles, so just add the class to the link:
var myDiv = document.createElement("div");

myDiv.innerHTML = '<a class="toolbar_item" href="http://www.google.com">Google</a>';

document.getElementById('toolbar').appendChild(myDiv);

Open in new window

0
 

Author Comment

by:ErDrRon
ID: 33677461
Works a treat!  Thank you!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now