Javascript 使用Chrome存储API存储简单对象时出现问题_Javascript_Html_Google Chrome

Javascript 使用Chrome存储API存储简单对象时出现问题

javascript html google-chrome

Javascript 使用Chrome存储API存储简单对象时出现问题,javascript,html,google-chrome,Javascript,Html,Google Chrome,我正在尝试使用Google Chrome存储API（）来持久化一个文本区域，它在我的插件中充当一个持久的notes字段在HTML中，我有一个在blur上运行save_notes的处理程序设置如果文本区域为空，我想立即启动load_notes（）。保存注释应将文本区域保存到对象键“存储的对象” 我没有正确编码，它也不工作，有人看到这个问题吗 notes.js ///// select the text area // var note_area = document.getElementBy

我正在尝试使用Google Chrome存储API（）来持久化一个文本区域，它在我的插件中充当一个持久的notes字段

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

如果文本区域为空，我想立即启动load_notes（）。保存注释应将文本区域保存到对象键“存储的对象”

我没有正确编码，它也不工作，有人看到这个问题吗

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>


注释屏幕




注释屏幕

Websurf注释
在这里写笔记。参考他们在空闲时间进行搜索和检查


推翻
需要立即查看的内容是此覆盖的唯一预期目标
旁路时限
5分钟
10分钟
15分钟
20分钟
30分钟
立即旁路（将记录操作）

chrome.storage.sync.get（）

是一个异步函数，就像

set（）

一样。您已为

set（）

设置了正确的回调函数，但未设置

get

：

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

这是我首先想到的，可能还有其他错误。

chrome.storage.sync.get（）是一个异步函数，就像

set（）

一样。您已为

set（）

设置了正确的回调函数，但未设置

get

：

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

这是我首先想到的，可能还有其他错误。

错误的id

在

var note\u area=document.querySelector（“textarea”）

注意\u区域

将始终返回空值。有一个id，例如

textarea

它是

notetext

或use

var note\u area=document.querySelector（“textarea”）

同样在if语句中

if（注意_area.val==“”）

内联事件处理程序

扩展在运行时产生以下错误

拒绝执行内联事件处理程序，因为它违反了CSP。

这是因为

onblur=“save_notes（）”

现在是不允许的。相反，在js文件

document.querySelector（“notetext”）.addEventListener（“blur”，save_notes）中使用它
chrome.storage.sync
chrome.storage.sync.get（存储对象）

存储对象
不退出！所以它不能从商店里得到任何东西，用这个代替
chrome.storage.sync.get（“存储对象”）

它将返回一个对象resultObject
do resultObject.storaged\u obj以获取值
您需要在集合中传递注释\u area.val

错误的id
在var note\u area=document.querySelector（“textarea”）

注意\u区域
将始终返回空值。有一个id，例如textarea
它是notetext
或use
var note\u area=document.querySelector（“textarea”）

同样在if语句中if（注意_area.val==“”）

内联事件处理程序
扩展在运行时产生以下错误
拒绝执行内联事件处理程序，因为它违反了CSP。
这是因为onblur=“save_notes（）”

现在是不允许的。相反，在js文件document.querySelector（“notetext”）.addEventListener（“blur”，save_notes）中使用它
chrome.storage.sync
chrome.storage.sync.get（存储对象）

存储对象
不退出！所以它不能从商店里得到任何东西，用这个代替
chrome.storage.sync.get（“存储对象”）

它将返回一个对象resultObject
do resultObject.storaged\u obj以获取值
您需要在集合中传递注释\u area.val

谢谢，我做了更改，但确实还有其他问题，显然不应该是你的if（！note\u area）
beif（note\u area！==null）
为了确保querySelector返回一个对象谢谢，我做了更改，但是确实还有其他问题，显然不应该是你的if（！note\u area）
beif（注意\u area！==null）
以确保querySelector返回一个对象