Question

我尝试使用Google Chrome存储空间API（https://developer.chrome.com/extensions/storage）来保留在我的插件中充当持久性备注字段的textarea

在HTML中，我有一个处理程序设置，可以在blur上运行save_notes。

如果textarea为空，我想立即触发load_notes（）。 save_notes应该将textarea保存到对象键＆＃39; stored_obj＆＃39;

我没有正确编码并且它无法正常工作，有人看到了这个问题吗？

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>

Answer 1

chrome.storage.sync.get()是一个异步函数，就像set()一样。您为set()设置了正确的回调函数，但没有设置get：

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

这是我第一件事，可能还有其他错误。

Answer 2

ID错误

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

note_area将始终返回null。有textarea notetext或使用

等ID

var note_area = document.querySelector("textarea")

同样在if语句if(note_area.val === "")
中

内联事件处理程序

扩展在运行时产生以下错误 Refused to execute inline event handler because it violates CSP. 这是因为onblur="save_notes()"

现在不允许。相反，请在您的js文件document.querySelector("#notetext").addEventListener("blur", save_notes);

中使用它

<强> chrome.storage.sync

chrome.storage.sync.get(stored_obj)

stored_obj没有退出！因此它无法从商店获得任何东西而是使用它。

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

它会返回一个对象resultObject做resultObject.stored_obj来获取值。

您需要在集合
中传递note_area.val

使用Chrome存储API存储简单对象时遇到问题

2 个答案: