时间戳

首页 > 解决方案 > 如何制作一个 chrome 扩展，其表单即使在关闭/打开扩展后仍保持填充状态？

javascript - 如何制作一个 chrome 扩展，其表单即使在关闭/打开扩展后仍保持填充状态？

问题描述

我的 chrome 扩展程序中有表格。我想制作我的扩展程序，以便当用户填写表单并按下保存按钮时，下次关闭并再次打开扩展程序时表单保持填写状态。

这是代码：

清单.json：

{
"name": "DRIP",
"version": "1.0",
"manifest_version": 2,
"description": "DRIP is an automation tool for purchasing limted items",
"permissions": ["storage", 
    "tabs",
    "https://www.googleapis.com/"
],

"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",

"browser_action": {
    "default_popup": "popup.html"
},

"background": {
    "scripts": ["background.js"],
    "persistent": true
}
}

background.js：（没有代码，我只是在文件夹中）

popup.js：

const profile = document.forms.profile
var fName = profile.elements.fName

document.getElementById("save").addEventListener("click", save)

function save() {
chrome.storage.local.set({"fName": fName.value}, function(){
  alert("saved" + fName.value)
});
}

  var fNameSaved = 
    chrome.storage.local.get("fName", function(data) {
    alert('Value currently is ' + document.getElementById("fName").value)
  });

  document.getElementById("fName").value = fNameSaved


//next step = keep form filled after opening/closing app

popup.html：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>    
        <script language='javascript' src='popup.js' defer></script>
    </head>
        <body>
            <form name="profile">
                <input id="fName" name="fName" type="text" placeholder="First Name">
                <input id="lName" name="lName" type="text" placeholder="Last Name">
                <input id="save" name="save" type="button" value="Save">
            </form>
        </body>
</html>

非常感谢您的帮助，谢谢！

标签： javascripthtml

解决方案

尝试像这样更改它

    chrome.storage.local.get("fName", function(data) {
      if (data.hasOwnProperty("fName")) {
      document.getElementById("fName").value = data.fName;
    }
  });

还要检查你在数据中得到了什么，就像 data.value 等

推荐阅读