如何在不使用 default_popup 的情况下运行 popup.html？ （铬扩展）

Question

因此，我遇到了一种情况，每次单击浏览器扩展图标时，我都希望运行背景和内容脚本。理想的行为是单击扩展图标，运行脚本，然后弹出窗口将打开，显示脚本获取的数据（但这应该很快发生，脚本运行并获取数据的速度非常快）。由于如果 manifest.json 中定义了 default_popup，chrome.pageAction.onClicked 将不起作用，我认为这给我留下了两个选择：

1. 使用 default_popup 并确定扩展图标已被以其他方式单击。我在另一个堆栈溢出帖子中找到了这个解决方案，但解决方法是使用 default_popup: "popup.html"，然后 popup.html 中定义的 popup.js 会发送消息说该图标已被单击，然后当 background.js 收到此消息时，它会执行脚本。我实现了这个想法，它奏效了......有点。问题是，弹出窗口总是会在脚本完全执行之前出现，因此您无法在弹出窗口中实际显示脚本抓取的数据，直到下一步点击。我不确定是否有任何方法可以使用此方法获得我想要的行为，以此类推：
2. 我能想到的另一个解决方案是使用 onClicked，然后除了在 manifest.json 中使用 default_popup 之外，让弹出窗口以其他方式出现。我也不确定这是否可行，我查看了 stackoverflow 并没有找到类似的内容。

第二种方法可行吗？第一种方法可以以某种方式工作吗？

Answer 1

您的选项 #1 是正确的，我认为当用户第一次看到弹出窗口时，需要的只是一个加载屏幕，并添加一些代码，在收到后端消息后立即更新弹出窗口。可能需要查看一些代码才能更好地提供帮助。

选项#2 不会真正起作用，除非您在新选项卡中打开弹出窗口（或者只是将其设为一个全新的 HTML 页面）。我之所以这么说是因为 Chrome 开发团队在此有一条说明，他们不支持打开弹出窗口，除非它来自用户手势 -- https://stackoverflow.com/a/10484764/4875295。

如果你想走那条路，它可能看起来像：

• 从您的 manifest.json 中删除 browser_action.default_popup
• 在您的后台脚本中添加如下内容：

    chrome.browserAction.onClicked.addListener(() => {
        const data = dataMaker();
        chrome.tabs.create({
            url: `${chrome.runtime.getURL("app.html")}?data=${data}`
        });
    });

• 然后在您的 html 文件中有一些 JS 读取查询字符串并相应地更新页面。

不过，这与您要求的方法不同，我认为您的原始路线可能仍然是最好的选择（在加载时添加了一些 JS）。