Question

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

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

我需要一种方法来防止现有的页面元素流入我的侧边栏。我希望有一种方法可以欺骗现有的元素，让他们认为它们渲染成的浏览器客户端比实际窗口缩小300px，从而为我的侧边栏留出空间，但我没有找到任何简单的方法来做到这一点。

Answer 1

我相信这更容易。首先在主体上添加填充以为侧边栏留出空间。然后，创建一个包含侧边栏的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);

Answer 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

你应该可以复制/粘贴和编辑它，并且是你的方式！

Answer 3

好吧，你应该只为你的css添加 z-index 属性，将宽度设置为300px并删除正确。

但我希望你会改变主意：）

Answer 4

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

您可以查看我的黑客密码代码，了解iframe侧边栏的工作示例，它不会简单地叠加在页面上。但是，我还没有能够克服上述Gmail错误，尽管这对您来说可能不是问题。我只是通过iframe src引入内容，而不是使用document.getElementById(iframeId).contentDocument.body.innerHTML插入内容。

Chrome扩展程序将侧边栏注入页面

4 个答案:

更新