升级或安装后重新注入 Chrome 扩展内容脚本 [英] Chrome extension content script re-injection after upgrade or install

问题描述

安装或升级我正在使用的 Chrome 扩展程序后，不会重新注入内容脚本(在清单中指定)，因此需要刷新页面才能使扩展程序正常工作.有没有办法强制再次注入脚本?

After the Chrome extension I'm working on is installed, or upgraded, the content scripts (specified in the manifest) are not re-injected so a page refresh is required to make the extension work. Is there a way to force the scripts to be injected again?

我相信我可以通过从清单中删除它们然后处理要在后台页面中注入的页面以编程方式再次注入它们，但这不是一个好的解决方案.

I believe I could inject them again programmatically by removing them from the manifest and then handling which pages to inject in the background page, but this is not a good solution.

我不想自动刷新用户的选项卡，因为这可能会丢失他们的一些数据.当您安装或升级扩展程序时，Safari 会自动刷新所有页面.

I don't want to automatically refresh the user's tabs because that could lose some of their data. Safari automatically refreshes all pages when you install or upgrade an extension.

推荐答案

有一种方法可以让内容脚本繁重的扩展在升级后继续运行，并在安装后立即运行.

There's a way to allow a content script heavy extension to continue functioning after an upgrade, and to make it work immediately upon installation.

安装方法是简单地遍历所有窗口中的所有选项卡，并以编程方式将一些脚本注入具有匹配 URL 的选项卡中.

The install method is to simply iterate through all tabs in all windows, and inject some scripts programmatically into tabs with matching URLs.

显然，您必须在背景页面或事件页面 manifest.json 中声明的脚本:

Obviously, you have to do it in a background page or event page script declared in manifest.json:

"background": {
    "scripts": ["background.js"]
},

background.js:

background.js:

// Add a `manifest` property to the `chrome` object.
chrome.manifest = chrome.runtime.getManifest();

var injectIntoTab = function (tab) {
    // You could iterate through the content scripts here
    var scripts = chrome.manifest.content_scripts[0].js;
    var i = 0, s = scripts.length;
    for( ; i < s; i++ ) {
        chrome.tabs.executeScript(tab.id, {
            file: scripts[i]
        });
    }
}

// Get all windows
chrome.windows.getAll({
    populate: true
}, function (windows) {
    var i = 0, w = windows.length, currentWindow;
    for( ; i < w; i++ ) {
        currentWindow = windows[i];
        var j = 0, t = currentWindow.tabs.length, currentTab;
        for( ; j < t; j++ ) {
            currentTab = currentWindow.tabs[j];
            // Skip chrome:// and https:// pages
            if( ! currentTab.url.match(/(chrome|https):///gi) ) {
                injectIntoTab(currentTab);
            }
        }
    }
});

升级

升级方法依赖于这样一个事实，即在禁用、卸载或升级扩展程序后，内容脚本仍会被注入.

Upgrade

The upgrade method relies on the fact that the content scripts are left injected after an extension is disabled, uninstalled or upgraded.

当建立端口连接时，会添加一个 onDisconnect 处理程序.这会在断开连接事件后等待一秒钟，然后尝试重新连接.如果失败，则触发另一个 onDisconnect，因此该过程再次发生，直到建立连接.它并不完美，但确实有效.

When the port connection is made, an onDisconnect handler is added. This waits a second after the disconnect event, then attempts to reconnect. If it fails, another onDisconnect is fired so the process happens again, until a connection is made. It's not perfect, but it works.

内容脚本:

var port;

// Attempt to reconnect
var reconnectToExtension = function () {
    // Reset port
    port = null;
    // Attempt to reconnect after 1 second
    setTimeout(connectToExtension, 1000 * 1);
};

// Attempt to connect
var connectToExtension = function () {

    // Make the connection
    port = chrome.runtime.connect({name: "my-port"});
    
    // When extension is upgraded or disabled and renabled, the content scripts
    // will still be injected, so we have to reconnect them.
    // We listen for an onDisconnect event, and then wait for a second before
    // trying to connect again. Becuase chrome.runtime.connect fires an onDisconnect
    // event if it does not connect, an unsuccessful connection should trigger
    // another attempt, 1 second later.
    port.onDisconnect.addListener(reconnectToExtension);
  
};

// Connect for the first time
connectToExtension();

这篇关于升级或安装后重新注入 Chrome 扩展内容脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！