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

Question

为了利用内容脚本的优势，我尝试在chrome扩展程序中编写html代码，并尝试使用内容脚本将其注入创建的iframe。它实际上是有效的，但它看起来很模糊（我已经尝试过 - -webkit-font-smoothing: antialiased - 而且如果我转到扩展程序（http://chrome-extension://ext_id/views/my_html.html）内的html页面的直接网址，它也无法获得在实际的HTML上模糊了。）

var elt = document.createElement('iframe');
elt.id = 'my_iframe';
elt.src = chrome.extension.getURL('views/my_iframe.html')
elt.setAttribute('scrolling', 'no');
document.getElementsByTagName('body')[0].appendChild(elt);

这是我使用的方法。再次，如果我转到http://chrome-extension://ext_id/views/my_html.html它并不会模糊（请查看底部的图片）。

所以我开始调查可能导致问题的原因。 首先，我尝试通过src属性将实时网站注入iframe，并且它们不会模糊：

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

但是，在这里，我对iframe实现的一件事是，我在Inspect Element中获取的所有其他URL都是这样的。

iframe元素是可以打开的，它有#document作为孩子，其所有html内容都是孙子

但是，我在DOM上看起来像是这样，它没有打开，我也没有#document标记。

第二件事我尝试过使用

获取html页面的内容

$.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 Element，它会缩放它，它也不会在任何iframe或任何其他网站上。好像我在iframe中注入了JPEG图像;甚至检查元素在iframe中变得模糊

如果我将任何网站注入我的iframe，即使我放大1）Inspect Element也不会被放大，2）即使我缩放，它也不会因为它而导致像素化或模糊＃＆＃ 39;代码;但就我而言，它的表现就像一个形象。

它让我疯狂如何以及为什么会这样。你有什么想法可能会导致它或如何解决这个问题吗？

要重新创建问题，您可以关注this method

另外，我创建了一个简化的扩展来复制问题：https://drive.google.com/open?id=1y0Dopp1GhU47tWhXgxoGUy3DaDsQDouc

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

然而，它不会在同一个html的网页网址上