如何在Chrome扩展中的JavaScript中将iframe/div插入到浏览器主体的顶部

4bbkushb 于 2023-10-14 发布在 Go

关注(0)|答案(1)|浏览(90)

我是新的Chrome扩展程序，不知道如何在JavaScript/内容脚本中开发工具栏按钮，并希望将其修复到身体的顶部（想把身体推下来）。请帮帮忙。

document.body.parent.style.webkitTransform ='translateY(40px)';

var div = document.createElement("div");

div.id="divs";
div.style.display='block';
div.style.width = "600px";
div.style.height = "100px";
div.style.background = "#C2E2FF";

div.style.color = "grey";

div.innerHTML = "my div";

div.appendChild(btn1);
   document.body.insertBefore(div, document.body.firstChild);
 document.getElementById("divs").style.fontStyle = 'italic';
 document.getElementById("divs").style.position = "fixed";

google-chrome

来源：https://stackoverflow.com/questions/20093066/how-to-insert-iframe-div-to-the-top-of-browser-body-in-javascript-in-chrome-exte

1条答案

按热度按时间

bgtovc5b1#

您可以通过**content script实现您想要的功能（参见下面的示例）。
如果您只想将工具栏插入到特定页面，请适当修改match pattern**。例如：

// To inject toolbar only to pages like `http://*.google.com/*`
// ...replace:
matches: ["*://*/*"]

// ...with:
matches: ["http://*.google.com/*"]

下面是一个演示扩展的源代码，它在每个具有http或https模式的页面中注入一个工具栏。

content.js：

var toolbarHeight = 50;

var div = document.createElement("div");
div.id = "myToolbar";
div.textContent = "I am the toolbar !";

var st = div.style;
st.display = "block";
st.top = "0px";
st.left = "0px";
st.width = "100%";
st.height = toolbarHeight + "px";
st.background = "#C2E2FF";
st.color = "grey";
st.fontStyle = "italic";
st.position = "fixed";

document.body.style.webkitTransform = "translateY(" + toolbarHeight + "px)";
document.documentElement.appendChild(div);

manifest.json：

{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",
    "offline_enabled": true,

    "content_scripts": [{
        "matches":    ["*://*/*"],
        "js":         ["content.js"],
        "run_at":     "document_end",
        "all_frames": false
    }]
}

也请参阅这个优秀的答案，以深入了解这个问题。

赞(0）回复(0）举报 2023-10-14

我来回答

如何在Chrome扩展中的JavaScript中将iframe/div插入到浏览器主体的顶部

1条答案

相关问题

热门标签

最新问答