Javascript 使用内容脚本在iframe中注入html（内部扩展）会显示模糊

为了利用内容脚本的优势，我尝试在chrome扩展中编写html代码，并尝试使用内容脚本将其注入到创建的iframe中。它实际上可以工作，但是看起来很模糊（我已经尝试过-

-webkit字体平滑：抗锯齿-

-而且如果我转到扩展（）内html页面的直接URL，它在实际html上不会变得模糊）

这就是我使用的方法。再说一次，如果我去，它不会变得模糊（请检查底部的图像）

---

所以我开始调查问题的起因。 首先，我尝试通过src属性将实时网站注入iframe，但它们不会变得模糊：

elt.src = "https://example.com"

然而，在这里，我意识到iframe的一点是，我获取的所有其他URL在Inspect元素中都是这样的

iframe元素是可打开的，它的子元素是

#document

，子元素的所有html内容都是子元素

但是，我的一个在DOM上看起来像这样，它没有打开，而且我也没有

#document

标记

---

我尝试的第二件事是使用

$.get(chrome.extension.getURL('views/my_html.html'), function(data, status){
    // and inject data inside the iframe, however that 
    // caused path errors of separated files such as css and js..
});

。。因为在我的html文件中，我将文件作为

<link href="/styles/my_css.css" rel="stylesheet" type="text/css">
<script src="/libs/jquery-3.2.1.min.js"></script>

---

第三，我试着放大页面看看发生了什么。当我缩放时，它变得模糊，非常有趣，如果我打开Inspect元素，它也会被缩放，这在任何iframe或任何其他网站上都不会发生。好像我已经在iframe中注入了JPEG图像；甚至inspect元素在iframe内部也变得模糊

如果我在iframe中插入任何网站，即使我放大1）Inspect元素也不会被放大，2）即使我放大，也不会因为它是代码而变得像素化或模糊；然而在我的例子中，它就像一个图像

这让我发疯，这是怎么发生的，为什么发生的。你有什么想法，什么可能导致它或如何克服这个问题

---

要重新创建问题，您可以按照

此外，我还创建了一个用于复制问题的简化扩展：

即使是一个几乎空荡荡的项目，它也是模糊的：

但是，它不会在网页URL上指向相同的html

---

我不知道这样做是否有效，但您是否尝试过类似

-webkit字体平滑的方法？也许这不包括在iframe中我只是想帮忙，但公平地说，这个问题让我质疑为什么会发生这种情况…@JO3-W3B-D3V是的，我试过
-webkit字体平滑：抗锯齿但是没有运气。另外，正如我所说的，如果我转到扩展html的真实路径，即使放大，它也是非常平滑的。它只是在iFrame中看起来模糊有趣。。。。六羟甲基三聚氰胺六甲醚。。。我有一种直觉，这取决于浏览器实现iframe的方式。。。但我不知道，我的意思是你可以创建自己的JS解决方案来模拟iframe？也许这是一个更好的解决方案很明显，这需要时间，也不能回答你的问题，但至少可以说，这是一项工作。在这里，我创建了一个用于显示问题的示例。你也可以检查一下，这太令人惊讶了！另外，您所说的“模拟iframe”是什么意思？@JO3-W3B-D3V ye，可能没有iframe方法那么方便。
<link href="/styles/my_css.css" rel="stylesheet" type="text/css">
<script src="/libs/jquery-3.2.1.min.js"></script>