Greasemonkey script to replace jQuery plugin function?

Question

I'm trying to write a Greasemonkey script for Firefox to change the behavior of some pages when they detect a window out of focus. I want the page to continue to function as if it were still in focus, even when I have another tab or window active.

I started out looking at CAPS Security Policies which seemed to work for inline Javascript (window.onfocus,window.onblur), but had no effect on external jQuery script plugin access to focus events.

This is my test page, which uses a jQuery plugin to detect focus. The plugin is inline here, but may also be an external script in some cases.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>jQuery focus test</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

(function($) {
    $.fn.focuscheck = function() {
        function focusOn () {
            document.getElementById('console').innerHTML += '<div>Focus event handler fired.</div>';
        };
        function focusOff () {
            document.getElementById('console').innerHTML += '<div>Blur event handler fired.</div>';
        };

        $(window).bind('focus', focusOn);
        $(window).bind('blur', focusOff);
    };
})(jQuery);

</script>
</head>

<body>    
    <div id="console"></div>
    <script type="text/javascript">
    $('#func').focuscheck();
    </script>
</body>

</html>

And my Greasemonkey script. I'm trying to adapt jQuery Greasemonkey code from joanpiedra.com. In this case, I tried to completely replace the focuscheck jQuery plugin function code from my test page. All the lines are the same as the original except the function focusOff() which should display a different result. I don't know if there is a way to do this without replacing the entire function. If that's an option, I might just want to replace the single focusOff function or the line with $(window).bind('blur', focusOff);.

Right now, the Greasemonkey script doesn't work on my test page. There is no change in the output. Also, I'm not sure if I need to add jQuery to my Greasemonkey script or not, since the page already loads it.

// ==UserScript==
// @name          jQuery
// @namespace     http://www.joanpiedra.com/jquery/greasemonkey
// @description   Play nicely with jQuery and Greasemonkey
// @author        Joan Piedra
// @homepage      http://www.joanpiedra.com/jquery/greasemonkey
// @include       *
// ==/UserScript==

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.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() {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.innerHTML = "(function($){\
        \
        $.fn.focuscheck = function(){\
            function focusOn () {\
                document.getElementById('console').innerHTML += '<div>Focus event handler fired.</div>';\
            };\
            function focusOff () {\
                document.getElementById('console').innerHTML += '<div>CHANGED event handler.</div>';\
            };\
        \
        $(window).bind('focus', focusOn);\
        $(window).bind('blur', focusOff);\
        };\
    })(jQuery);";

    document.getElementsByTagName('head')[0].appendChild(script);   
}

yodog · Accepted Answer · 2012-04-17 00:37:22Z

2

I don't know if there is a way to do this without replacing the entire function

Yes, there is. See code below.

Also, I'm not sure if I need to add jQuery to my Greasemonkey script or not, since the page already loads it.

You don't have to. See code below.

The html (same as yours - i just added "fired from inline JS" to innerHTML)

<html lang="en">
.
.
function focusOn () {
   document.getElementById('console').innerHTML += '<div>Focus event handler fired from inline JS.</div>';
};
function focusOff () {
   document.getElementById('console').innerHTML += '<div>Blur event handler fired from inline JS.</div>';
};
.
.
</html>

The GM script

// ==UserScript==
// @name           TESTE 2
// @namespace      TESTE 2
// @description    TESTE 2
// @include        file:///*
// ==/UserScript==


$ = unsafeWindow.$
$(window).off('blur')

function focusOff () {
    document.getElementById('console').innerHTML += '<div>Blur event handler fired from Greasemonkey.</div>';
};

$(window).on('blur', focusOff);

The result

result image

And here, why you should not use unsafeWindow: http://wiki.greasespot.net/UnsafeWindow

EDIT

About your question in the comments

Thank you. That's exactly what I was looking for. I will look into using a safe wrapper instead of unsafeWindow. If you don't mind a follow-up question: Slide Panel demo - I tried to adapt similar code to override the click function, with $('.btn-slide').unbind('click') then adding a new function, but it doesn't quite work. The event is logged, but the button still activates. $('.btn-slide').bind('click', function(event) { event.preventDefault(); console.log('button clicked'); }); How can I prevent the slide animation?

The new code:

// ==UserScript==
// @name           TESTE 3
// @namespace      TESTE 3
// @description    TESTE 3
// @include        http://www.webdesignerwall.com/demo/jquery/*
// ==/UserScript==

$ = unsafeWindow.$

$(window).load(function(){
    $('.btn-slide')
        .unbind('click')
        .bind('click', function(event) {
            alert('my function here')
            console.log('button clicked')
        })
});

edited Apr 17, 2012 at 0:37

answered Apr 16, 2012 at 12:45

yodog

6,2834 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

moski Over a year ago

Thank you. That's exactly what I was looking for. I will look into using a safe wrapper instead of unsafeWindow. If you don't mind a follow-up question: Slide Panel demo - I tried to adapt similar code to override the click function, with $('.btn-slide').unbind('click') then adding a new function, but it doesn't quite work. The event is logged, but the button still activates. $('.btn-slide').bind('click', function(event) { event.preventDefault(); console.log('button clicked'); }); How can I prevent the slide animation?

yodog Over a year ago

@moski No problem. Do you want to open a new question or should i paste the answer here in the comments section?

moski Over a year ago

Ah, I see now. Thanks again. That's a great help. Now I can make a lot more progress thanks to your assistance. (I only ask after searching and many attempts testing my own solutions.)

Collectives™ on Stack Overflow

Greasemonkey script to replace jQuery plugin function?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related