Question

我正在尝试创建一个使用一些变量的chrome扩展程序。代码是

/************************************** */
var link = "about: blank";
var title = "Nothing here!";
var mainimage = null;

//Get active tab url and name
chrome.tabs.query({active: true, lastFocusedWindow: true}, function(tabs) {
    var tab = tabs[0];

    link = tab.url;
    title = tab.title;

    var linksection = document.getElementById("url");
    var titlesection = document.getElementById("title");

    linksection.innerText = link;
    titlesection.innerText = title;
});

//Get screenshot of the visible section on the active tab
chrome.tabs.captureVisibleTab(null, {}, function(screenshot) {
    var image = document.getElementById("screenshot");

    image.src = screenshot;

    mainimage = screenshot;
});

// /************************************* */
//Color detection code
var screenshot = document.getElementById("screenshot");
var colors = [];

screenshot.addEventListener('load', function() {
    Vibrant.from(screenshot).getPalette().then(function(palette) {

        for(var swatch in palette) {
            if(palette.hasOwnProperty(swatch) && palette[swatch]) {
                var hexcolor = palette[swatch].getHex();

                var div = document.createElement('div');
                div.style.width = "150px";
                div.style.height = "120px";
                div.style.background = hexcolor;

                document.getElementById('color_scheme').appendChild(div);

                colors.push(hexcolor);
            }
        }
    });
});

/****************************************** */
//Fonts Script Execution
chrome.tabs.executeScript({
    file: '/src/fonts.js'
});

//Receiving fonts from content scripts
var receivedfonts = [];
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
    if (request.greeting == "Wanderer Fonts Detection") {
        receivedfonts = request.data;

        sendResponse({farewell: "goodbye"});

        for (var i = 0; i < receivedfonts.length; i++) {

            var li = document.createElement('li');
            var lifont = document.createTextNode(receivedfonts[i]);

            li.className = "capitalize";
            li.appendChild(lifont);
            document.getElementById('fonts_used').appendChild(li);
        }
    }
});

/****************************************** */
//Saving variabes: link, title, mainimage, receivedfonts, colors
var data = {name: title, url: link, image: mainimage, colorscheme: colors, fonts: receivedfonts};

console.log(data);

chrome.storage.local.set({'first': data}, function() {
    console.log("data saved!");
});

chrome.storage.local.get(['first'], function(result) {
    console.log(result.first);
});

弹出html可以完美显示数据。但是，在代码末尾的data变量在顶部显示初始化的数据。fonts变量，name，image和url变量都显示为null或初始值。变量本身在不同的调用中被更改。

谁能告诉我发生了什么事？

这是console.log响应：

Object
colorscheme: (6) ["#3364d4", "#f0a48c", "#17316d", "#947c8c", "#88a0c6", "#1a387e"]
fonts: []
image: null
name: "Nothing here!"
url: "about: blank"
__proto__: Object

JavaScript变量未更新？

0 个答案: