所以，我有这个扩展，当点击图标时它应该在页面上显示一个自定义弹出窗口，我的意思是“自定义弹出窗口”，我的意思是，<iframe>在页面 dom 本身中呈现并注入的东西，而不是“传统扩展”弹出窗口”，但问题是在某些页面中我无法注入内容脚本，在这些情况下，我想在“传统扩展弹出窗口”中显示内容。
我让它工作了，但这不是最优雅的解决方案，这就是我的做法
中popup.html没有内容，<body>它导入了一个脚本。
此脚本尝试向页面中运行的内容脚本发送消息，如果消息成功，弹出窗口将自行关闭，内容脚本将处理页面上的渲染
如果无法发送消息，则它会尝试在页面上注入脚本，如果注入有效，则再次发送消息，如果没有，则我们位于不允许注入的页面上，即在这种情况下，我们只是将内容渲染到弹出窗口的主体（我在这里使用 Svelte）
browser.tabs.query({active: true, currentWindow: true}).then(tabs => {
const tab = tabs[0];
browser.tabs.sendMessage(tab.id, {action: "toggle"}).then(() => {
window.close();
}).catch(() => {
injectScript(tab).then(() => {
browser.tabs.sendMessage(tab.id, {action: "toggle"}).then(() => {
window.close();
});
}).catch(() => {
document.body.style.width="400px";
document.documentElement.style.height="580px";
new App({
target: document.body,
});
});
});
});
问题是，大多数时候，这个过程基本上是瞬时的，你只需点击图标，自定义弹出窗口就会出现，但有时，它需要更长的时间（可能 1 秒？），在那个时候，你可以查看其最小尺寸上的“传统弹出窗口”（可能是 32x32 左右？这是一个非常小的正方形）
我想要的是隐藏弹出窗口，直到我的代码“决定”是否可以在页面中注入内容。
我尝试过但不起作用的方法：
- 将 and/or 标签的宽度和/或高度设置为 0px
- 设置 display:none 和/或 visibility: hidden on and/or tags
有什么办法可以做我正在寻找的吗？
编辑：这是一张图片，因此您可以更好地理解我在说什么，这是“正方形”：
有时你甚至看不到它，有时它只是闪烁，有时需要更长的时间才能消失，这取决于我认为的电脑