Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How a bookmarklet can avoid the popup blocker

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?

like image 498
brandizzi Avatar asked Jan 05 '11 22:01

brandizzi


People also ask

How do bookmarklets work?

A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser. They are stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. Bookmarklets are usually small snippets of JavaScript executed when user clicks on them.

How to use JavaScript bookmarklet?

This can be inconvenient, so it's common to link bookmarklets when sharing. This is as simple as putting it in the href attribute of your link anchor. Now users can right-click and "Bookmark Link", or drag it to the bookmarks bar for easy access. Clicking the link on the web page will execute the script immediately.


1 Answers

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.

like image 58
daamsie Avatar answered Oct 05 '22 05:10

daamsie