How a bookmarklet can avoid the popup blocker

Question

I wrote a bookmarklet for quickly translating selected text using Google Translator in a popup window:

javascript:(function(){
    var text = encodeURI(document.getSelection());
    if (!text.length) {
        text = prompt('Texto')
    }
    var url = 'http://translate.google.com/translate_t?hl=&ie=UTF-8&text=' + text + ' &sl=es&tl=pt#';
    window.open(url,'trans','left=20,top=20,width=1000,height=500,toolbar=0,location=0,resizable=1');
})();

However, the Firefox popup blocker does not allow the new window to be opened. I can add exceptions for every site where I use the popup, but it can be pretty annoying...

I thought bookmarklets could open popup windows - actually, a lot of them do it, right? What am I doing wrong? Or is it not possible to do it?

Answer 1

There is another way of working around the popup blocker by first including a link overlaid on the page and then allowing the user to click that to generate the popup. The bookmarklet javascript can then be stored in a separate file. This is how Pinterest's bookmarklet manages to do it. First they select images from the page and overlay it directly on the page. Then when the user clicks to select one of the photos the popup appears. Because this action was initiated by the user, the popup works.

Here's some code you can use to test:

Place this in a file named bookmarklet.js

var popupProperties='width=600,height=400,toolbar=0,location=0,resizable=1';
var newA = document.createElement("a");
var url = 'http://www.stackoverflow.com';
newA.setAttribute("href","javascript:window.open(url,'Hi',popupProperties);");
newA.setAttribute("style","position:fixed;z-index:9999999;top:0;left:0;width:100px;height:100px;color:#000;background:#fff;display:block;");
var newT = document.createTextNode("Open this");
newA.appendChild(newT);
document.body.appendChild(newA);

And then your bookmarklet link can be like this:

javascript:var jsCode = document.createElement('script');jsCode.setAttribute('src', 'http://localhost/bookmarklet.js?r='+Math.random()*99999999);document.body.appendChild(jsCode);

Alternatively, you need to include the popup in the actual bookmarklet link. Which in turn will mean that the only way to make any changes is for the user to re-install the bookmarklet.

EDIT: In addition to the above method, I later found that there's even another way to work around this by using easyXDM. It can help you work around the Same Origin Policy http://easyxdm.net/wp/

Using this, you can use an iframe for your bookmarklet and you can even have a "close" link inside your iframe that will be able to remove the iframe from the parent page.