Как установить изображение пользователя в качестве фона для расширения Chrome
Итак, эта опция должна позволить пользователю загружать файл (изображение) с <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{
}
}
Опять же, это устанавливает изображение для текущей вкладки, если пользователь не щелкает мышью. Можно ли сохранить фоновое изображение пользователя для будущих и других вкладок?
Извините за вопрос, но я не уверен, где бы я назначил reader.results в операторе if или где-то еще? Чтобы назначить reader.result, это должно быть что-то вроде `localStorage [" background-image "] = reader.result;`.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Мое решение было основано на другом вопросе о переполнении стека: Сохранение загруженного изображения в localStorage (расширение chrome)
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'] + ')';
Просто сохраните reader.result в chrome.storage.local (асинхронный) или localStorage (синхронный).