Search code examples
javascriptgoogle-chromepopupchromiumpopup-blocker

Chrome popup "blocker" loads hidden page & plugins - any way around this?


If I launch a window with a flash game in it, and Chrome's popup blocker suppresses it, the user hears the music from the game, but sees nothing. This is because Chrome doesn't block the window; it just hides it.

Chrome loads the page to get the favicon and page title, so they can display it in the popup blocker dialog (which you see when clicking the icon in the address bar). But then they don't close the window. Plugins run, scripts can call back to the opener - it's like a regular window, but invisible. (Okay, malware developers, please stop drooling.)

Chrome could parse the contents of the <head> tag to retrieve the <title> and favicon <link/> tag without actually loading the page. They could close the hidden window after they've retrieved the icon/title. They could just show the URL instead of the icon/title. Instead, the bug continues to fester since 2008...

http://code.google.com/p/chromium/issues/detail?id=3477

http://code.google.com/p/chromium/issues/detail?id=38458

Anyhow, the question is: Can I detect when this happens? Perhaps there's something in the window.chrome JavaScript object to indicate that the window is in this invisible state, so I can close it or remove the flash?

__

Based on Prusse's answer, here's what I ended up with...

function isPopupZombie(popWindow, delay) {
    /// <summary>Attempts to detect zombie window "blocked" (hidden) by Chrome (v.8-12, maybe more)</summary>
    /// <param name="popWindow">The popup window object</param>
    /// <param name="delay">Optional delay in ms; Not necessary when called via other delayed event/function</param>
    if (window.chrome && typeof(popWindow) == 'object') {
        if (delay && !isNaN(parseInt(delay)) && delay > 0) {
            window.setTimeout(function () {
                isPopupZombie(popWindow, 0);
            }, delay);
        } else if (typeof(popWindow.opener) == 'object') {
            var w = (popWindow.innerWidth && popWindow.innerWidth > 0) ? popWindow.innerWidth : popWindow.outerWidth;
            var h = (popWindow.innerHeight && popWindow.innerHeight > 0) ? popWindow.innerHeight : popWindow.outerHeight;
            //console.log('_isPopupZombie: ' + w + ' x ' + h);
            return (w === 0 && h === 0);
        }
    }
    return false;
}

function handlePopupZombie(zombieWindow, notify, callback) {
    /// <summary>Tries to close the zombie or alert about Chrome FAIL</summary>
    /// <param name="zombieWindow">Popup window object known to be a hidden but unblocked popup</param>
    /// <param name="notify">true to notify user of hidden window, false to close zombieWindow</param>
    /// <param name="callback">optional function to call, with single argument for zombieWindow</param>
    if (window.chrome && zombieWindow) {
        if (notify === true) {
            // callback or alert
            if (typeof(callback) == 'function') {
                callback(zombieWindow);
            } else if (zombieWindow.opener) {
                zombieWindow.opener.alert("Your popup blocker has hidden a popup window instead of blocking it.\n\nPlease use the icon in the address bar to open the hidden window.");
            }
        } else {
            // try to kill the zombie
            if (zombieWindow.opener && zombieWindow.opener.console) zombieWindow.opener.console.log('Closing zombie window');
            // after close, blocker icon is in address bar, but favicon/title are not in dialog
            zombieWindow.close();
            // optional callback
            if (typeof(callback) == 'function') callback(zombieWindow);
        }
    }
}

So I can do something like...

var popup = window.open(...);

if (typeof(popup) == 'undefined') {
    // handle it
} else if (popup && popup.closed) {
    // handle it
} else if (isPopupZombie(popup, 100)) {
    console.log('popup zombie!');
    handlePopupZombie(popup, true);
} else {
    console.log('no zombies, this is regular ordinary popup code time!');
}

Solution

  • You may try to check the innerWidth, innerHeight, outerWidth and/or outerHeight. When blocked chrome seens to let them at 0. Like:

    window.addEventListener('load', function(){
        var w = window.open('');
        setTimeout(function(){
            if ((w.outerWidth === 0) && (w.outerHeight === 0)){
                alert('blocked!');
            }
            w = null;
        }, 25);
    }, false);
    

    A delay of 0 will not work since for chrome all new windows are created with (0,0) size, only after some time it give some proper size to it.