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

Question

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

Dar*_*tle 18 javascript css google-chrome google-chrome-extension

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

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

小智 14

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Dev*_*ode 12

更新

对于任何人谷歌搜索,彻底检查这反映我在应用程序中实际使用,使用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'
);

Run Code Online (Sandbox Code Playgroud)

你几乎完成.你已经设置了页面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>';

Run Code Online (Sandbox Code Playgroud)

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

你应该能够复制/粘贴和编辑它,并成为你的方式!

归档时间：	13 年，10 月前
查看次数：	8606 次
最近记录：	11 年，1 月前