有了Chrome扩展，如何将HTML添加到页面的正文标签下方？ [英] With a chrome extension how can add html to just below the body tag of a page?

问题描述

我希望有一个Chrome扩展程序，可以在某些网站的顶部添加一个小栏。如果您已经登录，则会出现与您在本网站顶部所显示的栏类似的栏。

I want to have a chrome extension that adds a little bar to the top of certain sites. A bar similar to the one you have at the top of this site if you are logged in.

从我读过的内容中我需要做到这一点，我尝试了各种各样的东西。目前我有一个名为content.js的文件，它具有以下内容：

From what I have read I need to do this with a content script and I have tried various things. At present I have a file called content.js which has the following

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

iframe.html文件就是这样

The iframe.html file is just this

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

这会在页面底部插入这段代码，我的问题是我想在顶端。我怎样才能做到这一点？

This inserts this code at the bottom of the page and my problem is I would like to get it at the top. How can I do this?

推荐答案

您可以使用 insertBefore 和 firstchild 就像这样：

You can add it to the top by using insertBefore and firstchild like so:

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

这篇关于有了Chrome扩展，如何将HTML添加到页面的正文标签下方？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！