My goal is to inject some custom HTML and CSS into YouTube in order to create a column on the right side that shifts all content towards the left. Essentially, I am trying to replicate the functionality of the Inspect Tool in Chrome.
I am working on a Chrome extension, so my current code setup looks like this:
background.js:
...
chrome.tabs.executeScript(null, {file: 'column.js'});
chrome.tabs.insertCSS(null, {file: 'column.css'});
...
column.js:
var div = document.createElement("div");
div.id = 'column';
document.body.appendChild(div);
column.css:
#column {
background-color: black;
position: absolute;
right: 0;
width: 50%;
height: 100%;
z-index: auto;
}
However, the current implementation simply overlays a column on top of the webpage rather than shifting the existing content over.