Chrome 扩展页面重新加载

Question

我正在编写一个 chrome 扩展程序，它既有用于操作当前选项卡数据的 content.js，也有一个在执行时生成的弹出窗口。但是，我的问题是，当我对扩展进行更改时，我必须重新加载扩展并刷新页面，否则它会给我一个“错误建立连接，端口不存在”错误。这是我的 manifest.json 文件

{
    "manifest_version": 2,
    "name":    "extension",
    "version": "0.0",
    "offline_enabled": true,

    "content_scripts": [
        {
            "matches": [
                "*://mail.google.com/*"
            ],
            "css": ["css/jquery-ui.css"],
            "js":     ["js/jquery.js" , "js/jquery-ui.js" , "js/bootstrap.js" , "js/commons.js" , "js/content.js"],
            "run_at": "document_end"
        }
    ],

    "browser_action": {
        "default_title": "chrome",
        "default_popup": "html/popup.html"
    },
    "permissions": [
    "tabs",
    "https://*.*.*/"
    ]
}

Answer 1

这是正常行为。当您对扩展进行更改时，您必须重新加载它。但是，当您重新加载扩展程序时，所有现有的内容脚本注入都失去了与后台页面的连接。不仅如此，如果您尝试在 port.onDisconnected.addListener 上重新连接，出于安全原因，您将收到异常，因为新的后台进程将无法识别其先前的内容脚本注入。

当我遇到这个问题时，我想出了这个解决方案：

reconnect();

function reconnect() {

    var port = chrome.runtime.connect({
        name: 'injection'
    });

    port.onMessage.addListener(handleMessage);
    port.onDisconnect.addListener(function() {
        console.log('bg script disconnected');
        setTimeout(function() {
            try {
                reconnect();
            } catch (e) {
                location.href = location.href;
            }
        }, 1000);
    });
}

function handleMessage() {
}

我知道，这不仅仅是自动页面重新加载，但没有其他方法可以从以前的内容脚本注入重新连接 - 必须再次注入更新的扩展代码才能连接到后台脚本。