JS - Modify bookmarklet for Google Translate

Question

This page offers bookmarklets to be used with Google Translate http://translate.google.com/translate_buttons however those bookmarklets opens the Google Translate in same tab/window and replaces the original page. How to modify the bookrmarklet code (see bellow) to open in new window/tab? Also can somebody please briefly explains what the code is really doing. Thanks a lot.

javascript: var t = ((window.getSelection && window.getSelection()) || (document.getSelection && document.getSelection()) || (document.selection && document.selection.createRange && document.selection.createRange().text));
var e = (document.charset || document.characterSet);
if (t != '') {
    location.href = 'http://translate.google.com/?text=' + t + '&hl=en&langpair=auto|en&tbb=1&ie=' + e;
} else {
    location.href = 'http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&hl=en&langpair=auto|en&tbb=1&ie=' + e;
};

EDIT: According to @DG. I have modifed the code to the following working solution:

javascript: var t = ((window.getSelection && window.getSelection()) || (document.getSelection && document.getSelection()) || (document.selection && document.selection.createRange && document.selection.createRange().text));
var e = (document.charset || document.characterSet);
if (t != '') {
    window.open('http://translate.google.com/?text=' + t + '&hl=en&langpair=auto|sk&tbb=1&ie=' + e)
} else {
    window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&hl=en&langpair=auto|sk&tbb=1&ie=' + e)
};

but this opens Google Translate in new tab, there are few more arguments which needs to be passed window.open() if you want to open Google Translate in new window:

javascript: var t = ((window.getSelection && window.getSelection()) || (document.getSelection && document.getSelection()) || (document.selection && document.selection.createRange && document.selection.createRange().text));
var e = (document.charset || document.characterSet);
if (t != '') {
    var url1 = 'http://translate.google.com/?text=' + t + '&hl=en&langpair=auto|sk&tbb=1&ie=' + e;
    window.open(url1, '_blank', "GoogleTranslate", "height=200,width=200")
} else {
    var url2 = 'http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&hl=en&langpair=auto|sk&tbb=1&ie=' + e;
    window.open(url2, '_blank', "GoogleTranslate", "height=200,width=200")
};

Just one question, I have realized that in Google Chrome it is working as expected. But in FF 18.0.2 it also replaces original page with blank where is shown: "[object Window]" and URL bar contains the whole script, how to avoid this, and keep original page displayed, without needing to go back one page?

EDIT2: OK I have got it, asi it was suggested here: what is the [object Window]? I have added void(0); at the end of the scipt.

javascript: var t = ((window.getSelection && window.getSelection()) || (document.getSelection && document.getSelection()) || (document.selection && document.selection.createRange && document.selection.createRange().text));
var e = (document.charset || document.characterSet);
if (t != '') {
    var url1 = 'http://translate.google.com/?text=' + t + '&hl=en&langpair=auto|sk&tbb=1&ie=' + e;
    window.open(url1, '_blank', "GoogleTranslate", "height=200,width=200")
} else {
    var url2 = 'http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&hl=en&langpair=auto|sk&tbb=1&ie=' + e;
    window.open(url2, '_blank', "GoogleTranslate", "height=200,width=200")
};
void(0);

Cheers

score 1 · Accepted Answer · answered May 08 '13 at 18:23

Change location.href = '...' to window.open('...') in two places.

The bookmarklet code is just checking if user selected any text on the page and then using that text in a new URL. My suggestion will modify code from changing the location to opening a new window.

score 0 · Answer 2 · answered Sep 05 '16 at 05:11

Why not just add the translate bar to the page? If the page doesn't already contain a translate bar (an iframe within div.skiptranslate), then it waits until it sees the google.translate.TranslateElement function that is loaded by injecting the translate javascript, and then calls it to draw the toolbar.

(function () {
  function loadJS(url, callback) {
    var s = document.createElement('script');
    s.src = url;
    if (s.addEventListener) {
      s.addEventListener('load', callback, false);
    } 
    else {
      s.onreadystatechange = function () {
        if (this.readyState == 'complete') {
          callback();
          s = null;
        }
      }
    }
    s.type = 'text/javascript';
    document.getElementsByTagName('head') [0].appendChild(s);
  };
  loadJS('https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit', function () {
    window.setTimeout(doTrans, 100);
  });
})();

function doTrans()
{
  if (!document.querySelector("div.skiptranslate")) {
    if (typeof google != "undefined" && typeof google.translate != "undefined" && typeof google.translate.TranslateElement != "undefined")
      new google.translate.TranslateElement({layout:google.translate.TranslateElement.InlineLayout.SIMPLE,autoDisplay:true},null);
    window.setTimeout(doTrans, 100);
  }  
}

JS - Modify bookmarklet for Google Translate

2 Answers2

Linked