0

我正在尝试创建一个基本的 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 对象的位置？
4

1 回答 1

0

强制整个布局移动以便为工具栏腾出空间可能证明是不可预测的。相反，我建议你使用一个滑动工具栏，当你不悬停在它上面时它会自动隐藏。

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

于 2017-06-18T21:01:53.187 回答