How to insert sidebar inside the current page to show output?

Question

My Chrome extension copy text from the current page and show that inside a box on the left side of the current page, which will remain fixed even if I scroll the current page. The code is:

content.js

    string=[];i=0;
function doc_keyUp(e) {
if (getSelectionText() != "")  {
if (e.key === '1') {
                   string[i]=string+getSelectionText(); 
                    view = window.open("","Viewer", "width=400,height=600"); //"_parent",   
                    
                    edit = document.createElement("div");   
            
                    edit.textContent = string;  
                    view.document.body.appendChild(edit);                   
                   } 
                                }
                      } // doc_keyUp(e)
console.log('The program has started!!!');  
// register the handler 
document.addEventListener('keyup', doc_keyUp, false);                              

function getSelectionText() {
    var text = "";
     text = window.getSelection().toString();
    if (window.getSelection) {
        text = window.getSelection().toString();
    } 
    else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;    
}


                                               
                                               

manifest.json

{
  "name": "",
  "description": "",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["tabs"]
}   

Now I have a window which pops up, but I want to have that window inside the current page. For example see the below image:

See the "B" is the current page, and "A" is another part that will remain same even if you scroll "B". I want to show in box like "A".

What is the name of such things? How can I do that?

PS: The side bar should not hide the current page, both should be completly visible.

COMMENT 1: We reqiure a dunamic solution, since:

document.querySelector('body').style.position = "absolute"; fixes the problem for wikipedia, but as I said, there are numerous ways different websites could've been implemented - there can be all kinds of wacky absolute/fixed/sticky positioned elements some sites could be using, that could go over your sidebar or even affect your sidebar's styling. The only way to make it work is to test it on multiple different pages, see what breaks and iteratively apply more and more fixes until you are satisfied. – Swiffy

Answer 1

Here's one way to do it, although the actual solution depends on how the website you want to inject the sidebar in is constructed. Here we just use margin-left to move the website content out of the way of the sidebar. Other methods could include floating the webpage contents as well as the sidebar to left. The div some_webpage represents, e.g. the body element of some webpage.

function addSideBar() {
  let barWidth = 100;

  // Make sidebar
  let div = document.createElement("div");
  div.style.position = "fixed";
  div.style.left = "0";  
  div.style.top = "0";
  div.style.width = `${barWidth}px`;
  div.style.height = "100vh";
  div.style.zIndex = "9999";
  div.style.backgroundColor = "white";
  div.style.color = "black";

  div.innerHTML = "<p>This is a sidebar</p>";

  // Float the current page to right
  document.querySelector('#some_webpage').style.marginLeft = `${barWidth}px`;
  document.querySelector('#some_webpage').style.maxWidth = `calc(100vw - ${barWidth}px)`;
  document.querySelector('body').style.position = "absolute";


  // Inject to current page
  document.querySelector('#some_webpage').prepend(div);
}

<div id = "some_webpage">
  <h1> Some webpage header </h1>
  <p> Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content textSome webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text  Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text </p>
  <button onClick="addSideBar()">Add sidebar</button>
</div>

Content script

let barWidth = 100;

// Make sidebar
let div = document.createElement("div");
div.style.position = "fixed";
div.style.left = "0";  
div.style.top = "0";
div.style.width = `${barWidth}px`;
div.style.height = "100vh";
div.style.zIndex = "9999";
div.style.backgroundColor = "white";
div.style.color = "black";

div.innerHTML = "<p>This is a sidebar</p>";

// Float the current page to right
document.querySelector('body').style.marginLeft = `${barWidth}px`;
document.querySelector('body').style.maxWidth = `calc(100vw - ${barWidth}px)`;
document.querySelector('body').style.position = "absolute";


// Inject to current page
document.querySelector('body').prepend(div);

manifest

{
  "name": "asd",
  "description": "asd",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [ 
  {
    "js": ["index.js" ],
    "matches": ["*://*.stackoverflow.com/*"]
  }]
}