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

Question

我有一个 chrome 扩展，它在页面右侧显示一个菜单，其中包含几个宽度为 47px 的按钮。因此，iframe 的宽度也设置为 47 px。

但是，当单击按钮时，我想显示一个下拉列表(或您可以说的“dropleft”)，它当然比 47px 更宽。目前该内容在 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);       
}

菜单.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>

Answer 1

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

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