Длина массива возвращает неопределенное?

Question

Я делаю расширение для Chrome и использую в нем API chrome.storage. Я не размещаю здесь полный код (более 200 строк), но достаточно, чтобы, вероятно, показать, что я пытаюсь сделать.

Content Script (скрипт, добавленный в веб-страницу из-за моего расширения) :

....
var videos = []
var imgs = []
var img = this.getElementsByTagName('img')
var video = this.getElementsByTagName('video')
for (i = 0; i <img.length; i++){
    if (img[i].className == "FFVAD"){
        imgs.push(img[i].src)
        addselection(img[i].parentNode.parentNode)
    }
}
for (i = 0; i <video.length; i++){
    if (video[i].className == "tWeCl"){
        videos.push(video[i].src)
        addselectionV(video[i].parentNode.parentNode)
    }
}

function addselectionV(e){
    e.style.border = "2px solid red"
    console.log(videos)
    for (var i = 0; i < videos.length; i++){
        chrome.storage.sync.set({['video'+i]: videos[i]}, function() {
          console.log('Value is set to ' + videos[i] + ' and key is set to ' + ['video'+i]);
    })

   chrome.storage.sync.set({vcount: videos.length}, function() {
      document.querySelector('.selectionbar').innerHTML = "Item(s) selected: "+videos.length
    });

}

Я заметил, что это не работает, поэтому я добавил console.log(videos), чтобы напечатать элемент в массиве. Это было там, так что я сделал console.log(videos[0]), и это тоже было там. Я заглянул в консоль разработчика и заметил, что во время моего цикла for, videos.length возвращает неопределенное значение. Что странно, потому что я, кажется, все правильно настроил. ( изображение консоли здесь )

Answer 1

Спасибо @NickCodes за сообщение, что chrome.storage является асинхронным. Итак, я изменил свой код, сделав его асинхронным, и он прекрасно работает!

function addselection(e){

    var fetchData = function () {
        return new Promise(function (resolve, reject) {
            resolve();
        });
    };
    function appendOutput (i,item) {
        fetchData(item).then(function () {
            chrome.storage.sync.set({['image'+i]: item}, function() {
                console.log('Value is set to ' + item + ' and key is set to ' + 'images'+i);
            })
            chrome.storage.sync.set({count: i}, function() {
                c = i + 1
                document.querySelector('.selectionbar').innerHTML = "Item(s) selected: "+ c
            });
        });
    }
    for (var i = 0; i < imgs.length; i++){
        console.log(imgs[i])
        appendOutput(i,imgs[i])
    }

}

Answer 2

На основании документации (https://developer.chrome.com/extensions/storage) похоже, что API-интерфейс хранилища Chrome работает асинхронно. Скорее всего, происходит запуск console.log перед помещением элемента в хранилище, поэтому вы получаете неопределенное значение.