Google Chrome扩展程序是否可以将邮件从扩展程序网页发送回网站页面并重新打开该页面?

时间:2016-03-09 15:29:33

标签: javascript google-chrome-extension

我正在为我的书签应用构建Chrome扩展程序。

书签记录有4个图像字段。

每个图像文件都有以下选项来设置图像:

  • 生成网页视口的屏幕截图
  • 选择从网页HTML中抓取的图片
  • 选择网页屏幕的某个区域,然后使用注释进行编辑

当我在工具栏中单击扩展按钮时,我有一个加载在popup.html文件中的模态样式应用程序。因为我添加了为屏幕截图图像选择区域的功能,但我现在必须将该模式移动到实际的网页DOM中。

原因是当用户选择从模态中选择区域截图时,它必须关闭模态/隐藏它并显示屏幕以进行选择。完成后,无法从菜单栏重新打开弹出窗口!

所以我将模态移动到网页上。然后单击工具栏按钮将构建并显示模态。然后,当用户选择为4个图像字段中的1个选择区域时,我将隐藏模态,完成后我可以简单地显示隐藏模态并填充新生成和上传图像的文本输入。

我现在正试图更进一步。选择图像区域后,而不是立即显示模态窗口。我想在编辑器样式页面中显示图像,该页面将是属于扩展名的HTML网页(如此chrome扩展名://mcbpblocgmgfnpjjppndjkmgjaogfceg/fsCaptured.html)。它会在新标签中打开它。

然后,用户将在编辑器中使用文本,形状等进行注释,然后上传文件。

这是我被困的地方。当我从上传的图像中获取URL时,我需要关闭这个新的选项卡窗口并返回到具有应用模式窗口的主网页以及从中选择屏幕截图的位置。我需要再次打开/显示模态并填写新图像上传字段的文本输入。

所以我的问题是......

我的扩展程序是否有可能将我的chrome-extension://mcbpblocgmgfnpjjppndjkmgjaogfceg/fsCaptured.html页面中的消息与编辑器一起传回模态所在的网页?

我需要:

  1. 将图片网址传回网页,并附上留言
  2. 关闭扩展程序编辑器页面/标签
  3. 返回/将焦点带到网页上并带有模式
  4. 这甚至可能吗?我意识到您可以将后台脚本中的消息发送到内容脚本,将内容脚本发送回后台脚本。

    更新

    第一部分。也许扩展网页会向background.js发送消息,然后background.js可以向网页内容脚本发送消息。这将解决这一过程的一部分!

    只需要确定扩展网页是否可以关闭,然后将重点放在原始网页上?

    更新2

    看起来我想通了。

    您可以选择/激活选项卡:

    chrome.tabs.update(tabId, {selected: true});

1 个答案:

答案 0 :(得分:0)

我相信我的自定义扩展程序页面可以向background.js发送消息 然后background.js可以使用模态窗口向网页内容脚本发送消息,然后让它更新该模式中的图像字段。

接下来,在我的自定义扩展程序页面中,我应该能够在将上述消息发送到内容脚本后调用chrome.tabs.update(tabId, {selected: true});,然后关闭扩展页面并将焦点带回我的网页,其中包含模式。