0

所以，我有这个扩展，当点击图标时它应该在页面上显示一个自定义弹出窗口，我的意思是“自定义弹出窗口”，我的意思是，<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

有什么办法可以做我正在寻找的吗？

编辑：这是一张图片，因此您可以更好地理解我在说什么，这是“正方形”： 例子

有时你甚至看不到它，有时它只是闪烁，有时需要更长的时间才能消失，这取决于我认为的电脑

4

1 回答 1

0

在这种情况下，我会使用一个图层。一个图层可以使用 CSS 完成，可以包含所有正确的格式和文本，并且可以在您不想影响它周围的任何其他文本时显示或隐藏，因为它位于另一个图层上。我不确定这是否会解决您的问题，因为我真的不知道您正在创建的程序的上下文以及您要完成的工作。

于 2021-10-27T02:43:10.813 回答