Chrome扩展将侧边栏注入页面答案

【问题标题】：Chrome extension inject sidebar into pageChrome扩展将侧边栏注入页面
【发布时间】：2012-04-23 10:32:42
【问题描述】：

我希望我的 chrome 扩展程序在激活时能够在任何页面的右侧注入一个 300 像素的侧边栏。我正在寻找将整个页面限制为 document.body.clientWidth - 300 的最佳方法，从而将 300px 留在我的侧边栏的右侧。我当前注入的侧边栏附加到 document.body 并具有如下样式：

width:300px
position: fixed
top: 0px
right: 0px
height:500px

我需要一种方法来防止现有页面元素渗入我的侧边栏。我希望有一种方法可以诱使现有元素认为它们正在渲染到比实际窗口窄 300px 的浏览器客户端，从而为我的侧边栏留出空间，但我还没有找到任何简单的方法来做到这一点。 .

【问题讨论】：

你想在哪个站点注入你的侧边栏？看看你是否可以从页面上存在的容器的宽度减去 300px。
这必须适用于任何网站。我可以尝试在网站上的主体上设置最大宽度，但它可能仍然具有固定位置元素，这将迫使它流血。元素也可以覆盖该最大宽度...
这很难做到。您可以采用的另一种方法是将整个 body DOM 包装到一个新的 div 中，然后添加 margin-right:300px;到它，但再次固定位置和浮动元素会产生问题。我建议改为添加一个可停靠面板。
可停靠面板可以，但仍会覆盖内容。 Chrome 的扩展程序有一个面板窗口类型，但它们目前是实验性的。

标签： javascript css google-chrome google-chrome-extension

【解决方案1】：

我相信这更容易。首先在 body 上添加 padding，为侧边栏腾出空间。然后，创建一个包含侧边栏的 div。使用固定定位的 CSS 将 div 相对于页面的右侧和顶部定位。同时设置侧边栏 div 的高度和宽度。

代码（使用 JQuery）：

  var sidebar;
  $('body').css({
    'padding-right': '350px'
  });
  sidebar = $("<div id='sidebar'></div>");
  sidebar.css({
    'position': 'fixed',
    'right': '0px',
    'top': '0px',
    'z-index': 9999,
    'width': '290px',
    'height': '100%',
    'background-color': 'blue'  // Confirm it shows up
  });
  $('body').append(sidebar);

【讨论】：

【解决方案2】：

更新

对于任何使用谷歌搜索的人，对其进行大修以反映我在应用程序中实际使用的内容，使用 jQuery，有更多的保护措施，并且更加尊重当前页面的 css。

//height of top bar, or width in your case
var height = '30px';

//resolve html tag, which is more dominant than <body>
  var html;
  if (document.documentElement) {
    html = $(document.documentElement); //just drop $ wrapper if no jQuery
  } else if (document.getElementsByTagName('html') && document.getElementsByTagName('html')[0]) {
    html = $(document.getElementsByTagName('html')[0]);
  } else if ($('html').length > -1) {//drop this branch if no jQuery
    html = $('html');
  } else {
    alert('no html tag retrieved...!');
    throw 'no html tag retrieved son.';
  }

//position
if (html.css('position') === 'static') { //or //or getComputedStyle(html).position
  html.css('position', 'relative');//or use .style or setAttribute
}

//top (or right, left, or bottom) offset
var currentTop = html.css('top');//or getComputedStyle(html).top
if (currentTop === 'auto') {
  currentTop = 0;
} else {
  currentTop = parseFloat($('html').css('top')); //parseFloat removes any 'px' and returns a number type
}
html.css(
  'top',     //make sure we're -adding- to any existing values
  currentTop + parseFloat(height) + 'px'
);

你快完成了。您已经设置了页面 html 的样式。您可能已经注意到页面中的 css 会影响您的内容。您可以通过将其包含在 iframe 中来解决此问题：

var iframeId = 'someSidebar';
if (document.getElementById(iframeId)) {
  alert('id:' + iframeId + 'taken please dont use this id!');
  throw 'id:' + iframeId + 'taken please dont use this id!';
}
html.append(
  '<iframe id="'+iframeId+'" scrolling="no" frameborder="0" allowtransparency="false" '+
    'style="position: fixed; width: 100%;border:none;z-index: 2147483647; top: 0px;'+
           'height: '+height+';right: 0px;left: 0px;">'+
  '</iframe>'
);
document.getElementById(iframeId).contentDocument.body.innerHTML =
  '<style type="text/css">\
    html, body {          \
      height: '+height+'; \
      width: 100%;        \
      z-index: 2147483647;\
    }                     \
  </style>                \
  <p>UNSTYLED HTML!</p>';

是的，您必须在设置 innerHTML 之前附加 iframe

您应该能够复制/粘贴和编辑它，并成为您的一员！

【讨论】：

这可能很接近谢谢！今天晚些时候我得试试。今天早上我简单地尝试了一下，不得不调整 document.documentElement.style.left 以及最大宽度。仍然不是 100% 相当于用户将浏览器窗口缩小到预期的最佳大小。
哦，顺便说一句，是的，我正在使用 iframe 作为栏，你是对的，它确实可以防止 css 冲突。
任何东西的最大 z-index 是：2147483647，使用这个
非常感谢这...挽救了我的理智。我有这个确切的代码运行良好 - 它向下翻页 x 像素并插入我的 iFrame。但是，当我编辑代码以将 iFrame 放在右侧时，父页面会向左移动，但不会调整大小。所以我的 iFrame 不会掩盖父页面上的内容（这是我在找到这篇文章时试图解决的问题）。但是父页面的 1/3 与可视页面相差 300 像素（我的 iFrame 的宽度）。也许垂直更好，因为页面总是垂直滚动？关于改进左/右位移的任何想法？再次感谢！

【解决方案3】：

感谢 Devin 提供示例代码。与其他答案不同，这似乎有效。我实际上将这段代码用于write an extension，旨在自己解决这个问题。但是，我遇到了困难when using it with certain Gmail tabs。

您可以查看我的 hacked-together 代码，了解 iframe 侧边栏的工作示例，该侧边栏不只是覆盖在页面上。但是，我还没有能够克服前面提到的 Gmail 错误，尽管这对您来说可能不是问题。我只是通过 iframe src 引入内容，而不是使用 document.getElementById(iframeId).contentDocument.body.innerHTML 插入内容。

【讨论】：

【解决方案4】：

好吧，你应该在你的 CSS 中添加 z-index 属性，将 width 设置为 300px 并删除 right。

但我希望你能改变主意:)

【讨论】：

我不只是想在页面顶部覆盖一个侧边栏，我希望它强制将现有内容从右侧限制为 300px，就像侧边栏（如 Firefox 书签侧边栏）表现。在页面内容顶部弹出一个 div 没有问题。