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 = '=&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?

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?

• javascript
• firefox
• popup
• bookmarklet

4 Answers 4

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.

One way to prevent browsers from prompting a pop-up blocker is to have your javascript fully contained within the anchor tag.

Once you reference another file, it apparently triggers the browser's pop-up blocker.

For example, the following code does not trigger a pop-up blocker when a user drags the anchor to their browser's bookmark bar:

<a href="javascript:window.open('http://tagsby.me/index.small.php','newWindowName','width=960,height=400,scrollbars=yes,status=no,titlebar=no,toolbar=no');void(0);">No blocker</a>

However, if you reference the same code in another file noblocker.js that has been appended to the document object for the site the user is currently visiting:

<a id="tbm" class="testing" href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://domain.com/noblocker.js';})();">

it will trigger the pop-up blocker. There may be another way, but this is what I have working on my site http://tagsby.me right now.

Interesting question, my gut feeling is that it is not possible because the browser does not necessarily keep track of which code is trying to open a new window, so it can't 'allow' it since it came from site X.

An option that I feel is actually better is open the content in a dialog box in the same window. Take a look at how to implement a jquery bookmarklet and the rest should be straight-forward:

http://www.latentmotion.com/how-to-create-a-jquery-bookmarklet/

The popup blocker has a facility to add exceptions. perhaps try adding an exception for translate.google.com

(tools menu->options->content section)