bookmarklet that works on 2 pages

Question

I'm using a bookmarklet to inject javascript into a webpage. I am trying to login into my gmail account(that part works) and in my gmail account automatically click Sent folder as the page loads. This is the starting page:

This is the code I am using in bookmarklet:

javascript:
document.getElementById('Email').value='[e-mail]';
document.getElementById('next').click();
setTimeout(function(){
document.getElementById('Passwd').value='myPassword';
document.getElementById('signIn').click();},1000);

setTimeout(function(){
document.getElementsByClassName("J-Ke n0 aBU")[0].click();
},6000);

J-Ke n0 aBU is the class of Sent folder. This code logins into my account, but it doesn't click Sent folder.

I noticed similar behavior on other websites; whenever a new page loads or refreshes, the bookmarklet stops working.
Why is that and what is the correct way of using the same bookmarklet on different page than it was originally clicked.

Answer 1

As JavaScript is executed in the context of the current page only, it's not possible to execute JavaScript which spans over more than one page. So whenever a second page is loaded, execution of the JavaScript of the first page get's halted.

If it would be possible to execute JavaScript on two pages, an attacker could send you to another page, read your personal information there and send it to another server in his control with AJAX (e.g. your mails).

A solution for your issue would be to use Selenium IDE for Firefox (direct link to the extension). Originally designed for automated testing, it can also be used to automate your browser.

Answer 2

Disclaimer: I don't have gmail, so I didn't test this for gmail specifically.
This answer exists to address your comment:

What about iframes. Is theoretically possible to use gmail login in an iframe and therefore when the iframe changes to another page this doesnt have effect on the bookmarklet?

Yes, it is technically possible to have a persistent bookmarklet using iframes (or, deity forbid, a frameset).
As long as your parent window (and it's containing iframe) remain on the same domain, it should work according to cross-domain spec.
It is however possible (depending on used method) to (un-)intentionally 'counter-act' this (which, depending on used counter-action, can still be circumvented, etc..).

Navigate to website, then execute bookmarklet which:

• Creates iframe.
• Sets onload-handler to iframe.
• Replaces current web-page content with iframe (to window's full width and height).
• Set iframe's source to current url (reloading the currently open page in your injected iframe).

Then the iframe's onload-handler's job is to detect (using url/title/page-content) what page is loaded and which (if any) actions should be taken.

Example (minify (strip comments and unneeded whitespace) using Dean Edward's Packer v3):

javascript:(function(P){
  var D=document
  ,   B=D.createElement('body')
  ,   F=D.createElement('iframe')
  ; //end vars
  F.onload=function(){
    var w=this.contentWindow     //frame window
    ,   d=w.document             //frame window document
    ; //end vars
    //BONUS: update address-bar and title. 
    //Use location.href instead of document.URL to include hash in FF, see https://stackoverflow.com/questions/1034621/get-current-url-in-web-browser
    history.replaceState({}, D.title=d.title, w.location.href ); 
    P(w, d);        //execute handler
  };
  D.body.parentNode.replaceChild(B, D.body);   //replace body with empty body
  B.parentNode.style.cssText= B.style.cssText= (
   F.style.cssText= 'width:100%;height:100%;margin:0;padding:0;border:0;'
  ) + 'overflow:hidden;' ;           //set styles for html, body and iframe
  //B.appendChild(F).src=D.URL; //doesn't work in FF if parent url === iframe url
  //B.appendChild(F).setAttribute('src', D.URL); //doesn't work in FF if parent url === iframe url
  B.appendChild(F).contentWindow.location.replace(D.URL); //works in FF
}(function(W, D){   //payload function. W=frame window, D=frame window document
  alert('loaded');
  // perform tests on D.title, W.location.href, page content, etc.
  //   and perform tasks accordingly
}));

Note: one of the obvious methods to minify further is to utilize bracket-access with string-variables for things like createElement, contentWindow, etc.

Here is an example function-body for the payload-function (from above bookmarklet) to be used on http://www.w3schools.com (sorry, I couldn't quickly think of another target):

var tmp;
if(D.title==='W3Schools Online Web Tutorials'){
  //scroll colorpicker into view and click it after 1 sec
  tmp=D.getElementById('main').getElementsByTagName('img')[0].parentNode;
  tmp.focus();
  tmp.scrollIntoView();
  W.setTimeout(function(){tmp.click()},1000);
  return;
}
if(D.title==='HTML Color Picker'){
  //type color in input and click update color button 'ok'
  tmp=D.getElementById('entercolorDIV');
  tmp.scrollIntoView();
  tmp.querySelector('input').value='yellow';
  tmp.querySelector('button').click();

  //click 5 colors with 3 sec interval
  tmp=D.getElementsByTagName('area');
  tmp[0].parentNode.parentNode.scrollIntoView();
  W.setTimeout(function(){tmp[120].click()},3000);
  W.setTimeout(function(){tmp[48].click()},6000);
  W.setTimeout(function(){tmp[92].click()},9000);
  W.setTimeout(function(){tmp[31].click()},12000);
  W.setTimeout(function(){tmp[126].click()},15000);
  return;
}

above example (inside bookmarklet) minified:

javascript:(function(P){var D=document,B=D.createElement('body'),F=D.createElement('iframe');F.onload=function(){var w=this.contentWindow,d=w.document;history.replaceState({},D.title=d.title,w.location.href);P(w,d)};D.body.parentNode.replaceChild(B,D.body);B.parentNode.style.cssText=B.style.cssText=(F.style.cssText='width:100%;height:100%;margin:0;padding:0;border:0;')+'overflow:hidden;';B.appendChild(F).contentWindow.location.replace(D.URL)}(function(W,D){var tmp;if(D.title==='W3Schools Online Web Tutorials'){tmp=D.getElementById('main').getElementsByTagName('img')[0].parentNode;tmp.focus();tmp.scrollIntoView();W.setTimeout(function(){tmp.click()},1000);return}if(D.title==='HTML Color Picker'){tmp=D.getElementById('entercolorDIV');tmp.scrollIntoView();tmp.querySelector('input').value='yellow';tmp.querySelector('button').click();tmp=D.getElementsByTagName('area');tmp[0].parentNode.parentNode.scrollIntoView();W.setTimeout(function(){tmp[120].click()},3000);W.setTimeout(function(){tmp[48].click()},6000);W.setTimeout(function(){tmp[92].click()},9000);W.setTimeout(function(){tmp[31].click()},12000);W.setTimeout(function(){tmp[126].click()},15000);return}}));

Hope this helps (you get started)!