javascript - 将 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 中，这样您就可以灵活地将其放置在侧边栏旁边。但是，请注意，在某些边缘情况下，您可能会破坏内容的外观，因为您无法保证一旦强制其宽度变小，它就会表现良好。