Ad

Google Options Page Not Saving - Javascript

- 1 answer

Hey guys I'm building an extension at the minute, right now I'm stuck on the google options page. I've created an HTML form, options.js, manifest.json and an options.html. The problem I get is saving data to the local storage. I receive the following error:

Uncaught RangeError: Maximum call stack size exceeded.

I would appreciate the help :) Also can someone point me in the direction of a tutorial that shows how to access specific elements of a page or how to trigger & execute web page events multiple of times. Thanks> My code is below:

Options 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
  }

}
Ad

Answer

I think your issue is that you are trying to pass an object into the storage method. You need to stringify your object then set it, otherwise you get the Range Error.

I made a working example for you to reference here: https://jsfiddle.net/joes4gfe/9/

I had to use localStorage instead of chrome.storage, but I am confident it will work the same, as I was getting the same error when I started.

The code shows how to use JSON.stringify to solve the error:

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

I did make quite a few modifications to your code, so make sure you check out the example.

Ad
source: stackoverflow.com
Ad