使用javascript在页面加载时用数据填充文本框

我正在使用Google扩展，它允许我打开一个包含表单的新选项卡。填写并保存表单后，每次我再次打开此选项卡时，应使用先前保存的数据预先填充表单

以下是如何保存数据：工作

function saveCheckoutData() {

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

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

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

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

以下是我获取数据的方式：有效

function saveCheckoutData() {

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

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

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

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

上面的代码在点击按钮时被调用，并且工作得非常完美

但是，当我尝试打开标签时，它就不起作用了（标签打开了，但文本框中没有任何内容）：不起作用

function saveCheckoutData() {

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

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

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

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

有人知道为什么创建新选项卡时这些行不起作用吗

---

非常感谢。这里有个问题要问你

创建新选项卡后，您可以访问

document.getElementById

。是的，但是哪份文件

在您的情况下，将是调用

create

的页面，该页面不是已创建的页面

在您的情况下，您似乎正在打开一个属于扩展的页面。然后，您应该只在其中包含将在加载时运行的代码

您可能需要检查

文档。readyState

：

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

如果您试图用网页执行此操作，则需要一个内容脚本。同样，这些通常在解析DOM后执行-因此只需在顶层调用

getdata（）

。

请回答主题中的问题：包括一个重复问题的问题。对于Chrome扩展或Firefox WebExtensions，您几乎总是需要包含manifest.json和一些背景、内容和/或弹出脚本/HTML，通常还有网页HTML/scripts。寻求调试帮助的问题（“为什么我的代码没有按我想要的方式工作？”）必须包括：（1）所需的行为，（2）特定的问题或错误，（3）在问题本身中重现它所需的最短代码。另请参阅：、和。