В моем расширении Chrome есть ошибка

Question

В моем расширении Chrome есть ошибка, которую я не могу решить. Когда пользователь отправляет данные после установки расширения, он хранится с chrome.storage.sync.set(). Когда пользователь нажимает кнопку «Создать» в Gmail, сценарий содержимого отправляет сообщение, в которое в ответ отправляются введенные данные. При первом загрузке Gmail данные возвращаются «undefined». Единственный способ, которым я смог это исправить, - добавить «alert()»; в мой код. Это действительно неудобно, и я не могу найти никаких других способов исправить это.

background.js

var name, title, company, email, photo, phone; 

chrome.runtime.onConnect.addListener(function(port) { 
    console.assert(port.name == "knockknock"); 
    port.onMessage.addListener(function(msg) { 


     chrome.storage.sync.get("name",function(data){ 
     name = data.name; 
     }); 

     chrome.storage.sync.get("title",function(data){ 
     title = data.title; 
     }); 

     chrome.storage.sync.get("company",function(data){ 
     company = data.company; 
     }); 

     chrome.storage.sync.get("email",function(data){ 
     email = data.email; 
     }); 

     chrome.storage.sync.get("photo",function(data){ 
     photo = data.photo; 
     }); 

     chrome.storage.sync.get("phone",function(data){ 
     phone = data.phone; 
     }); 

     alert(); 

    if (msg.reason == "getInfo"){ 

     port.postMessage({name: name, title: title, company: company, email: email, photo: photo, phone: phone}); 

    } 
    }); 
}); 

setup.js (Это где данные первоначально введены)

$('.ee-required').slideUp(400,function(){ 
       $('.ee-form-saved').slideDown(); 
       var name = document.getElementsByClassName('ee-form-name')[0].value; 
       var title = document.getElementsByClassName('ee-form-title')[0].value; 
       var company = document.getElementsByClassName('ee-form-company')[0].value; 
       var email = document.getElementsByClassName('ee-form-email')[0].value; 
       var photo = document.getElementsByClassName('ee-form-photo')[0].value; 
       var phone = document.getElementsByClassName('ee-form-phone')[0].value; 

       chrome.storage.sync.set({'name': name}); 
       chrome.storage.sync.set({'title': title}); 
       chrome.storage.sync.set({'company': company}); 
       chrome.storage.sync.set({'email': email}); 
       chrome.storage.sync.set({'photo': photo}); 
       chrome.storage.sync.set({'phone': phone},function(){ 
        setTimeout(function(){window.close()},1000); 
       }); 
      }); 

content.js (Это извлекает данные из background.js в chrome.runtime)

var name, title, company, email, photo, phone; 

    function getSignature(){ 
     var port = chrome.runtime.connect({name: "knockknock"}); 
     port.postMessage({reason: "getInfo"}); 
     port.onMessage.addListener(function(msg) { 

      name = msg.name; 
      title = msg.title; 
      company = msg.company; 
      email = msg.email; 
      photo = msg.photo; 
      phone = msg.phone; 
      console.log(name + " " + title + " " + company + " " + email + " " + photo + " " + phone); 

     }); 
    } 
    getSignature(); 

Answer 1

переменные name, title, company, email, photo, phone не установлены в ваших background.js потому chrome.storage.sync.get является асинхронным. Вместо сохранения каждой переменной в ее собственном объекте вы должны сохранить их в одном.

//setup.js 
var data = { 
    "name": name, 
    "title": title, 
    "company": company, 
    "email": email, 
    "photo": photo, 
    "phone": phone 
}; 
chrome.storage.sync.set({'data': data},function(){ 
        setTimeout(function(){window.close()},1000); 
       }); 

//background.js 
port.onMessage.addListener(function(msg) { 
     if (msg.reason == "getInfo"){ 
      chrome.storage.sync.get("data",function(data){ 
       port.postMessage(data); 
      }); 
     } 
});