javascript – How to change the background of a website from an extension

Question:

Html

  <p>Укажите цвет фона: <input type="color" name="bg" id="color" value="#262626">
  <br><input type="submit" name="submit" value="Применить" id="submit" class="clrbtn">`введите сюда код`

CSS

:root {
    --background-color: #2cba92;
}

html {
  background-size: 100% 100% !important;
  background-color: var(--background-color) !important;
}

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);

const inputs = [].slice.call(document.querySelectorAll('input')); // 2
inputs.forEach(input => input.addEventListener('change', handleUpdate)); // 4

document.addEventListener('DOMContentLoaded', function() {
    var submit = document.getElementById('submit');
    submit.addEventListener('click', function() {
        root.style.setProperty('--background-color', '#88d8b0');
        alert('Успешно!');
    });
});

It is required that the background on the site changes in this way (remember, all this is done in the extension), without reloading it. But nothing works. What's wrong?

Answer:

Это будет работать?

document.addEventListener('DOMContentLoaded', function() {
    var submit = document.getElementById('submit');
    submit.addEventListener('click', function() {
        document.body.style.background = document.getElementById('color').value;
    });
});

body {
    background-color: #2cba92;
}

html {
  background-size: 100% 100% !important;
  background-color: var(--background-color) !important;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
   <p>Укажите цвет фона: <input type="color" name="bg" id="color" value="#262626">
   <br>
   <input type="submit" name="submit" value="Применить" id="submit" class="clrbtn">
</body>
</html>

Post Views: 0