Chrome extension inject sidebar into page

前端未结

关注

 4  1173

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 ent

相关标签:

4条回答

被撕碎了的回忆

2020-12-08 00:00

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 :)

0 讨论(0)
发布评论:

提交评论
- 加载中...
心在旅途

2020-12-08 00:03

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
你的背包

2020-12-08 00:06
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);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

悲哀的现实

2020-12-08 00:07

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!

0 讨论(0)