There is a bug in my Chrome Extension

Question

There is a bug in my Chrome extension which I can't solve. When a user submits data upon installation of the extension, it is stored with chrome.storage.sync.set(). When the user clicks the 'Compose' button in Gmail, the content script sends a message, to which the entered data is sent in a response. The first time I load Gmail, the data returns 'undefined'. The only way I have been able to fix it is by adding 'alert();' into my code. It's really inconvenient and I cannot find any other ways to fix it.

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 (This is where data is initially entered)

 $('.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 (This retrieves the data from background.js in 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();

Read and learn: https://stackoverflow.com/questions/18699075/callback-returns-undefined-with-chrome-storage-sync-get / https://stackoverflow.com/questions/11688171/after-calling-chrome-tabs-query-the-results-are-not-available / https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Rob W, Jul 17 '16 at 02:21
Note that you can call `chrome.storage.*.get` in the content script itself. — Xan, Jul 18 '16 at 08:57

score -1 · Answer 1 · answered Jul 18 '16 at 08:46

The variables name, title, company, email, photo, phone are not set up in your background.js because chrome.storage.sync.get is asynchronous. Instead of saving every variable in it's own object you should save them in one.

//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);
          });
      }
});

There is a bug in my Chrome Extension

1 Answers1