Question

我正在制作Chrome扩展程序，并且在其中使用了chrome.storage API。我没有在此处放置完整的代码（超过200行），但是我放置了足够的内容，可能会显示我要执行的操作。

内容脚本（由于我的扩展名，该脚本已插入网页）：

....
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返回的是未定义的。这很奇怪，因为我似乎已经正确设置了所有内容。（image of the console here）

Answer 1

根据文档（https://developer.chrome.com/extensions/storage），Chrome存储API似乎异步运行。最有可能发生的是console.log在将项目放入存储之前触发，这就是为什么您不确定的原因。

Answer 2

感谢@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])
    }

}

数组长度返回未定义？

2 个答案: