Расширение Chrome добавляет боковую панель в страницу

Я хотел бы, чтобы мое расширение chrome могло вставлять боковую панель размером 300 пикселей в правой части любой страницы, когда она активирована. Я ищу лучший способ ограничить всю страницу document.body.clientWidth - 300, тем самым оставляя 300 пикселей справа для моей боковой панели. Боковая панель, которую я сейчас вставляю, добавляется в document.body и имеет такой стиль:

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

Мне нужен способ предотвратить переполнение существующих элементов страницы на боковой панели. Я надеялся, что будет способ обмануть существующие элементы, подумав, что они превращают в клиентский браузер на 300 пикселей меньше, чем их фактическое окно, тем самым оставляя место для моей боковой панели, но я не нашел простого способа сделать это..

Ответ 1

Update

Для любого пользователя в Google, переработанный, чтобы отразить то, что я на самом деле использую в приложении, используйте 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'
);

Ты почти готов. Вы создали страницу 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>';

Да, вы должны добавить iframe перед установкой innerHTML

Вы должны иметь возможность копировать/вставлять и редактировать это и быть одним из ваших способов!

Ответ 2

Я считаю, что это проще. Сначала добавьте дополнение к телу, чтобы сделать пространство для боковой панели. Затем создайте div, содержащий вашу боковую панель. Поместите div относительно правой и верхней части страницы с помощью CSS с фиксированным позиционированием. Также задайте высоту и ширину 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);

Ответ 3

Ну, просто добавьте свойство z-index в ваш css, установите width на 300px и удалите вправо.

НО я надеюсь, что вы передумаете:)

Ответ 4

Спасибо Devin за образец кода. В отличие от других ответов, это работало. Я действительно использовал этот код для написать расширение, чтобы решить эту проблему самостоятельно. Тем не менее, я столкнулся с трудностями при использовании его с определенными вкладками Gmail.

Вы можете посмотреть мой код взломанного кода для рабочего примера боковой панели iframe, которая не просто накладывается на страницу. Тем не менее, я еще не смог преодолеть вышеупомянутую ошибку Gmail, хотя это может и не быть проблемой для вас. Я просто загружал контент через iframe src, а не вставлял содержимое с помощью document.getElementById(iframeId).contentDocument.body.innerHTML.