How can I make an iframe not save to history in Chrome?

Question

I am attempting to develop a Chrome extension that injects an Angular application into the user's browser window in order to make an interactive sidebar. I have mostly been able to achieve 100% of what I want by adding an iframe to the page through a content script and setting the frame's source to an html file inside my extension directory.

Unfortunately, because the Angular application has multiple routes (allowing the user to login and see many different types of information), I have found that it is interfering with the user using their back/forward buttons as expected; as the iframe's source changes due to the hashes changing, it saves a new entry to the history.

I cannot seem to find or create a workaround for this; is there some clever way to make either Angular not generate historical entries, or to achieve the creation of a sidebar that doesn't save to history without using an iframe, or to disable an iframe from saving to the history?

Answer 1

Ultimately, I had been attempting to write a chrome extension embeds an angular application inside of an iframe, but found that all the hash changes caused interference with Chrome's history because the iframe source was constantly changing due to routing changes.

While I cannot say for certain if using ui-router instead of angular router would allow me to circumvent my issues (it seems as though ui-router uses states, and does not necessarily require a url change, though I may be wrong), I've determined that the root cause is the changing of the iframe's source and that there was only one way to cause the iframe to not be recorded in the history at all: to leverage the window.location.replace function instead of changing location directly.

The following steps were taken in order to ensure that my iframe does not interfere with Chrome's history at all:

1. Set the src of the iframe to '#' before appending to the currently existing document
2. Append the iframe to the document
3. Access the iframe's content window directly in order to use the frame's location.replace function in order to update the location without saving the history:
   1. $("#myIframe").get(0).contentWindow.location.replace(myUrl);
4. All code inside the iframe to change url is accomplished through use of location.replace(url)
5. The redirects inside of angular are handled as such: $location.path(newPath).replace() so that angular uses the same tactic.

A better solution would be to figure out how to use $location.replace() all the time by default, which I am attempting to implement now. So essentially, this all boils down to: location.replace will allow you to have an iframe's source change and not save to history.