Question

我是Chrome扩展程序的新手，不知道如何在javascript / content脚本中开发工具栏按钮，并希望将其修复到正文的顶部（想要推倒身体）。请帮忙。

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";

Answer 1

您可以通过 content script 实现您想要的效果（请参阅下面的示例）。

如果您只想将工具栏注入特定页面，请相应地修改 match pattern 。 E.g：

// 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
    }]
}

另请参阅此 excellent answer ，以深入了解该主题。

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

1 个答案: