javascript - 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)?