切换标签时，Chrome 扩展浏览器操作行为怪异

Question

我有一个 chrome 扩展程序，当我在一个选项卡中使用它时，它可以完美运行。然后我转到另一个选项卡，扩展程序仍然有效，但这是我无法理解的奇怪事情。当我回到第一个选项卡并单击浏览器操作以显示扩展名或关闭（如果我将其保持打开状态）时，什么也没有发生。我需要第二次点击浏览器操作，然后扩展开始工作。

定义浏览器操作按钮的部分 background.js：

chrome.browserAction.onClicked.addListener(function (tab) {       
    if (page_loaded == true) {
        chrome.tabs.query({ active: true, currentWindow: true, highlighted: true }, function (tabs) {
            chrome.tabs.sendMessage(tabs[0].id, { greeting: "browser_action_clicked" }, function (response) {
                if (response.found == 'N') {
                    chrome.tabs.executeScript(null, { file: "src/injection.js" }, function () {
                        chrome.tabs.executeScript(null, { file: "src/extension.js" }, function () {
                            chrome.tabs.executeScript(tab.id, { code: "$('.cheap-watcher' ).animate({ 'right': '0px' }, 'slow');" }, function () {
                                sidebarActive = true;
                            });
                        });
                    });
                }
                else {
                    if (sidebarActive == true) {
                        chrome.tabs.executeScript(tab.id, { code: "$('.cheap-watcher' ).animate({ 'right': '-370px' }, 'slow');" }, function () {
                            sidebarActive = false;
                        });
                    }
                    else {
                        chrome.tabs.executeScript(tab.id, { code: "$('.cheap-watcher' ).animate({ 'right': '0px' }, 'slow');" }, function () {
                            sidebarActive = true;
                        });
                    }
                }
            });
        });
    }      
});

我写错了吗？还是chrome bug？

Answer 1

您的sidebarActive 存储为全局状态变量（与page_loaded 相同）。因此，以下是您的示例：

1. 您单击第一个选项卡上的按钮；显示侧边栏，sidebarActive 设置为 true。
2. 您对第二个选项卡执行某些操作，最终导致 sidebarActive 为假 - 不再反映旧选项卡的状态。
3. 您单击第一个选项卡上的按钮；由于sidebarActive 为假，您尝试显示侧边栏；但是，它已经显示出来了，所以给人一种“什么都不做”的印象。
4. 但是，现在sidebarActive 实际上与标签页同步，因此后续点击“工作”。

这根本行不通，因为状态实际上是每个标签的。您必须：

• 将状态保存在内容脚本中，而不是后台脚本中，或者
• 保存每个选项卡的状态，例如作为由选项卡 ID 索引的数组：sidebarActive[tab.id]
  在这种情况下，当标签更新发生时，您可能仍需要对数组进行一些清理。