Insert DOM object into any webpage

Question

I am trying to create an basic chrome extension that adds a toolbar to the left hand side of any webpage.

I am wanting to create space on the left hand side which I can then fill with DOM elements.

I create space using 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");

This creates space on the left hand side of most webpages but not all. I then try to add an element to the webpage:

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

This seems to add an element to the bottom of the webpage but has a few strange errors as well. In some webpages it will not show at the bottom, in some webpages it will create multiple times. I have almost not figured out how to move this into the left margin that I created for it.

I am currently calling the script to alter the page from an eventPage.js file:

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

And to finally get to my questions:

1. Can you create objects inside a margin?
2. How can you apply the CSS (moving the page to create left hand space) to the entirety of any webpage?
3. How do you chose where to put the DOM object if you do not know what elements the page will have (because it is supposed to work on all)?

Answer 1

Forcing the entire layout to move in order to make space for your toolbar may prove unpredictable. Instead, I suggest you go with a sliding toolbar which auto hides when you are not hovering on it.

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

EDIT:

However, if you must insert the sidebar to the page, you could try the following:

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

This would move all the content of the page into a new div, which would give you flexibility in positioning it next to the sidebar. However, be warned that on some edge cases, you may result in breaking the content's look, since you can't promise that it would behave nicely once you force it to smaller width.