Chrome Extension: How to persist data in popup across popup clicks

问题

I'm trying to get a selected text and show it in the popup.html (extension's). I was able to pass the data using the message passing techniques of chrome extension api but everytime I click on popup, it clears the stored data. So I thought of using the storage api. I managed to store the selected text using chrome.storage.local.set and retrieve it using chrome.storage.local.get. But the data doesn't persists across popup clicks.

//Edit: Adding all the files.

I figured out the issue. Apparently my attempt to save using chrome.storage.set is overwriting my previous value and not saving a new value.

chrome.storage.local.get(null, function(items) {
    var arr = Object.keys(items).map(function (key) {return items[key]}); 
    console.log(arr.length); // This shows the length as 1 everytime
    for(var i = 0; i < arr.length;i++){
        getMsg(arr[i]);   
    }
});

How do I not overwrite the value and save a new value eachtime ?

mycontent.js

document.addEventListener('keydown', function(e) {
    if (e.keyCode == 67 && event.ctrlKey) {   // ascii C = 67
        getSelectionText();
        chrome.runtime.sendMessage({method: 'setText', output: text});
    }
});
var text;

function getSelectionText() {

if (window.getSelection) {
  text = window.getSelection().toString();
}
else if(document.selection !="" && document.selection.type == "Control") {
  text = document.selection.createRange().text;
}

if(text != ""){
  chrome.storage.local.set({value: text}, logger(text));
  return text;   
}

}
function logger(text){
   console.log(text + ' saved123');
}

Popup.js

chrome.storage.local.get(null, function(items) {
    getMsg(items.value);
});

function getMsg(value){

    var textNode =  document.createTextNode(value);
    var node = document.createElement("li");
    node.id = "textSpan";
    node.onclick = function(){
        callFunc(this);
    }
    var textBox = document.createElement("span");
    textBox.appendChild(textNode);
    node.appendChild(textBox);
    var element = document.getElementById('list-view');
    element.insertBefore(node, element.childNodes[0]); 
};



function callFunc(loc){
    removeTask(loc,outerDiv.id,true);
    loc.removeChild();  
}

function removeTask(id1, id, flag){
    if (flag != false){
        var pasted = document.getElementById(id1);
        var pasted = id1;
        alert(pasted.innerText);
        document.getElementById(id).value = pasted.innerText;
        id="";
        pasted.remove();
    }
}

Manifest.JSON

{
    "manifest_version": 2,

    "name": "Copy",
    "description": "current page",
    "version": "1.0",

    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
    },
     "background": {
      "persistant": true
    },
    "permissions": [
      "storage",
      "activeTab"
    ],
    "content_scripts": [
    {
      "matches": 
      ["http://*/*" , "https://*/*"],
      "js": ["myContent.js"]
    }
    ]
  }

Popup.html

<!DOCTYPE html>
    <!--
     This page is shown when the extension button is clicked, because the
     "browser_action" field in manifest.json contains the "default_popup" key with
     value "popup.html".
     -->
    <html>
      <head>
        <title>Extension's Popup</title>
        <!--
          - JavaScript and HTML must be in separate files: see our Content Security
          - Policy documentation[1] for details and explanation.
          -
          - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
         -->
        <!--<-script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
        -->

    <script type="text/javascript" src="popup.js"></script>
      </head>
      <body>
      <div class="col-md-6 text-center">    
        <div id="displayContent">
          <ol id="list-view">
          </ol>
        </div>
      </div>

      </body>
    </html>

I managed to send data across popup. But everytime I click on popup, data gets cleared. How do I make it persist across page refresh and popup clicks ?

来源：https://stackoverflow.com/questions/39627668/chrome-extension-how-to-persist-data-in-popup-across-popup-clicks

标签

javascript

google-chrome-extension