Chrome扩展程序:如何在弹出式点击中保留弹出式数据

时间:2016-09-21 22:47:35

标签: javascript google-chrome-extension

我正在尝试获取所选文本并在popup.html(扩展名)中显示。 我能够使用chrome extension api的消息传递技术传递数据,但每次我点击弹出窗口时,它都会清除存储的数据。 所以我想到了使用存储api。我设法使用chrome.storage.local.set存储选定的文本,并使用chrome.storage.local.get检索它。 但是弹出点击数据不会持续存在。

//编辑: 添加所有文件。

我想出了这个问题。显然,我尝试使用chrome.storage.set进行保存是覆盖以前的值而不是保存新值。

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]);   
    }
});

如何不每次覆盖值并保存新值?

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>

我设法通过弹出窗口发送数据。但每次我点击弹出窗口,数据都会被清除。如何使其在页面刷新和弹出式点击中保持不变?

0 个答案:

没有答案