Как использовать chrome.storage.sync.get для отображения загруженного изображения в качестве фона для расширения Chrome?

Question

HTML:

<input id="background-image" type=file></input>^

JS:

    document.getElementById('background-image').addEventListener('change', 
    readURL, true);
    function readURL(){
       var file = document.getElementById("background-image").files[0];
       var reader = new FileReader();
       var readFile = reader.readAsDataURL(file);
       reader.onloadend = function(){
           chrome.storage.sync.get(["user-background-image"],function(){
            document.getElementById("main-background- 
 image").style.backgroundImage = "url(" + reader.result + ")";
           });
       document.getElementById("main-background-image").style.backgroundImage = 
    "url(" + reader.result + ")";        
        }
       if(file){
          //reader.readAsDataURL(file);

        }else{
        }
        chrome.storage.local.set({"user-background-image":reader.result}, 
    function(){
            console.log("Set");
        });
    }

Итак, что должно произойти, это то, что пользователь загружает изображение, а расширение устанавливает его в качестве фона, но у меня естьЧтобы повторно загрузить изображение, есть ли способ, чтобы изображение пользователя было фоновым изображением расширения без его сброса при каждом открытии новой вкладки или закрытии текущей вкладки?