Response title
This is preview!
Move this topic
[jQuery] Greasemonkey + jquery + functions
in Using jQuery
•
16 years ago
I've been trying to use jquery within a greasemonkey script, and keep
hitting the same problem. Both from a simple copy and paste of jquery
into a greasemonkey script, and using the version of jquery modified
for greasemonkey over at http://userscripts.org/scripts/show/7373 ,
there's one problem which will come up.
Adding or changing something on a page works fine, except that it
won't seem to add javascript functions. For example, the code below
* greasemonkey init code + The main jquery lib code*
function AlertBox()
{
alert("Popup from userscript function!")
}
$("body").prepend( $("<input type='button' name='popupButton'
value='popUp' onclick='AlertBox()'>") );
This will create the button, but there will be no effect from clicking
it, other than an error message on the console warning of a missing
AlertBox function, and a view source will show no AlertBox function
in the page source.
Any ideas on what might be going wrong here, or if there's a way to
get it working? I've tried the same code as a konqueror userscript,
and everything runs perfectly.
Replies(6)
Re: [jQuery] Greasemonkey + jquery + functions
16 years ago
<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Not sure this will work, but worth a try:<BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">* greasemonkey init code + The main jquery lib code*</DIV></BLOCKQUOTE><DIV><BR class="khtml-block-placeholder"></DIV><DIV>$('<input type="button" name="popupButton" value="popUp">').prependTo('body').click(function() {</DIV><DIV> alert("Popup from userscript function!");</DIV><DIV>});</DIV><DIV><DIV><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR><DIV><DIV>On Jun 8, 2007, at 12:34 PM, emerson999 wrote:</DIV><BR class="Apple-interchange-newline"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I've been trying to use jquery within a greasemonkey script, and keep</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">hitting the same problem. Both from a simple copy and paste of jquery</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">into a greasemonkey script, and using the version of jquery modified</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">for greasemonkey over at <A href="http://userscripts.org/scripts/show/7373">http://userscripts.org/scripts/show/7373</A> ,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">there's one problem which will come up.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Adding or changing something on a page works fine, except that it</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">won't seem to add javascript functions. For example, the code below</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">* greasemonkey init code + The main jquery lib code*</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">function AlertBox()</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">{</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>alert("Popup from userscript function!")</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">}</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">$("body").prepend( $("<input type='button' name='popupButton'</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">value='popUp' onclick='AlertBox()'>") );</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">This will create the button, but there will be no effect from clicking</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">it, other than an error message on the console warning of a missing</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">AlertBox function,<SPAN class="Apple-converted-space"> </SPAN>and a view source will show no AlertBox function</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">in the page source.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Any ideas on what might be going wrong here, or if there's a way to</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">get it working? I've tried the same code as a konqueror userscript,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">and everything runs perfectly.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> </BLOCKQUOTE></DIV><BR></DIV></BODY></HTML>
Leave a comment on kswedberg's reply
Re: [jQuery] Greasemonkey + jquery + functions
16 years ago
No luck, which is really odd as I can't see any reason that wouldn't
work. Not even a javascript error when the button is pushed. I might
just need to break down and look inside the greasemonkey plugin to see
exactly what it's doing with the userscript files before passing it on
to mozjs. A little beyond my level, but might be worth a shot.
Leave a comment on joetierney's reply
Re: [jQuery] Greasemonkey + jquery + functions
16 years ago
On my lunch break, and I did a bit more looking into it. From what I
understand, and someone more familiar with greasemonkey may be able to
correct me, it actually looks like what I'm trying to do might not be
possible, by intentional design. There's an extension called
chickenfoot which looks a bit more like the stock injection of
javascript into a page that I'm used to for userscripts.
Leave a comment on joetierney's reply
Re: [jQuery] Greasemonkey + jquery + functions
16 years ago
Not sure why your script isn't working. You can review the code of
another jQuery greasemonkey script here:
http://userscripts.org/scripts/source/6061
~Sean
Leave a comment on littlecooldude's reply
Re: [jQuery] Greasemonkey + jquery + functions
16 years ago
While I am new to both Greasemonkey and jQuery (both are dripping with
amazing potential), it is true that
onclick='AlertBox()'
will not work because this is being evaluated after Greasemonkey has
disappeared out of sight. Karl's remedy should have worked since that
is referencing the actual function itself. That continues to exist
even after the name has ceased (assuming something is referencing
it).
The disappearance is a result of some very important security
precautions, as I understand it. So it may be dangerous to try to get
around them. If not done right, the Greasemonkey paradigm can lead to
any website that you visit actually compromising your entire file
system.
I have listed below a fully functional Greasemonkey script though it
needs a host to run to load jQuery (say XAMPP on localhost). I could
not get 6061 working which would be a nice standalone solution. The
solution below I found awhile ago from http://joanpiedra.com/jquery/greasemonkey/
though I could only obtain it via the cache of Google. I also added
Karl's code in it at the end and it worked fine.
//
//
--------------------------------------------------------------------
//
// ==UserScript==
// @name jquery lib
// @namespace http://jostylr.com/
// @description Starting
// @include *
// @exclude
// ==/UserScript==
// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://localhost/path/to/jquery.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
// Check if jQuery's loaded
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined')
{ window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();
// All your GM code must be inside this function
function letsJQuery() {
//make sure there is no conflict between jQuery and other libraries
$.noConflict()
//notify that jQuery is running...
$('<div>jQuery is running!</div>')
.css({padding: '10px', background: '#ffc', position:
'absolute',top: '0', width: '100%'})
.prependTo('body')
.fadeIn('fast')
.animate({opacity: 1.0}, 300)
.fadeOut('fast', function() {
$(this).remove();
});
$('<input type="button" name="popupButton" value="popUp">').prependTo
('body').click(function() {
alert("Popup from userscript function!");
});
}
Leave a comment on jostylr's reply
Re: [jQuery] Greasemonkey + jquery + functions
16 years ago
Thanks all! The additions jostylr made to karl's work did the trick.
Just started the actual work in porting over my jquery using scripts,
and so far so good.
Leave a comment on joetierney's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to joetierney's discussion