我有一个Google Chrome扩展程序,当点击托盘菜单中的Chrome扩展程序图标时,会使用Background.html
和background.js
文件显示此弹出窗口。
在我的弹出窗口中是一个按钮,用于生成当前标签网址的屏幕截图,然后将图像上传到我的服务器,并使用我上传的图片的URL填写文本输入。
我现在想要添加在网页屏幕上选择区域的功能,并生成裁剪为仅在所选区域内的内容的屏幕截图图像,如下图所示,显示在页面上选择的区域.... / p>
我现在的问题是,我不能简单地在弹出窗口中设置一个按钮,将我带到页面上的区域选择模式。我可以,但它会关闭弹出窗口,我已经研究过,发现你无法以编程方式打开弹出窗口。
因此,一旦弹出窗口关闭,我将无法再编辑之前加载的记录。
我正在努力想出一个新的解决方案来实现我想要的结果。
创意1
将当前背景弹出窗口的所有功能移动到实际网页上显示的模态窗口中。
这将是一个很大的变化,因为它需要大量的消息传递,因为模态代码无法访问用于生成屏幕截图并获取所有选项卡数据的扩展API。
当点击扩展图标时,我可以在上图中打开一个看起来像弹出窗口的模态。
当点击生成屏幕截图按钮时,它会向后台脚本发送消息以获取标签API并生成屏幕截图,然后将其作为消息发送回页面中的内容脚本。
关于选择区域和创建该区域图像的新功能。模态将有一个按钮来执行此操作,单击将隐藏模态窗口。接下来它会让我选择哪个在edn上再次向背景发送消息并生成屏幕截图并将其裁剪到我选择的坐标并将其返回到内容脚本的返回消息中,然后将显示隐藏的模式窗口并更新里面的图像以显示新图像。
这是我认为最好的方法。
想法2)
如果它甚至是可能的话,在我当前弹出窗口内的按钮上点击将启动当前页面的新弹出窗口并允许我创建我的选择区域并生成图像,该图像在完成时将关闭弹出窗口并发送结果返回到我的扩展程序弹出窗口。
我不知道这是否有效,因为我不确定当我点击新的弹出窗口时,扩展弹出窗口会自动关闭吗?
有没有人知道其他方法可以实现这个目标,或者我的想法是否切合实际?
答案 0 :(得分:1)
您可以查看Adblock Plus的灵感。
他们有一个弹出窗口" Block Element"切换到"现在与页面交互的按钮"模式。
用户点击后,会打开注入页面的后续用户界面。
在任何情况下,在弹出窗口外单击都会使其失去焦点,从而将其关闭设计。
您可以指示用户在与页面交互后再次单击您的按钮,或者您需要将一些UI注入页面本身。