Chrome扩展开发：插入加载页iframe至DOM后无法显示的问题排查

首先，你的代码里有几个关键错误导致新创建的元素无法正常显示，咱们一步步拆解原因：

1. 元素类型选反+无效属性误用 #

你想要插入的是加载页的iframe，但代码里却创建了一个<body>元素，还给它设置了src属性——但<body>标签根本没有src这个属性！只有<iframe>、<img>这类资源型元素才有src用来指定地址，所以你写的body.src完全不起作用，这个新body里没有任何内容，自然显示不出来。

2. 违反HTML文档规范 #

HTML标准明确规定一个页面只能有一个<body>元素，你通过document.documentElement.appendChild(body)把新body加到根元素里，浏览器会因为这个不符合规范的结构，不会把它当作页面的主内容区渲染，只会把它当作冗余节点存在DOM里，不会在页面上展示。

正确的实现代码 #

既然需求是用iframe替代页面自身加载，那应该直接创建<iframe>元素，再设置样式让它占满整个视口，同时处理原页面内容避免干扰。修改后的content script代码如下：

// 停止原页面加载
window.stop();

// 隐藏原页面的body，防止干扰新iframe的显示
document.body.style.display = 'none';

// 创建iframe元素
const iframe = document.createElement('iframe');
// 设置iframe加载当前页面的URL
iframe.src = window.location.href;
// 设置样式让iframe铺满整个页面
iframe.style.position = 'fixed';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.style.width = '100vw';
iframe.style.height = '100vh';
iframe.style.border = 'none';
iframe.style.zIndex = '9999';

// 将iframe添加到页面根元素中
document.documentElement.appendChild(iframe);

这样修改后，iframe会覆盖整个页面并加载目标URL，就能实现你想要的替代页面加载的效果。另外要注意，确保你的Chrome扩展权限配置正确（比如添加"<all_urls>"权限），这样脚本才能在目标页面正常注入并操作DOM。

内容的提问来源于stack exchange，提问作者Илья Колдунов