javascript - Chrome 扩展 : starting options page with parameters

Question

我的扩展有四个相关部分。一个选项卡中的注入(inject)脚本收集一些数据，该选项卡上的页面操作弹出窗口，一个在两者之间调解数据的后台脚本，以及一个选项页面。弹出窗口有一个按钮，可以打开选项页面。

我想从弹出窗口中打开选项页面并为其提供一些数据，以便它可以显示与该选项卡相关的选项。下面是我为解决此问题而进行的精简和编辑尝试:

popup.js

var popup = (function() {

    var tabId;

    function openOptions() {
        port.postMessage({
            action: 'openOptions',
            id: tabId
        });
    }

    function connectToBackground(tabs) {
        if (tabs.length > 0) {
            tabId = tabs[0].id;
            port = chrome.runtime.connect();
            port.postMessage({
                action: 'connect',
                id: tabId
            });
        }
    }

    return {
        initialize: function() {
            document.getElementById('settings').addEventListener('click', openOptions);
            chrome.tabs.query({active: true, currentWindow: true}, connectToBackground);
        }
    };
})();
popup.initialize();

background.js

var background = (function() {
    var tabs = {};
    return {
        onConnectInjected: function(port) {
            chrome.pageAction.show(port.sender.tab.id);

            port.onMessage.addListener(function(message, port) {
                if (message.action === 'connect') {
                    if (!tabs[port.sender.tab.id]) {
                        tabs[port.sender.tab.id] = {};
                    }
                    tabs[port.sender.tab.id].injected = port;
                    tabs[port.sender.tab.id].tabData = message.data;
                }
            });
            port.onDisconnect.addListener(function() {
                tabs[port.sender.tab.id].injected = null;
            });
        },
        onConnectPopup: function(port) {
            port.onMessage.addListener(function(message) {
                if (message.action === 'openOptions') {
                    chrome.runtime.openOptionsPage(function() {
                        for (let view of chrome.extension.getViews()) {
                            if (view.options) {
                                view.options.showOptionsRelevantToTab(tabs[message.id].tabData);
                            }
                        }
                    });
                } else if (message.action === 'connect') {
                    if (!tabs[message.id]) {
                        tabs[message.id] = {};
                    }
                    tabs[message.id].popup = port;
                    port.onDisconnect.addListener(function(port) {
                        tabs[message.id].popup = null;
                    });
                }
            });
        }
    };
})();
chrome.runtime.onConnectExternal.addListener(background.onConnectInjected);
chrome.runtime.onConnect.addListener(background.onConnectPopup);

options.js

var options = (function() {

    return {
        showDefaultOptions: function() {

        },
        showOptionsRelevantToTab: function(data) {

        }
    };
})();
options.showDefaultOptions();

魔术应该发生在 background.js 中 chrome.runtime.openOptionsPage 的回调中。据我所知，当选项页面成功打开时调用此回调，但 chrome.extension.getViews() 仅返回背景 View (奇怪的是弹出 View )。

我试过直接从弹出窗口打开选项页面，但由于选项是在另一个选项卡中打开的，弹出窗口失去焦点并关闭，因此回调永远不会触发。我还探索了从选项页面向后台脚本发送消息，但是 background.js 无法确定哪个选项卡生成了选项页面。

我还测试了在 options.js 中调用 getViews 并且它实际上返回了弹出窗口(这反过来可以提供数据)但是我不能确定这是一致的，因为弹出窗口同时退出.

那么，background.js 如何在创建时获取选项页面的窗口对象，以便它可以为其提供相关数据，或者让 settings.js 知道哪个选项卡创建了它，以便它可以获取相关数据来自 background.js。如果我不必为此添加“标签”权限，我会更愿意。

感谢阅读:)

Answer 1

解决这个问题的一种方法是让选项页面调用后台页面以获取相关页面数据。它看起来像这样:

// options.js init code:
chrome.runtime.sendMessage({action: "getOptionsData"}, (response) => {
  // Now that you have the response, you can set your settings and then make the page visible
});

在您的 background.js 中，您需要处理这个。最简单的方法是保存您将在 openOptions 处理程序中设置的全局变量 optionsState，然后在 getOptionsData

这应该不是问题，因为在您的示例中不应打开多个选项卡。

例如

// at the top of background.js
let optionsData = null;

// inside openOptions, before calling openOptionsPage,
optionsData = tabs[message.id].tabData;

// inside getOptionsData (make sure to expose sendResponse as a function param
return sendResponse(optionsData);