Question

I need to have a function execute on a page in one tab when certain conditions are met in another tab. All I need to do is send some kind of nudge to the other tab. I’ve tried many things already in conjunction with a timer to keep polling:

• GM_setValue (not supported in Chrome apparently)
• Setting top.item (apparently doesn’t work between tabs)
• Cookies (even though my userscripts are running in two tabs on the same domain, this doesn’t seem to work)

Any other ideas? And yes, I do need to use Chrome, even though it seems intent on thwarting me in this >.>

Answer 1

Since the tabs are on the same domain, you can use localStorage.

1. Set the script to run on both pages, EG:

   // @include  http://YOUR_SERVER.COM/YOUR_PATH/pitcher/*
   // @include  http://YOUR_SERVER.COM/YOUR_PATH/batter/*
   

2. Be sure you can tell which page is which. By the URL, for example, or some different content.

3. The sending page merely sets values as desired, EG:

   localStorage.setItem ('targetAddress', 'http://puppies.com/');
   

4. The receiving page listens for storage events like:

   $(window).bind ("storage", function (zEvent) {
       ...
   } );
   

   or

   window.addEventListener ("storage", function (zEvent) {
       ...
   }, false);
   

Putting it all together, here is a complete script, that works in both Firefox and Chrome (and probably Opera and others).

You can test it against this “sender” page, and this “receiver” page.

// ==UserScript==
// @name     _Cross tab, same domain communication
// @include  http://jsbin.com/ihoboz/*pitcher*
// @include  http://jsbin.com/ihoboz/*batter*
// @include  http://YOUR_SERVER.COM/YOUR_PATH/pitcher/*
// @include  http://YOUR_SERVER.COM/YOUR_PATH/batter/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in Greasemonkey 1.0.   It restores the sandbox.
*/

function GM_main ($) {
    /*-- Is this the sending or receiving page?
        In our example, the sender has "pitcher" in the URL,
        while the receiver has "batter" in the URL
    */
    var isSender = false, isReceiver = false;

    if (/pitcher/i.test (location.href) ) {
        isSender    = true;
    }
    else if (/batter/i.test (location.href) ) {
        isReceiver  = true;
    }

    if (isSender) {
        //-- Add 2 buttons to change the data we send to the other tab.
        $("body").prepend (
            '<button class="gmTestButtons">Set the transmitted value.</button>' +
            '<button class="gmTestButtons">Reset the transmitted value.</button>'
        );

        $("button.gmTestButtons").click ( function () {

            if (/^Set the transmitted/.test (this.textContent) ) {
                localStorage.setItem ('targetAddress', 'http://puppies.com/');
            }
            else {
                localStorage.setItem ('targetAddress', 'http://unicorns.com/');
            }
        } );
    }
    else if (isReceiver) {
        //-- Listen for changes in local storage
        $(window).bind ("storage", function (zEvent) {
            var varName     = zEvent.originalEvent.key;
            var newValue    = zEvent.originalEvent.newValue;

            alert (
                'Received new variable, "'   + varName
                + '", with a new value of: ' + newValue
            );
        } );
    }
}

//-- Style and/or postion our buttons
GM_addStyle ( "                                 \
    button.gmTestButtons {                      \
        margin:                 1em;            \
        padding:                1ex 1em;        \
        font-size:              20px;           \
        background:             pink;           \
    }                                           \
" );


//--- The rest of this just loads jQuery in a cross-browser way.
//
if (typeof jQuery === "function") {
    console.log ("Running with local copy of jQuery!");
    GM_main (jQuery);
}
else {
    console.log ("fetching jQuery from some 3rd-party server.");
    add_jQuery (GM_main, "1.7.2");
}

function add_jQuery (callbackFn, jqVersion) {
    var jqVersion   = jqVersion || "1.7.2";
    var D           = document;
    var targ        = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    var scriptNode  = D.createElement ('script');
    scriptNode.src  = 'http://ajax.googleapis.com/ajax/libs/jquery/'
                    + jqVersion
                    + '/jquery.min.js'
                    ;
    scriptNode.addEventListener ("load", function () {
        var scriptNode          = D.createElement ("script");
        scriptNode.textContent  =
            'var gm_jQuery  = jQuery.noConflict (true);\n'
            + '(' + callbackFn.toString () + ')(gm_jQuery);'
        ;
        targ.appendChild (scriptNode);
    }, false);
    targ.appendChild (scriptNode);
}