Greasemonkey script won't append to id

Question

I'm trying to write my first Greasemonkey script, and I'm not sure why it isn't working. The alerts display what they should, but the .append doesn't work. I'm running the script from my local machine for now on a non-local site.

Why might it not be working?

// ==UserScript==
// @name        LootTracker
// @namespace   Kong
// @include     http://www.kongregate.com/games/5thPlanetGames/*
// @version     1
// @grant       none
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==

alert('1');
LootTabHeaderText = "<li id='loot_tab'></li>";
alert(LootTabHeaderText);
$("#main_tab_set").append(LootTabHeaderText); //doesn't fire

You might need to load jQuery to get that working... see [this question](http://stackoverflow.com/questions/2246901/how-can-i-use-jquery-in-greasemonkey-scripts-in-google-chrome/8890387) — Mottie, Aug 08 '14 at 03:38

score 2 · Accepted Answer · edited May 23 '17 at 12:29

Your target site already uses jQuery and your script is loading a different jQuery on top of it. Loading jQuery in @grant none mode busts the page, or the script, or both.

Additionally:

The node with the id main_tab_set is not always present and is probably added via AJAX. You need AJAX techniques for that.
The node may be in an iFrame. You'd need to adjust the script's @include statements for that.

(Note that in 60 seconds of poking around, I did not see that node at all.)

So, Change the script to this:

// ==UserScript==
// @name        LootTracker
// @namespace   Kong
// @include     http://www.kongregate.com/games/5thPlanetGames/*
// @version     1
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
console.log ('1');
LootTabHeaderText = "<li id='loot_tab'>Loot tab</li>";
console.log (LootTabHeaderText);

waitForKeyElements ("#main_tab_set", appendListItem);

function appendListItem (jNode) {
    jNode.append (LootTabHeaderText); 
    console.log ("Node found!");
}

That will work unless the content is in an iframe. In that case, adjust the @includes to fire on the iframe.

Open the console (CtrlShiftK) to see the debug messages.

score 0 · Answer 2 · answered Aug 08 '14 at 04:08

You are wrong. Your event do fire but the element is not there. Here is a working code.

// ==UserScript==
// @name        LootTracker
// @namespace   Kong
// @include     http://www.kongregate.com/games/5thPlanetGames/*
// @version     1
// @grant       none
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==

// Page elements must load first
// On page load run this code
$(function(){
  checkDOMChange();
});

var times = 0;
function checkDOMChange()
{
  // If there is no menu
  if( $("#main_tab_set").length==0 ){
    times++;
    if(times<=100) // Give 10secs max
     setTimeout( checkDOMChange, 100 );

  }else{

    // Now Lets make the menu tab
    LootTabHeaderText = '<li class="tab" id="loot_tab"><a href="#loot_tab_pane" class="">Loot</a></li>';
    $("#main_tab_set").append(LootTabHeaderText);

  }
}

Happy coding

Greasemonkey script won't append to id

2 Answers2