Adding a panel with buttons (expansion)

Question

How can I add a panel with buttons to the beginning of body using js. The panel will be added to all sites. In manifest.json I have all_urls

Answer 1

To add buttons to a html page with plain javascript, you can do it like that:

//creates a panel    
function createPanel(){
  let panel =  document.createElement("div"); //your panel element
  panel.setAttribute("class","panelClass"); //define an css class for styling
  panel.setAttribute("id","panelId"); //give the element an ID for better dom selection
  document.body.prepend(panel); //add your panel before all other elements to the body
}


/** 
 * creates button
 * elementId : id of the element where you want to append the button
*/
function addButtonToElement(elementId){

    let elementToAddButton = document.getElementById(elementId); //element you want to append your button
    let button =  document.createElement("button"); //create new button dom element
    let buttonText = document.createTextNode("New Button"); //create a text element

    button.appendChild(buttonText); //adds the text element to the button
    elementToAddButton.appendChild(button)
}

createPanel()
addButtonToElement("panelId")

jsfiddle Code

Usefull links:

body appending

create div with class