如何使用内容脚本将 iFrame 附加到加载页面的顶部栏？答案

【问题标题】：How to get iFrame attached to the top bar of a loading page using content scripts?如何使用内容脚本将 iFrame 附加到加载页面的顶部栏？
【发布时间】：2013-12-06 07:01:19
【问题描述】：

我想通过使用 chrome 扩展中的内容脚本将 iFrame 添加到网页顶部。

当我这样做时的问题是：

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });

var iFrame  = document.createElement ("iframe");
iFrame.src  = chrome.extension.getURL ("chrome.html");
iFrame.setAttribute("scrolling", "no");
iFrame.setAttribute("frameborder", "0");
iFrame.setAttribute("style", "border:none; width:100%; height:20%;  position: fixed;top: 10px; bottom: 10px;left: 10px;right: 10px;");
document.body.insertBefore (iFrame, document.body.firstChild);


function checkScroll()
{
    //remove the iframe
    //iFrame.parentNode.removeChild(iFrame);

    //or remove after 2 secs
    setTimeout(function(){ iFrame.parentNode.removeChild(iFrame); }, 2000);

    //off the scroll listener
    document.removeEventListener('scroll', checkScroll); 
}
document.addEventListener('scroll', checkScroll);

就是这样，有时 iframe 在网页下方加载。我希望它从浏览器窗口的顶部加载。此外，它不会加载到谷歌搜索网页中。我哪里错了？

【问题讨论】：

您尝试过我下面提出的解决方案吗？它对你有用吗？

标签： html css iframe google-chrome-extension

【解决方案1】：

在这种情况下，更好的选择是在 document.documentElement（而不是 document.body）中添加 iframe 并使用 static 位置，然后向下“移动”正文的 CSS（为了不破坏可能绑定到特定的 CSS 值。

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

content.js：

var height = '20%';
var padding = '10';

/* Create the iframe */
var iframe = document.createElement ('iframe');
iframe.src = chrome.extension.getURL('/popup/popup.html');

/* Style the iframe */
var st = iframe.style;
st.border = 'none';
st.boxSizing = 'border-box';
st.height = height;
st.left = '0px';
st.padding = padding + 'px';
st.position = 'absolute';
st.top = '0px';
st.width = '100%';

/* Insert the iframe into the DOM */
document.documentElement.appendChild(iframe);

/* For a better UI experience convert relative height to absolute */
var heightInPixels = parseInt(window.getComputedStyle(iframe).height);
st.height = (heightInPixels + (2 * padding)) + 'px';

/* Shift down the body's CSS (in order not to break anything) */
document.body.style.webkitTransform = 'translateY(' + st.height + ')';

manifest.json：

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

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

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

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

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

另请参阅此excellent answer，了解有关该主题的深入报道。

【讨论】：