I need to clear the Google Chrome address bar when I load my extension page in the tab.
THIS is my extension, and the address that needs to be cleared looks like this:
chrome-extension://<extension-id>/page.html
* Real solution of your question at the bottom.
Clearing browser address bar
This is a pretty old question that came in the mind of almost everyone who ever used JavaScript: can I replace the whole URL shown in the address bar via JavaScript? Well, I'm sorry, but the answer is a huge NOPE!
Why can't you clear/replace the URL in the address bar?
First of all, JavaScript doesn't actually provide any feature for doing it, and neither do the most famous browsers (Chrome, Mozilla, Opera...) with their APIs. Secondly, but not less important, it would be a huge security flaw. Imagine that some malicious individual wants to steal you some passwords (for example, the Facebook one): if changing the browser's address bar was possible, he would easily create a fake log-in page, copying the original one, and then replace the URL with "facebook.com/login" to make it look like you really are on Facebook (it would be pretty easy, huh?). You can obviously see that this could apply to any site and many other services.
JavaScript location and history
In JavaScript, there are two common objects used to manipulate the page address:
The first one is window.location, which provides you useful information about the current page's location, (such as .hostname, .path, .href, etc), and functions to reload the page or navigate to a different URL. By the way, when changing the address using this object, the page will always be reloaded.
location.href = "http://newsite.com"; // will reolad
location.path = "/home.html"; // will reload
location.replace("google.com"); // will also reload
The second, more tricky one, is window.history, which also allows you to manipulate the URL without reloading the page, within some limitations (obviously). With its methods .pushState() and .replaceState() makes you able to change the current path without reloading the page. By the way, you only can navigate through your own site's pages (you cannot change the hostname).
history.back();
// will make your browser go back to the previous page
history.pushState(null, null, "newPage.html");
// will replace the current path with /newPage.html and add it to the history
// http://example.com/page1.html -> becomes -> http://example.com/newPage.html
// now, if you call history.back() the path will be set back to /page1.html
history.replaceState(null, null, "newPage.html");
// will replace the current path with /newPage.html, PLUS it will also replace the current history path
// http://example.com/page1.html -> becomes -> http://example.com/newPage.html
// calling history.back() will not set the path back to /page1.html, but to the previous one (if exists)
This API is pretty useful. YouTube, Twitter and many other famous sites use this feature to change the URL without reloading the page. This practice allows you to change part of the page content, without having to reload those parts that stay unchanged (for example: on Youtube it will only load the new video, info, and related, not the full page).
Chrome extensions: URL overrides
Google chrome offers to its extensions the possibility to override three common default pages using the "chrome_url_overrides" field in your manifest.json:
The New Tab page (chrome://newtab) displayed when a new tab is opened.
The History page (chrome://history) containing the navigation history and used to manage it.
The Bookmarks page (chrome://bookmarks) containing all of your bookmarks and used to manage them.
These are the only three cases which allow you to "replace" the address bar URL in Chrome. Don't misunderstand what I'm saying: Chrome still doesn't let you change the URL if you are in one of these pages, but it automatically changes it. Using this technique, users can enjoy their beautiful extensions on new tabs, history and bookmarks pages, without seeing the ugly "chrome-extension://..." URL.
Using the "history" override will load your custom page instead of the default history one, but will maintain the default chrome://history URL.
Using the "bookmarks" override will load your custom page instead of the default bookmarks one, but will also maintain the default chrome://bookmarks URL.
Using the "newtab" override will load your custom page instead of the new tab one, but will maintain the default (blank) URL.
What if I want to navigate to another page maintaining the default address?
Assuming that you're in one of those three pages and you loaded your custom page instead of the original one, you can use an <iframe> set to full width and height to navigate to other pages via JavaScript, changing its src attribute:
HTML:
<iframe id="my-frame" style="width: 100%; height: 100%; margin: 0; padding: 0", frameborder="0"></iframe>
JavaScript:
var frame = document.getElementById('my-frame');
frame.src = "/path/to/page.html";
// navigate to a local page stored in your extension
// or:
frame.src = "http://www.somesite.com";
// navigate to an external site (not always possible)
NOTE: navigating to an external site may not be always allowed because of the security policy of that site. If the external page you're trying to load has the X-Frame-Options header set to "SAMEORIGIN" (like google.com for example), you will not be able to load it, and an error will occur:
"Refused to display 'http://www.somesite.com/...' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'."
To answer your question:
After all this long tour, there's a simple problem in your extension: you are using "chrome_url_overrides" to override the New Tab page with dashboard.html, which will execute the script redirect.js creating a new tab with url: "/searchTab.html". That's why you see the "chrome-extension://..." URL. So why are you doing all this stuff? You load a perfectly useless blank page which has the sole purpose of opening a new tab with the searchTab.html page... you don't really need this. Just delete that useless /dashboard.html page and change the overriding page in your manifest.json to /searchTab.html:
...
"chrome_url_overrides": {
"newtab": "/searchTab.html"
},
...
Related
How does Shopify do this? Go to their website, click on the Features link and you'll see that the URL in your browser's address bar says:
http://www.shopify.com/tour/sell-online
Then click on any of the sub links and you'll see that the URL in the address bar changes without using a hash and there is no page flip.
I don't think they are using ajax to change the content because it all appears to be included in hidden divs on the page, but regardless, you can apparently change the URL using client side tricks. Your help is appreciated?
You use the new HTML5 history API to push a new state.
Here's the MDN documentation and a good tutorial.
Beware that doing this is often painful (you have to manage correctly the state of your application) and it doesn't work with IE9. It's almost always combined with ajax : it's the solution to let dynamically loaded content be bookmarkable even while the whole page isn't reloaded or changed.
Look into pushState, but be aware it's not supported in all browsers.
I am displaying an online internal website.
Upon clicking on a button "A" it processes a task, and goes to another HTML page. However, this direct address is like "hidden" (hard to explain).
For example, for each page I am accessing by simple button click, it's always the same URL (like http://host.com for every page I display from them).
I am using Firefox, and I need to know how to get the exact HTML address (or direct URL) used for displaying these full new pages. I managed to do it few months ago, but not anymore.
It will help me to automate some tasks and bashing programs. I am openned to any linux browser in case you find a way to help me. Thanks a lot.
it sounds like domain masking is used. you could check the source and see if a frame is being used on the page. the source should indicate the src of the frame, revealing the location of the page.
<frame src="page.html">
If the button uses window.open to navigate to the url, you could override that method and intercept the url there:
var oldOpen = window.open;
window.open = function(){
console.log(arguments[0]);
oldOpen.apply(window, arguments);
};
On lifehacker.com when a user clicks a article on the right menu sidebar, the article & the page url changes, but the #rightcontainer always stays visible and , you never see it blink on the change of the page url, and when the article is ajaxed in (this is easy),
How would you change the page URL with a DIV staying visible on the page the whole time.
How is this possible? Javascript of some sort? (I think its freezing the browser then doing something, getting the data ready? )
I always thought you couldn't change the page url with javascript because of security issues.
I think you are looking for State Handling :)
It used to be done by adding # at the end of the URL, but now HTML5's State Handling features allow us to change the URL completely (ofc, within our domain)
The answer you need is located here:
https://github.com/browserstate/History.js/
Each url can include the same source as right container it won't refresh/blink as in browser cache.
you couldn't change the page url with javascript because of security
issues
A link can be followed via JavaScript if you require, its not regarded as bad practice (afaik). But there is no need to use javascript it could just be normal anchor/href.
I get the feeling that this is impossible, but is there a way to change what the url of my page will be if someone bookmarks it.
I ask because I'm running something in an Iframe, which isn't reflected in my URI. I was thinking maybe I could keep track of where the Iframe is in javascript, and then if they try to bookmark the page, I can put that JS into the URI they bookmark.
Is this possible?
You could always create clickable "bookmark this" links you could change dynamically depending on whatever logic your iframe setup uses. That won't deal with traditional bookmarks (user clicks the star in FF, adds to favorites in IE).
For anything better than this, please post a more detailed explanation of what you are doing with the iframe, and the calling page.
In short: no. Bookmark creation doesn't trigger a Javascript callback outside of rare cases like Firefox extensions.
If you want to insure that all your page content is available in a bookmarked version of the page, you'll need to add all the relevant state to the page URL. This could take the form of a session ID, encoded URL of the iframe content, or some other identifier, but it should be a unique, durable location, or else the bookmark will break eventually.
I want to know how Facebook is doing their iframe footer bar. I mean, i know they have an iframe on footer, but i want to know how they are reloading pages without reloading the iframe also, 'cause the iframe always stick there even though the page does reload again. Any ideas/knowledge?
EDITED:
Try clicking on a link which is different section and it changes the url and so far i know, if you try to change the URL, then the page will reload again. Also, try using Facebook on Chrome: you will see it reloads on every new page. It's not AJAX, because the URL wouldn't change if it was AJAX (do little research on URL changing, you will know).
Well, powtac pretty much gave you the answer: Facebook doesn't reload the whole page when you click a link, it requests the new content via XMLHttpRequest and refreshes only those portions of the page that change.
It's pretty slick about this: a naive implementation might not use real links at all, thus preventing you from opening, say, a different Facebook tab in a separate browser tab.
This technique - intercepting link navigation - also allows Facebook to use custom prompts when you try to navigate away without saving, and re-write paths as fragments, allowing it to track the current location in the URL without reloading the page.
FWIW, this question has already been asked and answered - see: How are the facebook chat windows implemented?