如何在javascript扩展中将iframe / div插入到浏览器正文的顶部 [英] How to insert iframe/div to the top of browser body in javascript in chrome extension

问题描述

我是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 =gray; 
 
 
 div.innerHTML =我的div; 
 
 div.appendChild（btn1）; 
 document.body.insertBefore（div，document.body.firstChild）; 
 document.getElementById（divs）。style.fontStyle ='italic'; 
 document.getElementById（divs）。style.position =fixed; 
  

解决方案

您可以通过 内容脚本 （请参阅下面的示例）。

如果您只想将工具栏注入特定页面，请修改 匹配模式 。例如：

  //将工具栏仅注入到诸如http：// *。google.com / *`
 // ...替换：
匹配：[*：// * / *] 
 
 // ...与：
匹配：[http ：//*.google.com/*] 
  

---

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

content.js：

  var toolbarHeight = 50; 
 
 var div = document.createElement（div）; 
 div.id =myToolbar; 
 div.textContent =我是工具栏！; 
 
 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 =gray; 
 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 
}] 
} 
  

另请参阅 出色的答案 ，以深入了解该主题。

I am new to chrome extension and did not know how to develop toolbar button in javascript/content script and want to fix it to the top of body(want to push body down). please help.

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

解决方案

You can achieve what you want by means of a content script (see example below).

If you want to inject the toolbar to specific pages only, modify the match pattern appropriately. E.g.:

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

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

---

Below is the source code of a demo extension that injects a toolbar in every page that has a scheme of http or 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
    }]
}

See, also, this excellent answer for an in-depth coverage of the subject.

这篇关于如何在javascript扩展中将iframe / div插入到浏览器正文的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！