Добавление панели с кнопками (расширение)

Question

Как добавить панель с кнопками в начало тела, используя js. Панель будет добавлена ​​ко всем сайтам. В манифесте. json У меня есть all_urls

Answer 1

Чтобы добавить кнопки на страницу html с обычным javascript, вы можете сделать это следующим образом:

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

Полезные ссылки :

добавление тела

создание div с классом