javascript - 如何改变关于:newtab的背景

Question

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

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

我的插件代码如下:

list .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

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

MDN 文档非常具体地说明不能使用 tabs.insertCSS()与任何 about:* 页面(强调我的):

You can only inject CSS into pages whose URL can be expressed using a match pattern: meaning, its scheme must be one of "http", "https", "file", "ftp". This means that you can't inject CSS into any of the browser's built-in pages, such as about:debugging, about:addons, or the page that opens when you open a new empty tab [about:newtab].

future :
Chrome 有 manifest.json 键 chrome_url_overrides它允许覆盖以下任何一项:书签、history 或 newtab。看来 Firefox support for this manifest.json key is a "maybe" .

备选方案:
可以用 other types of Firefox add-ons 覆盖新标签页.

您可以使用 WebExtensions 检测选项卡已将其 URL 更改为 about:newtab 并将选项卡重定向到您选择的页面。

使用 tabs.insertCSS() 或 tabs.executeScript()对于选项卡，一般

如果您在选项卡通常包含常规 URL 但可能 是 about*:(或 Chrome 上的 chrome:* 方案)(例如 browser_action 按钮)，您可以处理错误使用以下代码(在 Firefox WebExtensions 和 Chrome 中测试和工作):

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

然后您可以将 changeBackground() 代码更改为:

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

显然，像那样更改代码实际上不会让您更改 about:newtab 页面的背景。