Twitter Bootstrap Question posted in

Trouble storing simple object using Chrome storage API – Twitter bootstrap

I’m trying to use the Google Chrome Storage API (https://developer.chrome.com/extensions/storage) to persist a textarea that acts as a persistent notes field in my plugin

In the HTML I have a handler setup to run save_notes on blur.

I want to fire load_notes() immediately if the textarea is blank. save_notes should save the textarea to object key ‘stored_obj’

I didn’t code it right and it’s not working, anyone see the issue?

notes.js

///// select the text area

// var note_area = document.getElementById("textarea")
var note_area = document.querySelector("#textarea")

//// create a function to save the textarea to local storage
// I'll also want to check & load previously saved notes

;(function load_notes () {
  if (!note_area) {
    note_area.value = chrome.storage.sync.get(stored_obj)
  }
})()

function save_notes () {
  chrome.storage.sync.set({
    stored_obj: note_area
  }, function () {
    console.log("Saved into Chrome Storage")
  })
}

//// setup a blur handler in notes.html to fire function save_notes

notes.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Note Screen</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">

    <script src="scripts/notes.js"></script>


</head>
<body>

<div class="container">

    <ul class="nav nav-tabs">
        <li><a href="index.html">Settings</a></li>
        <li role="presentation" class="active"><a href="#">Notes</a></li>
    </ul>

    <div id="notes-header">

        <h1 id="noteh1">Note Screen</h1>

    </div>

    <hr>

    <div class="row">

        <div class="col-sm-8" id="notes-section">

            <h2>Websurf Notes</h2>
            <p>Write notes here. Reference them to do searches and checks during free time</p>

            <!--<button id='notesave' class="btn btn-primary">Save Notes & Close Tab</button>-->

            <br>

            <textarea name="ntxt" id="notetext" cols="20" rows="20" class="form-control" onblur="save_notes()"></textarea>


        </div>

        <div class="col-sm-4">
            <h2>Override</h2>
            <p>Things that demand an immediate view are the ONLY intended targets of this override</p>


            <div class="form-group">
            <!--<form action="" class="form-control">-->
                <select name="" id="bypass-limit" class="form-control">
                    <option value="">Bypass Time Limit</option>
                    <option value="5">5 minutes</option>
                    <option value="10">10 minutes</option>
                    <option value="15">15 minutes</option>
                    <option value="20">20 minutes</option>
                    <option value="30">30 minutes</option>
                </select>
            </div>

            <div class="form-group">
                <button id="bypass-button" class="btn btn-danger">
                    Bypass Now (action will be logged)
                </button>

            <!--</form>-->
            </div>

        </div>

    </div>

</div>

</body>
</html>
Tags:

2

Answers


  1. 0

    chrome.storage.sync.get() is an asynchronous function just like set() is. You have the proper callback function set up for set(), but not get:

    chrome.storage.sync.get("stored_obj", function(result) { note_area.value = result } );

    That is the first thing that jumps out at me, there may be other errors.

    Login or Signup to reply.
  2. 0

    Wrong id

    In var note_area = document.querySelector("#textarea")

    note_area will always return null. There is id such as textarea it is notetext or use

    var note_area = document.querySelector("textarea")

    Also in the if statement if(note_area.val === "")

    Inline event handler

    Extension produces following error on run
    Refused to execute inline event handler because it violates CSP.
    this because of onblur="save_notes()"

    It is not allowed now. Instead, use this in your js file document.querySelector("#notetext").addEventListener("blur", save_notes);

    chrome.storage.sync

    chrome.storage.sync.get(stored_obj)

    stored_obj does not exit! so it can’t get you anything from the store use this instead.

    chrome.storage.sync.get("stored_obj")

    It will return you an object resultObject do resultObject.stored_obj to get the value.

    You need to pass note_area.val in set

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search