Füllen Sie TextBox mit Daten auf Seite laden mit Javascript

Question

Ich arbeite mit einer Google-Erweiterung, die mir erlaubt, einen neuen Tab mit einem Formular zu öffnen. Nachdem das Formular ausgefüllt und gespeichert wurde, sollte jedes Mal, wenn ich diese Registerkarte erneut öffne, das Formular mit den zuvor gespeicherten Daten ausgefüllt werden.

Hier ist, wie die Daten gespeichert werden: WORKS!

function saveCheckoutData() { 

    var vName = document.getElementById('txbx_name').value; 

    chrome.storage.sync.set({'name': vName}, function() { 
     console.log(vName); 
    }) 
} 

Hier ist, wie ich die Daten erhalten: WORKS!

function getdata() {  
     chrome.storage.sync.get('name', function(data) { 
      var name = data.name; 
      if(name != null){ 
       document.getElementById("txbx_name").value = name; 
      } 
     }); 
} 

Der obige Code auf die Schaltfläche klicken aufgerufen wird und funktioniert perfekt!

Aber sobald ich versuche, dies zu tun, wenn die Lasche es nicht arbeiten (die Registerkarte ist nichts in der Textbox, aber es wird geöffnet) geöffnet wird: funktioniert nicht!

function configAutofill(){ 

    var newURL = "autofill_data.html"; 
    chrome.tabs.create({ url: newURL }); 

    chrome.storage.sync.get('name', function(data) { 
     var name = data.name; 
     if(name != null){ 
      document.getElementById("txbx_name").value = name; 
     } 
    }); 
} 

Hat jemand eine Idee, warum diese Linien funktionieren nicht, wenn Sie einen neuen Tab zu schaffen?

Vielen Dank im Voraus.

Answer 1

Hier ist eine Frage für Sie.

Nachdem Sie eine neue Registerkarte erstellt haben, greifen Sie auf document.getElementById zu. Ja, aber welches Dokument?

In Ihrem Fall wäre es die Seite create aufrufen - die ist nicht die erstellte Seite.

In Ihrem Fall scheint es, als ob Sie eine Seite öffnen, die Teil der Erweiterung ist. Dann sollten Sie nur Code einfügen, der beim Laden ausgeführt wird.

Sie möchten document.readyState überprüfen:

if (document.readyState === "loading") { 
    document.addEventListener('DOMContentLoaded', getdata); 
} else { 
    getdata(); 
} 

Wenn Sie versuchen, dies mit einer Webseite zu tun, werden Sie ein Content-Skript benötigen. Auch diese werden normalerweise ausgeführt, nachdem DOM geparst wurde - rufen Sie einfach getdata() auf der obersten Ebene auf.