Chrome 扩展 - 在底层页面上覆盖来自 iframe 的内容

Posted 2023-05-09

【中文标题】Chrome 扩展 - 在底层页面上覆盖来自 iframe 的内容

【英文标题】：Chrome extension - overlay content from iframe on underlying page

【发布时间】：2016-08-01 18:19:59

【问题描述】：

我有一个 chrome 扩展程序，它在页面右侧显示一个菜单，由几个 47 像素宽的按钮组成。因此，iframe 的宽度也设置为 47 px。

但是，当单击按钮时，我想显示一个下拉列表（或您可以说的“dropleft”），它当然比 47 像素宽。目前此内容在 iframe 的边缘被截断。

我希望能够从 iframe 控制所有这些，这样我就不必在想要更改某些内容时更新扩展程序。有没有办法在下面的网站上覆盖 iframe 中的内容？

编辑

我认为调整 iframe 的大小不是解决方案。带有附加信息的 div 将例如为 400x200 像素。如果我只是增加 iframe 的大小，则会有透明部分显示底层网站但不可点击。理想情况下，iframe 中的内容将仅覆盖现有 iframe 大小。

content.js 中加载 iframe 的函数：

function showMenu(element) 

    var iframe = document.createElement('iframe');

    iframe.src = chrome.runtime.getURL('menu.html);
    iframe.style.cssText = "\
                            position:absolute;\
                            visibility:visible;\
                            top:33%;\
                            right:0px;\
                            width:47px;\
                            height:198px;\
                            margin:0;\
                            padding:0;\
                            border:none;\
                            overflow:hidden;\
                            background:transparent;\
                            z-index:999999;\
                        ";

    element.append(iframe);       

menu.html

<style>
html, body, iframe, h2 
    margin: 0;
    padding: 0;
    border:none;
    display: block;
    width: 100vw;
    height: 100vh;
    background: transparent;
    color: black;

h2 
    height: 50px;
    font-size: 20px;

iframe 
    height: calc(100vh - 50px);

</style>

<iframe class="menu"></iframe>

【问题讨论】：

***.com/questions/18456498/…的可能重复

我不认为调整 iframe 的大小是解决方案。带有附加信息的 div 将例如为 400x200 像素。如果我只是增加 iframe 的大小，则会有透明部分显示底层网站但不可点击。理想情况下，来自 iframe 的内容将仅覆盖现有 iframe 大小。 （虽然不确定这是否可能）

既然如此，为什么要使用iframe而不是直接向页面添加元素呢？

因为我想动态加载内容，所以不用每次想换UI都更新扩展。

【参考方案1】：

iframe 无法溢出其边界 (see this post)。

因此，当您想要显示更多内容时，您要么需要增加 iframe 的大小，也许是通过使用扩展程序传递消息。或者不使用 iframe 并牺牲在您更改某些内容时不必为扩展程序发布更新。