javascript - Chrome 扩展将侧边栏注入(inject)页面

Question

我希望我的 chrome 扩展能够在激活时在任何页面的右侧插入一个 300 像素的侧边栏。我正在寻找将整个页面限制为 document.body.clientWidth - 300 的最佳方法，从而将右侧的 300px 留给侧边栏。我当前注入(inject)的侧边栏附加到 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);