故障使用Chrome存儲API

我嘗試使用谷歌瀏覽器存儲API（https://developer.chrome.com/extensions/storage）堅持充當持久的備註字段在我的插件故障使用Chrome存儲API

在HTML我有一個處理一個textarea存儲簡單對象設置爲在模糊上運行save_notes。

如果textarea爲空白，我想立即觸發load_notes（）。 save_notes應該將textarea保存爲對象鍵'stored_obj'

我沒有對它進行編碼，它不工作，任何人都看到了這個問題？

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>

來源

2017-06-16 Sean Dezoysa

chrome.storage.sync.get()是一個異步功能，正如set()是。您有適當的回調函數設置爲set()，但不get：

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

那就是跳出我的第一件事情，可能有其他錯誤。

來源

2017-06-16 02:23:44

謝謝你，我所做的更改，但確實有其他問題顯然 –

應該不是你的'如果（！note_area）'是'如果（note_area！ == null）'以確保querySelector返回一個對象 –

錯誤ID

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

note_area總是會返回null。有ID，例如textarea是notetext或使用

var note_area = document.querySelector("textarea")

另外在if語句if(note_area.val === "")

聯事件處理程序

擴展產生以下的運行錯誤Refused to execute inline event handler because it violates CSP. this因爲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在集

來源

2017-06-16 21:41:56 mukuljainx

故障使用Chrome存儲API

回答

相關問題