We Keep Coding

pushState() not working on beforeunload, popState() not working on load, History API

I have a website. The main page consists of various content sections that fade in and out when clicking certain buttons. I very simply would like to push the state of two important objects that contain the relevant state info when a user clicks off of the page. This way, when they return, the correct content is showing and the correct button is highlighted. I do this before the page unloads like so:
window.addEventListener("beforeunload", function () {
history.pushState(nodeContainer, '', currNode.contentId);
history.pushState(currNode, '', currNode.contentId);
return;
});
When the page reloads I call the popstate method like so:
window.addEventListener('popstate', function(e) {
console.log('Event ', e);
});
This however, does not work. The popstate method is only called when clicking back twice which returns a null state object. I'm aware of similar questions on SO and have done my research. Has not helped.

beforeUnload will only process synchronous request. You'll need to find a way to block the event loop. I've used this in the past to send a synchronous request to the server, to check if a user was downloading a file, and warn them that leaving would stop the download.
there also is the off chance that a browser could ignore the code if it believes that it can cause a popup.
more info here
https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

You're probably looking for History.replaceState(). That would allow you to add extra data to the current history entry. Each call to History.pushState() will create a new page navigation inside your history stack. That's why you need to do multiple navigations before arriving at the right page.
Also, the popstate event will only be called when you navigate while your page is already loaded. So you'll want to read from History.state during your page load. That way you can check if there's state data that you can use when you initialise your page.

How to stop caching of collection in backbone?

I have a very peculiar scenario.
After saving my web page i.e after my POST request is successful, my buttons do not work for the first click.
After having the first click on any part of my web page, my web page starts working fine. Actually, the API calls doesn't happen on the first time. It happens only after the first click. This gives me an error popup, as written in code.
I am using backbone.js, javascript, jQuery, underscore.js, marionette.js, backbone stickit, etc.
So my question is
1. how to reload my web page so that it redirect to the same page with same tab openings and everything.
location.reload(true) or location.reload()
takes me to my home page instead of the page I was in.
Where to call this reload method, after onRender of that page or immediately after save button has completed its work.
** it seems that the web page looses focus and after having one click at any where on the web page, it brings the focus back.
EDIT
I also have an alert message on my web page stating that the changes are successful. Can I possibly create a disabled screen when that alert message comes, and make that screen enable only after first click at anywhere on the screen. If yes, can anyone help me to achieve the same.
EDIT II
I went through the whole scenario, debugged till ajax called the API, and I found out that in first click after save, my collection is being cached, and hence ajax never calls the api, whereas in the next click the the cache gets deleted magically, since I don't know yet from where, and the calls goes. So, is there any way I could stop this caching from being done.?
$.ajax= function(options) {
if ('GET' == options.type) {
if (false !== options.cache) {
var url= options.url+'?'+JSON.stringify(options.data); // not the real url, but an incredible simulation
return readCache[url] || (readCache[url]= oldAjax.apply($, arguments)).fail(function() {
delete readCache[url];
});
}
} else {
readCache= {};
}
return oldAjax.apply($, arguments);
};
readcache[url] is true for the fist time, and hence oldAjax.apply never gets called, whereas the second time it is false.
the code is from backbone-extension.js

List of all webrequests in chrome extension

Im playing around with making my first chrome extension. Im making a small extension that monitors the webrequests a page makes. This means that im listening to the: chrome.webRequest.onBeforeRequest.addListener event
I am a little confused on how to execute this code on every page i load. It works on any page if i open the extension web page and run the code in this context. However i would like it to run regardless of having the page open. How do i go around doing this?
I looked at content_scripts, but havent figured out if they are the proper path to take - and ven if they are how do i send a message from my content script to my web page notifying it to run the code. As far as i understand this the content script is first run after the page has been loaded and therefore it does not matter if i call my page and add the listeners, because the show is already over - is this correct?
The wa i understand this is that i cannot add listeners in the content script - hence the need to make this messaging thing - is this correct?
Thank you.

You would put the onBeforeRequest listener in a background page, specifically the persistent variant of it. When the event is invoked, whatever you have in the handler will be run.

