如何更改about的背景：newtab

Question

我正在尝试使用新的WebExtensions API更改Firefox中about:newtab的背景。目前，我不明白为什么我在调试控制台中收到以下错误消息：

Unchecked lastError value: Error: No window matching {"matchesHost":[]}

我的附加组件的代码如下：

的manifest.json

{
    "background": {
        "scripts": ["background.js"]
    },
    "description": "Yourdomain description.",
    "homepage_url": "https://yourdomain.com",
    "icons": {
        "64": "icons/icon-64.png"
    },
    "manifest_version": 2,
    "name": "yourDomain",
    "permissions": [
        "tabs",
        "activeTab"
    ],
    "version": "2.0"
}

background.js ：

var tabId;

function changeBackground() {
    chrome.tabs.insertCSS( tabId, {
        code: "body { border: 20px dotted pink; }"
    });
}

function handleCreated(tab) {
    if (tab.url == "about:newtab") {
        console.log(tab);
        tabId = tab.id;
        changeBackground();
    }
}

chrome.tabs.onCreated.addListener(handleCreated);

Answer 1

目前无法通过WebExtensions附加组件更改about:newtab

这是您尝试注入的页面与match pattern不匹配时收到的错误，或者不能表示为匹配模式（即URL必须能够表示为match pattern，即使你没有提供匹配模式）。匹配模式的scheme必须是http，https，file，ftp或app之一。您看到的错误是当您尝试将代码或CSS注入runtime.lastError时错误是预期错误时，未检查tabs.insertCSS()中回调函数中的about:*值的结果页。

MDN文档非常具体，无法将tabs.insertCSS()与任何about:*页面一起使用（强调我的）：

  

你只能将CSS注入可以用匹配模式表达URL的页面：意思是，它的方案必须是＆＃34; http＆＃34;，＆＃34; https＆＃34;，＆＃34; file＆＃34;，＆＃34; ftp＆＃34;。 这意味着您无法将CSS注入任何浏览器的内置页面，例如about:debugging，about:addons或打开时打开的页面一个新的空标签[about:newtab]。

<强>未来：
Chrome拥有 manifest.json 键chrome_url_overrides，可以覆盖以下任何内容：bookmarks，history或newtab。它似乎是Firefox support for this manifest.json key is a "maybe"。

<强>备选方案：
可以使用other types of Firefox add-ons覆盖newtab页面。

您可以使用WebExtensions检测标签是否已将其网址更改为about:newtab，并将标签重定向到您选择的网页。

使用tabs.insertCSS()或tabs.executeScript()标签，通常

如果您在标签通常包含常规网址但可能为tabs.insertCSS()（或{{ Chrome上的1}}方案）（例如tabs.executeScript()按钮），您可以使用以下代码处理错误（已在Firefox WebExtensions和Chrome中测试并运行）：

about*:

然后，您可以将chrome:*代码更改为：

browser_action

显然，改变您的代码实际上可以让您更改function handleExecuteScriptAndInsertCSSErrors(tabId){ if(chrome.runtime.lastError){ let message = chrome.runtime.lastError.message; let isFirefox = window.InstallTrigger?true:false; let extraMessage = tabId ? 'in tab ' + tabId + '.' : 'on this page.'; if((!isFirefox && message.indexOf('Cannot access a chrome:') > -1) //Chrome ||(isFirefox && message.indexOf('No window matching') > -1) //Firefox ){ //The current tab is one into which we are not allowed to inject scripts. // You should consider alternatives for informing the user that your extension // does not work on a particular page/URL/tab. // For example: For browser_actions, you should listen to chrome.tabs events // and use use browserAction.disable()/enable() when the URL of the // active tab is, or is not, one for which your add-on can operate. // Alternately, you could use a page_action button. //In other words, using a console.log() here in a released add-on is not a good // idea, but works for examples/testing. console.log('This extension, ' + chrome.runtime.id + ', does not work ' + extraMessage); } else { // Report the error if(isFirefox){ //In Firefox, runtime.lastError is an Error Object including a stack trace. console.error(chrome.runtime.lastError); }else{ console.error(message); } } } } 页面上的背景。