谷歌选项页面未保存-Javascript

Google options Page not saving - Javascript

本文关键字：保存 -Javascript 选项 谷歌      更新时间：2023-09-26

嘿，伙计们，我现在正在构建一个扩展，现在我被困在谷歌选项页面上了。我创建了一个HTML表单options.js、manifest.json和options.HTML。我遇到的问题是将数据保存到本地存储。我收到以下错误：

未捕获的范围错误：超过了最大调用堆栈大小。

我将感谢您的帮助：）还有人可以给我指一个教程的方向，该教程展示了如何访问页面的特定元素或如何触发&多次执行网页事件。谢谢>我的代码如下：

选项HTML-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User Details Page</title>
</head>
<body>
<div>
    <h1>Welcome to Project Hercules</h1>
</div>
<div>
    <h4>Below is a form, please enter in all the relevant details</h4>
</div>
<div id="status"></div>
<div>
    <form>
        <fieldset>
            <h1>THE FORM</h1>
            <legend>Personal Details</legend>
            First Name:<br>
            <input type="text" name="firstName">
            <br>
            Surname:<br>
            <input type="text" name="surName">
            <br>
            1st Line of Address:<br>
            <input type="text" name="address1">
            <br>
            City:<br>
            <input type="text" name="city">
            <br>
            PostCode:<br>
            <input type="text" name="postCode">
            <br>
            Email:<br>
            <input type="email" name="userEmail">
            <br>
            Mobile Number:<br>
            <input type="tel" name="userMOB">
            <br>
        </fieldset>
        <br>
        <fieldset>
            <h2>PayPal</h2>
            <br>
            <legend>PayPal Email & Password</legend>
            Email:<br>
            <input type="email" name="payEmail">
            <br>
            Password:<br>
            <input type="password" name="payPass">
            <br>
            <button id="save">Save</button>
            <br>
            <button id="wipe">Wipe</button>
            <br>
        </fieldset>

    </form>
</div>
<script src="options.js"></script>
</body>
</html>

Options.js

function save_options(){
    //this extracts data from the document(optionsPage) and sets them as variables
    var firstName = document.getElementsByName('firstName').value;
    var surName = document.getElementsByName('surName').value;
    var addressF = document.getElementsByName('address1').value;
    var userCity = document.getElementsByName('city').value;
    var postCode1 = document.getElementsByName('postCode').value;
    var email1 = document.getElementsByName('userEmail').value;
    var mobile = document.getElementsByName('userMOB').value;
    var payPEmail = document.getElementsByName('payEmail').value;
    var payPassword = document.getElementsByName('payPass').value;
//sets variables within the object using variables defined in the function
    chrome.storage.local.set({
        savedFirstName: firstName,
        savedSurName: surName,
        savedAddress: addressF,
        savedCity: userCity,
        savedPostCode: postCode1,
        savedEmail: email1,
        savedMobile: mobile,
        savedPaypal: payPEmail,
        savedPayPass: payPassword
    }, function update(){
        //updates the user that their details have been saved
        var status = document.getElementById('status');
        status.textContent = 'Options saved.';
        setTimeout(function(){
            status.textContent='';
        }, 750);
    });
    console.log(save_options());
}
//Restores the form to what it once was
//stored in chrome.storage
function restore_options(){
    chrome.storage.local.get({
        savedFirstName: '',
        savedSurName: '',
        savedAddress: '',
        savedCity: '',
        savedPostCode: '',
        savedEmail: '',
        savedMobile: '',
        savedPaypal: '',
        savedPayPass: ''
},
    function(items){
        document.getElementsByName('firstName').value = items.savedFirstName;
        document.getElementsByName('surName').value = items.savedSurName;
        document.getElementsByName('address1').value = items.savedAddress;
        document.getElementsByName('city').value = items.savedCity;
        document.getElementsByName('postCode').value = items.savedPostCode;
        document.getElementsByName('userEmail').value = items.savedEmail;
        document.getElementsByName('userMOB').value = items.savedMobile;
        document.getElementsByName('payEmail').value = items.savedPaypal;
        document.getElementsByName('payPass').value = items.savedPayPass;
    });
}
document.addEventListener('DOMContentLoaded', restore_options());
document.getElementById('save').addEventListener('click',save_options());

Manifest.json

"manifest_version": 2,
  "name": "Project Hercules",
  "description": " ",
  "version": "0.894",
  "permissions":[
    "storage"
  ],
  "browser_action": {
    "default_icon": "Icon 5.png"
    },
  "options_ui": {
    "page": "optionsPage.html",
    "chrome_style": true
  }
}

我认为您的问题是试图将对象传递到存储方法中。您需要将对象字符串化，然后进行设置，否则会出现范围错误。

我做了一个工作示例供您参考：https://jsfiddle.net/joes4gfe/9/

我不得不使用localStorage而不是chrome.storage，但我相信它也能正常工作，因为我刚开始时也遇到了同样的错误。

代码显示了如何使用JSON.stringify来解决错误：

localStorage.setItem('storedValues', JSON.stringify({
  savedFirstName: firstName,
  savedSurName: surName,
  savedAddress: addressF,
  savedCity: userCity,
  savedPostCode: postCode1,
  savedEmail: email1,
  savedMobile: mobile,
  savedPaypal: payPEmail,
  savedPayPass: payPassword
}));

我确实对你的代码做了一些修改，所以一定要看看这个例子。

相关文章：