Вставьте объект DOM в любую веб-страницу

Question

Я пытаюсь создать базовое расширение Chrome, которое добавляет панель инструментов в левой части любой веб-страницы.

Я хочу создать пространство с левой стороны, которое затем смогу заполнить элементами DOM.

Я создаю пространство с помощью style.setProperty():

document.body.style.removeProperty("transform");
document.body.style.removeProperty("-webkit-transform");

document.body.style.setProperty("width", "90%", "important");
document.body.style.setProperty("margin-left", "10%", "important");

Это создает пространство на левой стороне большинства веб-страниц, но не на всех. Затем я пытаюсь добавить элемент на веб-страницу:

var toolbar = document.createElement("div");
toolbar.style.setProperty("color", "red");
toolbar.style.setProperty("left", "-10%");
toolbar.style.setProperty("top", "0px", "important");
var testText = document.createTextNode("Buttons will go here");

toolbar.appendChild(testText);

document.body.appendChild(toolbar);

Кажется, что это добавляет элемент внизу веб-страницы, но также имеет несколько странных ошибок. На некоторых веб-страницах он не будет отображаться внизу, на некоторых веб-страницах он будет создаваться несколько раз. Я почти не понял, как переместить это в левое поле, которое я создал для него.

В настоящее время я вызываю скрипт для изменения страницы из файла eventPage.js:

chrome.webNavigation.onCompleted.addListener(function (details) {
    chrome.tabs.executeScript(details.tabId, {
        file: "createSpace.js"
    });
});

И, наконец, добраться до моих вопросов:

1. Можете ли вы создавать объекты внутри поля?
2. Как вы можете применить CSS (перемещение страницы для создания левого пространства) ко всей веб-странице?
3. Как вы выбрали, куда поместить объект DOM, если вы не знаете, какие элементы будут на странице (потому что она должна работать на всех)?

Answer 1

Принудительное перемещение всего макета, чтобы освободить место для панели инструментов, может оказаться непредсказуемым. Вместо этого я предлагаю вам использовать скользящую панель инструментов, которая автоматически скрывается, когда вы не зависаете на ней.

#slideout {
  position: fixed;
  background-color: #aaa;
  border: 1px solid #aaa;
  top: 40px;
  left: 0;
  height: 50px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

#tab {
  transform: rotate(90deg);
  transform-origin: 22% 89%;
  float: left;
}

#slideout_inner {
  position: fixed;
  background-color: #aaa;
  height: 100vh;
  width: 250px;
  top: 0px;
  left: -250px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout:hover {
  left: 250px;
}
#slideout:hover #slideout_inner {
  left: 0;
}

<div id="slideout">
  <div id="tab">Pull</div>
  <div id="slideout_inner">
    <ul>
      <li>Button 1</li>
      <li>Button 2</li>
      <li>Button 3</li>
      <li>Button 4</li>
      <li>Button 5</li>
    </ul>
  </div>
</div>

РЕДАКТИРОВАТЬ:

Однако, если вам нужно вставить боковую панель на страницу, вы можете попробовать следующее:

function insertSidebar() {
  // Get all children of the body, and convert to array
  var bodyElements = [].slice.call(document.body.children);

  var sidebar = document.createElement('div');
  sidebar.id = 'my-sidebar';

  // insert whatever you want into the sidebar

  sidebar.style.width = '20%';
  sidebar.style.height = '100vh';
  sidebar.style.backgroundColor = '#aaa';
  sidebar.style.position = 'fixed';
  sidebar.style.top = '0';
  sidebar.style.left = '0';

  var contentContainer = document.createElement('div');
  contentContainer.id = 'content-container';

  contentContainer.style.position = 'reltive';
  contentContainer.style.top = '0';
  contentContainer.style.left = '20%';

  // Move the elements to the contentContainer div
  bodyElements.forEach(x => contentContainer.appendChild(x));

  document.body.appendChild(sidebar);
  document.body.appendChild(contentContainer);

  return sidebar;
}

Это переместит все содержимое страницы в новый div, что даст вам гибкость в размещении его рядом с боковой панелью. Тем не менее, имейте в виду, что в некоторых крайних случаях вы можете нарушить внешний вид содержимого, поскольку вы не можете пообещать, что оно будет хорошо себя вести, если вы заставите его уменьшиться.