How can I use Javascript to control other window from Firefox Scratchpad, even when it reloads?

I want to move my email from a somewhat unreliable provider (let's say X) to Gmail.
Unfortunately email provider doesn't allow folder export or direct IMAP link.
The only thing I can do is connect Gmail to X via POP3, so that anything in X's inbox gets copied to Gmail.
This I have set up, and it works, but of course POP3 only scans inbox.
I have thousands of emails in other folders than inbox, so I need to move them to inbox first. However, I can only move messages via X's web GUI, which only allows moving one page of messages per turn.
So I have to open Saved messages folder, click on "Select all", select "inbox" and click on "Move", then the page will reload and I need to do this again... hundreds of times.
I made a Javascript function (assume MoveToInbox()) which simulates these actions, and I opened page in Firefox and started Firefox Scratchpad. So, I can keep pressing Ctrl+R in Scratchpad, then wait for page reload, then press it again, which saves about 50% of time.
However, I am wondering, if I can somehow make Scratchpad work with that tab so that it waits for page reload, then executes script then waits again, eliminating all the manual repetitive tasks.
I thought I could somehow do it with window.addEventListener, but this object seems to get cleared on page reload, so is there something I could use instead?

My own quick answer is only by using a Firefox addon such as GreaseMonkey.
The solution will, of course, vary in different cases, but my own was this GreaseMonkey Javascript:
// the function to select all messages and programmatically click on
// move button:
function moveToInbox()
{
selectAllCheckbox=document.getElementById("messagesForm")[0];
mailboxSelector=document.getElementsByName('targetMailbox')[0];
selectAllCheckbox.click(); // click on "select all" checkbox
mailboxSelector.selectedIndex=1; //specify that we are moving to inbox
inx.mail.mailbox.mailboxTransfer(); // execute provider's function for moving mail.
}
// This gets executed on any page that matches URL specified in Greasemonkey script properties
// I have put this to execute, if the URL is for the folder I want to move messages from.
messageList=document.getElementById("messagesForm")[0];
// in my case, if there are no more messages to move, the form is not created at all, so
// I can check for its existance, to determine if I need to execute moving.
if (messageList == null)
{
return;
}
else
{
moveToInbox();
}

Using an iFrame
The first problem is that variables and functions get lost after reloading:
-Use an <iframe> with src = "X"
Now the Cross domain policy is causing troubles:
-Make the <iframe> on the same website as the src
Then, you can easily access and manipulate the website with iframeId.contentDocument
An example:
Navigate to google.com, use Inspect Element to add an iframe:
<iframe src="https://www.google.ae" id="someID"> </iframe>
Then, you can use JavaScript to do anything with the iframe:
someID.contentDocument.location.reload();
setTimeout('someID.contentDocument.getElementById('lst-ib').value="iframes rock"',1000); //You should use something better than setTimeout to wait for the website to load.

Automatically perform javascript function on pageload of external website

So I want to have a link to a site x (which I am not the developer of) that automatically performs some javascript function after it is clicked. EG.
javascript:window.location="http://www.google.com"; alert("Hello");
This performs the alert function before loading the page which is not desired.
Does anyone else know how this can be achieved?
Thanks.

If you load it in an iframe, I guess you could somehow wait for a certain element to be present and then execute your code.

You cannot do that.
Doing this, poses a security threat (XSS), and therefore disallowed by almost all the browsers!!
Worst scenarios to think of, if you had this control:
The Script to capture the username/pass of the user and mail it to you by further calling an Url.
Could play a role in unwarranted tracking/spamming.
EDIT:
This can be done only if user interaction in involved.
For eg:
You can ask user to drag a link to his bookmark toolbar, and the link should contain:
Test Click
And then to whatever page the user goes, whenever he clicks the bookmark button (link), an alert happens (or whatever script you may put.)

If the link is changing the "current" windows location, you cant execute your scripts after the external page has started loading.

You can't.
A walk around way is to put the site in to an iframe in your page. Then alert your message in its onload event. And of course your url on address bar will not change.