Why doesn't this Greasemonkey script work with this jQuery plugin?

Question

I'm using NinjaKit in Safari (Same as Greasemonkey). The codes are like this

// ==UserScript==
// @name          demo
// @namespace     http://dailymed.nlm.nih.gov/
// @include       http://dailymed.nlm.nih.gov/dailymed/*
// @require      http://code.jquery.com/jquery-1.11.0.min.js
// @require      http://johannburkard.de/resources/Johann/jquery.highlight-4.closure.js
// ==/UserScript==
$(document).ready(function () {
    document.title = 'Hello!' + document.title;
    alert("ZaiJian");

    $("body p").highlight(["a"]);
});

When I visit this page, the alert can be displayed well, but the .highlight function which depends on jQuery.highlight and jQuery doesn't work. It says:

TypeError: 'undefined' is not a function (evaluating 'c.toUpperCase()')

And I find it quite hard to debug this.. Does anyone have ideas about it?

Answer 1

I believe that NinjaKit currently doesn't do @require. Here's an example I made, that works in Firefox/GreaseMonkey and not in Safari/Ninjakit:

// ==UserScript==
// @name           DEBUG
// @include       http://localhost/Library.html
// @require  file:///Users/#######/Sites/hello_world.js 
// @require  http://localhost/~#######/hello_world.js  // EITHER WAY
// ==/UserScript==
alert('activated');
hello_world();

# hello_world.js

function hello_world(){
    alert('Hello World!');
}

Either as a "remote" address or a local file, it worked fine in GreaseMonkey and failed in Safari. It's hard to get the ins-and-outs of NinjaKit currently, in my experience.

Answer 2

You need to read relevant docs before using the jQuery plugin.

First,

Create an entry in your style sheet for the highlight class.

.highlight { background-color: yellow }

In Greasemonkey, the equivalent of that is GM_addStyle('.highlight { background-color: yellow }');.

Second,

To highlight all occurrances of “bla” (case insensitive) in all li elements, use the following code:

$('li').highlight('bla');

You should have left out the brackets, i.e. $("body p").highlight("a");.

Third, I don't think you need $(document).ready() as Greasemonkey scripts are, by default, executed upon DOMContentLoaded event.

Putting it all together:

// ==UserScript==
// @name          demo
// @namespace     http://dailymed.nlm.nih.gov/
// @include       http://dailymed.nlm.nih.gov/dailymed/*
// @require       http://code.jquery.com/jquery-1.11.0.min.js
// @require       http://johannburkard.de/resources/Johann/jquery.highlight-4.closure.js
// @grant         GM_addStyle
// ==/UserScript==
GM_addStyle('.highlight { background-color: yellow }');
document.title = 'Hello!' + document.title;
$("body p").highlight("a");