We Keep Coding

bookmarklet that works on 2 pages

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='myEmail#gmail.com';
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.

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)!

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.

Auto show print dialog on attachment open

i have a requirement. on click of a link, an attachment should open up in a new window (using window.open() ). The attachment is ideally a pdf file which resides on web server virtual directory(using IIS 7 for testing).
The input to the pdf attachment is generally a url, such as-
http://localhost/attachments/sample.pdf
The pdf open up fine but then the page should automatically show the print dialog to the user. The problem is -
1. the attachments are of different sizes.
2. Attachments loading time is variable depending upon its size.
I have tried the following-
1. 'onload' event for body/iframe.
2. jQuery load function to track the loading of the file.
3. $.get operation by enabling CORS on my requested content.
but none of them worked.
here's what i have tried-
var dom = window.open( '', '', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');
dom.document.writeln('<html><title>Attachment</title><head>');
dom.document.writeln('<script type=\'text/javascript\' language=\'javascript\' src=\'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js\'><\/script>');
dom.document.writeln('<script type=\'text/javascript\' language=\'javascript\'>' );
dom.document.writeln('$(document).ready(function() { /*load/get function goes here */});');
dom.document.writeln('<\/script>')
dom.document.writeln('</head><body><iframe width="100%" height="100%" id="container" type="application\/pdf" src="http://localhost/attachments/sample.pdf"></iframe></body></html>');
dom.document.close();
Is there any way possible to track the loading of the attachment because i am completely out of options now?

If you can modify the PDFs themselves, you can add a print function to the file itself which would work around the issue of tracking when the iframe is loaded.

How do I detect if a new window has been opened? The window opens via a submit with target="_blank"

I have a page which contains a form. The form submits via a Javascript call, and it opens a new window via the target set to "_blank".
<div id="ajax_response_html">
<form name="testform_name" id="testform_id" method="post" target="_blank" action="index.jsp" accept-charset="UTF-8" />
<input type="hidden" name="textbox_name" id="textbox_id" value="test" />
</form>
</div>
Upon an onclick event, the form is set inside the above div using an ajax call. At that point, I submit the form in JavaScript.
function setResponse() {
var response = http.responseText;
document.getElementById("ajax_response_html").innerHTML = response;
document.getElementById("testform_id").submit();
}
A new window opens and works just fine. However, I have a mobile app that uses a webview -- a browser session inside the app -- and it does not open a new window. I have no control, at the moment, over the app and no access to its source code. My only recourse is to modify the page to appease both app and non-app users. For the former, it'll open up in the same window. For the latter, it'll open up a new window. That's the plan.
My thought process is to detect if a new window has opened. If not, then I open it up in the same window.
if (!windowOpen) {
// Open page in the same window
}
How can I detect if a new window has opened after submitting the form?
Thank you.
Update
I spoke to the developer of the app, who said he has popups disabled and will not changes any time soon.
I modified the page such that instead of calling the html form file, via ajax, I open this same file using the JavaScript window.open function:
function openForm() {
var formWindow = window.open('FormFile.html', '_blank', 'height=' + screen.height + ', width=' + screen.width');
}
Within FormFile.html, I attached an onload event that submits the form, except the target is set to "_self", not "_blank".
Now, it opens in the same window within the app and opens a new window everywhere else. My question is, since popups are disabled within the app, why would window.open work, yet the original method I was using to submit the form was failing?

My recommendation would be to check beforehand if the user is using the app and then modify the behavior based on that, rather than checking if a new window opened. I have in the past accomplished this by checking the screen.width property (can be similarly accomplished in CSS), but you can do it more cleanly (courtesy of this post's answer):
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
}
This is cleaner, as you can determine at load time whether you'll need to open in the current window or a new window, rather than reacting later to something that happens for the user.

javascript generated links not working in ie8

there is a problem in ie8 related to links. html generated from javascript and display in the jquery ui dialog box but when I click on the link in it, it open link url in the same window (a tag has the targer=_blank set) and the url of link appended to the host url.
var clip_link = 'http://www.example.com/'+'c/'+id;
var thumb = 'http://www.example.com/235/45'+'/thumb.jpg';
$('#clip-share-popup .thumb').append(
'<img src="'+thumb+'" alt="clip thumb" />'
);
it is set after an ajax call
page url is
http://www.example.com/abcd.php#page/1/1
after click on the link the url become
http://www.example.comhttp//www.example.com/c/1234#
this doesn't happen in any other browser

You are probably not prefixing links with http://:
Google
Would take you to http://www.yourwebsite.com/whatever-page-you-are-on/www.google.com

Mozilla Addon SDK - Problem with Reddit example on 2nd page

I got this problem during development of my own addon, but I get the same with the reddit example, so I'll use that for simplicity.
Using the exact code from the example found here, this is what happens.
Reddit Example
This example add-on creates a panel containing the mobile version of Reddit. When the user clicks on the title of a story in the panel, the add-on opens the linked story in a new tab in the main browser window.
To accomplish this the add-on needs to run a content script in the context of the Reddit page which intercepts mouse clicks on each title link and fetches the link's target URL. The content script then needs to send the URL to the add-on script.
main.js:
var data = require("self").data;
var reddit_panel = require("panel").Panel({
width: 240,
height: 320,
contentURL: "http://www.reddit.com/.mobile?keep_extension=True",
contentScriptFile: [data.url("jquery-1.4.4.min.js"),
data.url("panel.js")]
});
reddit_panel.port.on("click", function(url) {
require("tabs").open(url);
});
require("widget").Widget({
id: "open-reddit-btn",
label: "Reddit",
contentURL: "http://www.reddit.com/static/favicon.ico",
panel: reddit_panel
});
panel.js:
$(window).click(function (event) {
var t = event.target;
// Don't intercept the click if it isn't on a link.
if (t.nodeName != "A")
return;
// Don't intercept the click if it was on one of the links in the header
// or next/previous footer, since those links should load in the panel itself.
if ($(t).parents('#header').length || $(t).parents('.nextprev').length)
return;
// Intercept the click, passing it to the addon, which will load it in a tab.
event.stopPropagation();
event.preventDefault();
self.port.emit('click', t.toString());
});
The icon is displayed in the bar, and clicking it launches the panel. Clicking a link within the panel opens it in a new tab - just as described and expected.
Clicking the "next page" link within the tab successfully fetches the next page, within the panel - as expected.
Clicking a link on the 2nd page does NOT open it in a tab, it opens it WITHIN the panel.
Here's my guess: When the page reloads within the panel, it does not reload the script specified in the contentScriptFile. Does anyone else experience this? And is there a workaround?
I'm using SDK 1.0 and FF 5.0
Question cross-posted on the Addon forum here

Recieved this answer at the Mozilla forum, and will post here as well for future reference.
Perhaps you are seeing Bug 667664 - Panel content scripts don't work after reloading or changing location. I think the workaround is to load the content in an iframe.
Which I believe might be the case, I'll try this during the day and report back.
EDIT: iframe seems to do the trick