Chrome 扩展程序将侧边栏注入页面 [英] Chrome extension inject sidebar into page
问题描述
我希望我的 chrome 扩展程序在激活时能够在任何页面的右侧插入一个 300 像素的侧边栏.我正在寻找将整个页面限制为 document.body.clientWidth - 300 的最佳方法，从而将 300px 留在右侧作为我的侧边栏.我当前注入的侧边栏附加到 document.body 并且具有如下样式:
I would like my chrome extension to be able to inject a 300px sidebar on the right side of any page when it is activated. I am looking for the best way to constrain the entire page to document.body.clientWidth - 300, thereby leaving the 300px on the right for my sidebar. The sidebar I currently inject is appended to document.body and has a style like so:
width:300px
position: fixed
top: 0px
right: 0px
height:500px
我需要一种方法来防止现有页面元素溢出到我的侧边栏中.我希望有一种方法可以诱使现有元素认为它们正在渲染到比实际窗口窄 300 像素的浏览器客户端，从而为我的侧边栏留出空间，但我还没有找到任何简单的方法来做到这一点..
I need a way to prevent the existing page elements from bleeding over into my sidebar. I was hoping that there would be a way to trick the existing elements into thinking that they were rendering into a browser client 300px narrower than their actual window thereby leaving space for my sidebar but I haven't found any easy way to do so...
推荐答案
更新
对于任何使用谷歌搜索的人，对其进行大修以反映我在应用程序中实际使用的内容，使用 jQuery，有更多的保护措施，并更加尊重当前页面的 css.
Update
For anyone googling, overhauled this to reflect what I'm actually using in an app, use jQuery, have more safeguards, and be more respectful of current page 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 中来解决此问题:
You're almost done. You've styled the page html. You might have noticed css from the page affects your stuff to. You can resolve this by containing it within an 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
Yes, you have to append the iframe before setting the innerHTML
您应该能够复制/粘贴和编辑此内容，并按照自己的方式行事！
You should be able to copy/paste and edit this and be one your way!
这篇关于Chrome 扩展程序将侧边栏注入页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
