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"
    });
});

最后回答我的问题：

您可以在边距内创建对象吗？
如何将CSS（将页面移动以创建左侧空间）应用于任何网页？
如果您不知道页面将具有哪些元素（因为它应该适用于所有元素），您如何选择放置DOM对象的位置？

Answer 1

强制整个布局移动以便为工具栏腾出空间可能无法预测。相反，我建议你使用一个滑动工具栏，当你没有在它上面徘徊时它自动隐藏。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

修改

但是，如果您必须将侧边栏插入页面，则可以尝试以下操作：

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

将DOM对象插入任何网页

1 个答案: