Programmatically (or optionally) override Chrome&#

问题:

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

manifest.json:

  "chrome_url_overrides": {
    "newtab": "new-tab.html"
  },

Is there a way to make this override optional? That is, I'd like to enable the user to uncheck a checkbox in the options page and disable the New Tab override. This must be possible because when I open a new tab for the first time, there's a popup informing of an extension changing the New Tab settings and asking whether to keep changes or restore settings:

I couldn't find any API for controlling overrides. The New Tab Redirect project doesn't have an option to display the native New Tab.

回答1:

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" })
 }
})

回答2:

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.

回答3:

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.