Javascript 如何在页面中插入组件而不进行响应？

我正在尝试创建一个chrome扩展，用户可以通过浏览器彼此聊天

我想把整个页面分成两部分（以一定的比例），这样右侧部分将有一个聊天框，左侧部分将有原始页面内容

我知道我必须在运行时通过在JS中使用createElement和appendChild来操作DOM，但是我如何插入一个复杂的组件，其中可能有很多复杂的逻辑，只使用普通的旧Javascript

现在，我想添加的组件将是一个聊天框，它可能使用nodejssocket.io与其他浏览器上的其他人进行通信。

---

有没有一种更简单的方法来实现这一点，而不进行几十次createElement和appendChild调用？

您想添加什么类型的组件？问题中添加了Webcomponent？将其添加到iframe中，iframe指向web可访问资源中公开的扩展名中的html文件。我不想使用React，这只是一个示例。您可以使用任何其他框架，也可以手动执行。寻找通过web可访问资源添加UI的示例。