How to clear the Google Chrome address bar?

Question

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

Answer 1

^{* 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"
},
...