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

【问题标题】：How to run popup.html without using default_popup? (CHROME EXTENSION)如何在不使用 default_popup 的情况下运行 popup.html？（铬扩展）
【发布时间】：2021-08-17 01:42:15
【问题描述】：

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

使用 default_popup 并确定扩展图标已被以其他方式单击。我在另一个堆栈溢出帖子中找到了这个解决方案，但解决方法是使用default_popup：“popup.html”，然后popup.html中定义的popup.js会发送一条消息说图标已被点击，然后当 background.js 收到此消息时，它会执行脚本。我实现了这个想法，它奏效了……有点。麻烦的是，弹窗总是会在脚本完全执行之前出现，所以直到 next 点击之前，你无法在弹窗中真正显示脚本抓取的数据。我不确定是否有任何方法可以使用此方法获得我想要的行为，依此类推：
除了在 manifest.json 中使用 default_popup 之外，我能想到的另一个解决方案是使用 onClicked，然后以其他方式弹出弹出窗口。我也不确定这是否可能，我查看了 stackoverflow 并没有发现类似的东西。

第二种方法可行吗？第一种方法可以用吗？

【问题讨论】：

标签： javascript google-chrome-extension browser-extension

【解决方案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）。

【讨论】：