javascript - 当在其顶部打开新窗口然后关闭时，Google Chrome 扩展弹出窗口是否可以保持打开状态？

Question

我有一个 Google Chrome 扩展程序，它使用 Background.html 和 background.js 文件在单击托盘菜单中的 Chrome 扩展程序图标时显示此弹出窗口上....

<小时/>

在我的弹出窗口中有一个按钮，用于生成当前选项卡 URL 的屏幕截图图像，然后将图像上传到我的服务器，并使用我的图像上传的 URL 填充文本输入。

我现在想要添加在网页屏幕上选择区域并生成截图图像的功能，该图像被裁剪为仅显示所选区域内的内容，如下图所示，显示了页面上所选的区域....

<小时/>

我现在的问题是，我不能简单地在弹出窗口中使用一个按钮将我带入页面上的区域选择模式。我可以，但它会关闭弹出窗口，我经过研究并发现您无法以编程方式打开弹出窗口。

因此，一旦弹出窗口关闭，我将无法再编辑之前加载到其中的记录。

我正在尝试提出一个新的解决方案来实现我想要的结果。

<小时/>

想法 1

将当前背景弹出窗口的所有功能移至实际网页上显示的模式窗口中。

这将是一个很大的变化，因为它需要大量消息传递，因为模式代码无法访问用于生成屏幕截图并获取所有选项卡数据的扩展 API。

然后，当单击扩展程序图标时，我可以打开一个类似于上图中弹出窗口的模式。

当单击“生成屏幕截图”按钮时，它会向后台脚本发送一条消息以获取选项卡 API 并生成屏幕截图，然后将其作为消息发送回页面中的内容脚本。

至于我的新功能，即选择一个区域并创建该区域的图像。模式将有一个按钮来执行此操作，单击后将隐藏模式窗口。接下来，它会让我做出选择，在 edn 上再次向后台发送消息并生成屏幕截图并将其裁剪到我选择的坐标，然后将其返回到内容脚本的返回消息中，然后内容脚本将显示隐藏的模式窗口并更新内部图像以显示新图像。

这是我认为最好的、最难的方法。

<小时/>

想法 2)

如果可能的话，在当前弹出窗口内单击按钮将启动当前页面的新弹出窗口，并允许我创建选择区域并生成图像，完成后将关闭弹出窗口并发送结果返回到我的扩展弹出窗口。

我不知道这是否有效，因为我不确定当我单击新的弹出窗口时扩展弹出窗口是否会自动关闭？

<小时/>

有谁知道其他方法可以实现这一目标，或者我的想法是否实用？

Answer 1

您可以查看Adblock Plus寻找灵感。

它们有一个带有“阻止元素”按钮的弹出窗口，可切换到“现在与页面交互”模式。

用户点击后，将打开注入(inject)到页面中的后续 UI。

<小时/>

无论如何，单击弹出窗口外部都会使其失去焦点，从而按设计将其关闭。

您可以指示用户在与页面交互后再次单击您的按钮，或者您需要将一些 UI 注入(inject)页面本身。