Chrome extension inject sidebar into page
Question
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
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...
4 answers
solution1
14 2012-08-07 00:47:19
I believe this is easier. First add padding to the body to make space for the sidebar. Then, create a div containing your sidebar. Position the div relative to the right and top of the page using CSS with fixed-positioning. Also set the height and width of the sidebar div.
Code (uses 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);
solution2
12 ACCPTED
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'
);
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>';
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!
solution3
1 2015-01-05 13:53:12
Thanks to Devin for the sample code. Unlike the other answers, this seemed to work. I actually used this code to write an extension aiming to solve this issue myself. However, I ran into difficulties when using it with certain Gmail tabs .
You can take a look at my hacked-together code for a working example of an iframe sidebar that isn't simply overlaid on the page. However, I haven't yet been able to overcome the aforementioned Gmail bug although this may not be an issue for you. I was simply bringing content in through the iframe src rather than inserting content with document.getElementById(iframeId).contentDocument.body.innerHTML .
solution4
0 2012-04-11 06:09:21
Well, you should just add z-index property to your css, set width to 300px and remove right .
BUT i hope you will change your mind:)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.