javascript - 使用 chrome 扩展程序如何将 html 添加到页面 body 标签的正下方？

Question

我想要一个 chrome 扩展，在某些网站的顶部添加一个小栏。如果您已登录，则类似于您在本网站顶部看到的栏。

根据我所阅读的内容，我需要使用内容脚本来执行此操作，并且我尝试了各种方法。目前我有一个名为 content.js 的文件，其中包含以下内容

var iframe = document.createElement("iframe");    
iframe.src = chrome.extension.getURL("iframe.html");
document.body.appendChild(iframe);

iframe.html 文件就是这个

<button id="button">Click me!</button>
<script>
document.getElementById("button").addEventListener("click", function() {
top.postMessage("clicked!", "*");
}, false);
</script>

这会在页面底部插入此代码，我的问题是我想将它放在顶部。我该怎么做？

Answer 1

您可以使用 insertBefore 和 firstchild 将其添加到顶部，如下所示:

document.body.insertBefore(iframe, document.body.firstChild);