Как изменить фон сайта из расширения

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;
}

JS

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('Успешно!');
    });
});

Требуется, чтоб таким образом менялся фон на сайте (напомню, делается все это в расширении), без его перезагрузки. Но ничего не получается. Что не так?