javascript - 如何将用户的图像设置为 chrome 扩展的背景

Question

所以，这个选项应该做的是让用户上传一个文件（一个图像）<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(){
     document.getElementById("main-background-image").style.backgroundImage = "url(" + reader.result + ")";        
   }

   if(file){
      reader.readAsDataURL(file);
    }else{
    }
} 

只要用户不点击离开，这再次为当前选项卡设置图像。是否可以保留用户的背景图像以供将来和其他选项卡使用？

标签： javascripthtmlgoogle-chrome-extension

Answer 1

我的解决方案基于另一个 stackoverflow 问题： 将上传的图像保存到 localStorage (chrome extension)

var input = document.getElementById('getval');
    input.onchange = function(evt){
        var tgt = evt.target || window.event.srcElement, 
            files = tgt.files;

        if (FileReader && files && files.length) {
            var fr = new FileReader();
            fr.onload = function () {
                localStorage['foo'] = fr.result;
            }
            fr.readAsDataURL(files[0]);
        }
    }

在我插入这段代码之后：

window.onload=function(){
var el = document.querySelector('body');
el.style.backgroundImage = 'url(' + localStorage['foo'] + ')';