将焦点放在调用 chrome 扩展的原始页面选项卡上？

Question

• chrome 扩展工具栏按钮按下
• 打开带有按钮的弹出窗口，当按下该按钮时，它将content.js 文件注入当前页面DOM
• 页面中的content.js 构建了一个DIV Modal 窗口。在该模式中有一个按钮，按下该按钮会向 chrome 扩展 background.js 文件发送一条消息，告诉它构建一个完整的页面截图图像。
• 然后它还会在该页面上隐藏模态 DIV display: none;
• 因为它是一个全页面高度的截图，它必须在content.js和background.js脚本之间来回发送带有坐标的消息，以便它会逐帧捕捉视口的图像以构建完整的高度图像。
• 图像构建完成后，我的background.js 脚​​本会打开一个新文件edit.html，这是我的扩展程序中的一个自定义页面，其中包含用于编辑图像的完整图像注释库。
• 从edit.html 文件中，当图像完成编辑后，它使用 AJAX 将新图像上传到我的远程服务器，并返回新图像上传的 URL。
• 这是我需要关闭 edit.html 文件/选项卡的地方，并使用新图像 URL 将消息发送回原始页面 content.js 以及告诉它取消隐藏模式窗口的消息页面并将新图像 URL 插入到该模式窗口的文本输入字段中。

我已经完成了所有这些工作，直到我需要：

• 关闭edit.html文件/标签
• 同时，将焦点带回我们开始的原始页面选项卡
• 还向原始页面content.js 脚本发送一条消息，该脚本可以包含一条消息以显示模态窗口，并包含我们构建、编辑然后上传到远程服务器的屏幕截图的图像 URL。

1)
有关如何关闭 edit.html 选项卡并将焦点带回原始选项卡页的任何帮助？

我相信edit.html页面必须向background.js文件发送一条消息以关闭自身，然后该background.js文件也可以向原始选项卡content.js文件发送一条消息并将焦点集中在它上面再次。只是不知道如何做这部分。主要是知道哪个标签是原始的。

Answer 1

如果内容脚本使用chrome.runtime.connect() 向后台页面发送消息，那么后台页面可以从port.sender.tab.id 获取标签ID，其中“port”是端口对象的名称。后台页面可以将标签 ID 传递给新的edit.html 页面，方法是将其放在用于打开新标签的 URL 的搜索字符串中，例如。 chrome.tabs.create({url: "edit.html?23"})。由于edit.html 页面是您的扩展的一部分，它可以使用chrome.tabs.update() 来聚焦原始页面，它可以通过使用chrome.tabs.getCurrent() 来获取自己的标签ID，然后使用chrome.tabs.remove() 来关闭自己。它可以通过使用chrome.tabs.sendMessage() 或使用chrome.extension.getBackgroundPage() 访问后台页面的窗口对象来向内容脚本发送消息，这将使其能够使用后台页面和内容脚本之间的现有消息端口。