Programmatically (or optionally) override Chrome's New Tab page

Question

I\'ve written a Chrome extension that overrides the New Tab page:

manifest.json:

  \"chrome_url_overrides\": {
    \"newtab\": \"new         


        

Answer 1

Instead of using the chrome_url_override you could write a listener that listens for when tabs update using the chrome.tabs.onUpdated.addListener(), then check if the url is chrome://newtab/ and if it is and the check box is ticked, then using chrome.tabs.update() relocate them to another page.

Answer 2

Using the Star Wars method as described @Daniel Herr, I did this, which is working well. Although feels a little hack-y.

I have an option being set in the popup.html whether the Extension is "on" or not.

First off, set the default new tab page using the Chrome defined method:

manifest.json

"chrome_url_overrides": {
      "newtab": "newtab.html"
},

Then in your Extension's newtab.html call a new JavaScript file, newtab.js (or whatever).

I am also using jQuery, so my code uses that, but you can do this natively using DOMContentLoaded.

newtab.js

$(document).ready(function(){ 

    // It takes a moment for the Chrome query/update so sometimes there is a flash of content
    // Hiding the Body makes it look blank/white until either redirected or shown
	$('body').hide();

	var background = chrome.extension.getBackgroundPage();
	var _app = background._app;

	// App is OFF, show Default New Tab
	if(!_app._on){

		// Get the current Tab
		chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {

			var active = tabs[0].id;
          
            // Set the URL to the Local-NTP (New Tab Page)
			chrome.tabs.update(active, { url: "chrome-search://local-ntp/local-ntp.html" }, function() { });
		});

	// App is ON, show custom content
	} else {
		
		$('body').show();
	}

});

Basically, the methodology is to update the Tab so that it is redirected to chrome-search://local-ntp/local-ntp.html which is the hard URL to the default Chrome NTP.

Since this is a Chrome internal URL -- the URL field still appears blank.

Answer 3

Google made a Star Wars new tab replacement which allows you to view the default new tab page. The url it uses is chrome-search://local-ntp/local-ntp.html.

Example:

options.html:

<input type="checkbox"> Use default new tab page

options.js:

var checkbox = document.querySelector("input[type=checkbox]")
checkbox.addEventListener("click", function() {
 chrome.storage.sync.set({ defaultnewtab: checkbox.checked })
})

newtab.js:

chrome.storage.sync.get("defaultnewtab", function(storage) {
 if(storage.defaultnewtab) {
  chrome.tabs.update({ url: "chrome-search://local-ntp/local-ntp.html" })
 }
})