Solved

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

Posted on 2010-09-12
11
668 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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

707 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

12 Experts available now in Live!

Get 1:1 Help Now