Chrome 扩展程序 - 注入脚本时出现“选项卡已关闭”错误

Question

我正在编写一个 chrome 扩展程序，它检测正在打开的文件的类型，并基于它在页面上注入一个脚本，该脚本执行许多其他操作。这是我注入脚本的 background.js 代码的一部分：

chrome.webRequest.onHeadersReceived.addListener(function(details){
        console.log("Here: " + details.url + " Tab ID: " + details.tabId);
        if(toInject(details))
        {   
            console.log("PDF Detected: " + details.url);
            if(some-condition) 
            {
                //some code
            }
            else
            {
                chrome.tabs.executeScript(details.tabId, { file: "contentscript.js", runAt: "document_start"}, function(result){
                    if(chrome.runtime.lastError)
                    {
                        console.log(chrome.runtime.lastError.message + " Tab ID: " + details.tabId);
                    }
                });
            }
            return {
            responseHeaders: [{
              name: 'X-Content-Type-Options', 
              value: 'nosniff'
            }, 
                {
              name: 'X-Frame-Options', 
                /*
                    Deny rendering of the obtained data.
                    Cant use {cancel:true} as we still need the frame to be accessible.
                */
              value: 'deny'
            }]
          };
        }
}, {
    urls: ['*://*/*'],
    types: ['main_frame', 'sub_frame']
}, ['blocking', 'responseHeaders']);

这是清单文件：

{
    "manifest_version": 2,

    "name": "ABCD",
    "description": "ABCD",
    "version": "1.2",

    "icons": {
        "16" :  "images/16.png",
        "32" :  "images/32.png",
        "48" :  "images/48.png",
        "128" :  "images/128.png"
    },

    "background": {
        "scripts": ["chrome.tabs.executeScriptInFrame.js", "background.js"],
        "persistent": true
    },

    "permissions": [
        "webRequest",
        "<all_urls>",
        "webRequestBlocking",
        "tabs",
        "nativeMessaging"
    ],
    "web_accessible_resources": [ "getFrameId", "aux.html", "chrome-extension:/*", "images/*.png", "images/*.gif", "style.css"]
}

问题在于，在注入脚本时，最后一个错误部分会运行，它显示选项卡已关闭并且脚本未注入。如果我在多功能框中按回车键几次，脚本就会被注入并且一切正常。以下是事件运行示例：

对不起，我的照片编辑太天真了：P

我们可以从这张图片中推断出更多的东西：

1. 标签 ID 为 86 的标签中加载的第一件事是与我的 google 帐户相关的内容。我已经注销并关闭了 chrome 的预渲染功能。
2. 按回车键多次关闭选项卡时出现错误，但与 background.js 保持chrome.runtime 连接的脚本断开连接。
3. 最后一切正常。

这几天我一直在纠结这个问题。 SO上没有其他问题可以解决这个问题。互联网上的其他任何地方也没有。

编辑：

还有一点需要注意：上图中显示的示例运行就是这样。有许多不同的行为。有时 3 次输入不会使其工作。有时只有一个意志。由于我发送的自定义标头有什么问题吗？

更新 #1

必须注意我在OnHeadersReceived 中返回的标题。这样做是为了阻止 chrome 呈现文档。但是在这样做时，文件的所有数据都被转储在屏幕上，我不希望它出现。所以我认为我需要document_start 以便在我的内容脚本执行其他操作（例如在页面上放置自定义 UI）之前隐藏转储的数据。

更新 #2

又注意到一件事。如果我打开一个新选项卡，然后在此处粘贴一个 url，然后按 enter，则以下是控制台上背景页面的输出。

所以我猜，窗口的位置会在稍后由 chrome 更新。我对吗？任何解决方法？

Answer 1

"The tab was closed" 错误信息有点误导，因为标签页显然没有关闭。在 chrome 源中，带有字符串的变量称为kRendererDestroyed。所以报错是因为相应的渲染器由于某种原因被销毁了。

如果在选项卡中打开的页面被重定向（因此一个渲染器被破坏，另一个渲染器为同一个选项卡创建，但这次不同的 url），我会收到错误，在这种情况下，扩展程序将获得如下状态的选项卡更新：

• loading url: 'example.com'，这里的选项卡已经返回到回调等，但如果尝试注入脚本会得到错误
• loading url: 'example.com/other_url'
• title: 'some title'
• complete

我只在收到status: 'complete' 后才通过注入脚本来解决问题（但可能在title 上注入也应该这样做）

没有尝试使用 pdf，但 chrome 可能会用重定向代替渲染器。因此，请更多地查看页面状态和重定向/渲染器替换。希望这可以帮助任何偶然发现这个问题的人。

Answer 2

一个简单的 setTimeout 调用等待页面加载对我有用。