使Chrome扩展程序弹出窗口透明

本文介绍了使Chrome扩展程序弹出窗口透明的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在写一个chrome扩展程序.我想知道是否有一种方法可以使弹出窗口透明，也就是说，即使弹出窗口覆盖了它，用户也可以看到当前页面的内容.谢谢！

I am writing a chrome extension. I am wondering if there is a way to make the popup window transparent, that is the user can see the content of the current page even the popup window covers it. Thank you!

推荐答案

昨天我想到一个有趣的主意，尽管您不能删除白色背景，但仍然可以模仿透明背景

An interesting idea came to me mind yesterday, though you can't remove the white background, you can still mimic a transparent background.

这可以通过在打开弹出窗口之前拍摄页面的屏幕截图并将其作为弹出窗口的背景图像来完成. 我不确定背景图像的位置计算将如何进行，即使可能，也可以尝试一下.

This will be done by taking a screenshot of the page right before opening the popup and place it as a background image of the popup. I'm not sure how the background-image position calculations will go and if even possible but go give it a try.

当然，您仍然会看到弹出窗口的白色边框和阴影框，但是它看起来仍然应该不错.

Of course you will still have the popup's white border and box-shadow, but it should still look quite good.

请注意，如果弹出窗口后面有任何移动，此技巧可能无法奏效，例如:

Notice that this trick may not work good if there is any movement behind the popup as:

• 视频/音频播放器
• 图像滑块
• 广告横幅
• 自动更新新闻提要(社交媒体)
• CSS动画
• 等等...

使用背景脚本中的captureVisibleTab进行屏幕截图: developer.chrome/extensions/tabs#method-captureVisibleTab

Taking a screenshot is done using captureVisibleTab from a background-script: developer.chrome/extensions/tabs#method-captureVisibleTab

您将使用消息或存储将屏幕截图图像数据发送到弹出窗口.

You will use messages or storage to send the screenshot image data to the popup.