asked on

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

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

Samuel Liew

window.onload = function(){
   var myElement = document.createElement('<a href="http://www.google.com">Google</a>');
   document.getElementById('toolbar').appendChild(myElement); 
}

Open in new window

Samuel Liew

greasemonkey:

(function(){
   var myElement = document.createElement('<a href="http://www.google.com">Google</a>');
   document.getElementById('toolbar').appendChild(myElement); 
})();

Open in new window

ErDrRon

ASKER

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

Samuel Liew

open Firefox's Error Console under Tools menu, click clear, reload the page, and tell me what is the error message.

ErDrRon

ASKER

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

Samuel Liew

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

ErDrRon

ASKER

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

Samuel Liew

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

ErDrRon

ASKER

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?

ASKER CERTIFIED SOLUTION

Samuel Liew

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

ErDrRon

ASKER

Works a treat! Thank you!