how to pass localstorage from popup.js to content.js

问题

i want to pass data from localstorage of popup.hmtl to content script content.js i use popup.html to receive username and password and store it in local storage.Now i want to transfer the data to content script before it execute.

**popup.html**
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" async src="popup.js"></script>
</head>
<body>

<table>
<tr>
<td>
Username:
<td><input id="u1" type="text" name="uname">
</tr>
<tr>
<td>
Password:
<td><input id="u2" type="password" name="pass">
</tr>
<tr>
<td>
<td>
<input id="clickme" type="button" value="save" />
</tr>

</table>

<div id="result"></div>
<div id="result2"></div>

</body>
</html>

popup.js

document.getElementById('clickme').onclick=myfunction;
var sname = localStorage.getItem("username1");
var spass=localStorage.getItem("password1");
document.getElementById("result").innerHTML = localStorage.getItem("username1");
document.getElementById("result2").innerHTML=localStorage.getItem("password1");

function myfunction(){

// Check browser support
if (typeof(Storage) != "undefined") {

    var uname="bhuwan";
    var username=document.getElementById("u1").value;
    var password=document.getElementById("u2").value;

    // Store
    localStorage.setItem("username1", username);
    localStorage.setItem("password1",password);
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("username1");
    document.getElementById("result2").innerHTML=localStorage.getItem("password1");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
}
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.method == "getLocalStorage")
      sendResponse({data: localStorage[request.key]});
    else
      sendResponse({}); // snub them.
});

content.js

{
var pid="";
var cid="";


chrome.runtime.sendMessage({method: "getLocalStorage",key="username"}, function(response) {
  var cid = response.data;

});
chrome.runtime.sendMessage({method: "getLocalStorage"},key="password" function(response) {
  var pid = response.data;

});


}

I Found the answer:

Transferred the following code to background .js from popup.js

 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
        if (request.method == "getLocalStorage")
          sendResponse({data: localStorage[request.key]});
        else
          sendResponse({}); // snub them.
    });

since popup.js is active only when the icon is clicked.So No Message Passing was possible.

回答1:

You are trying to retrieve data by messaging the popup page.

The problem with this: popup page only exists as long as it's shown. When it's closed, it is destroyed, your onMessage listener does not exist, and the request fails.

This is precisely what background or event pages are for - persistent event listeners. Furthermore, a background page shares localStorage with the popup, so no problems there.

All that said, there is a better alternative to localStorage that's available both to popup and content scripts without any messaging: chrome.storage API.

来源：https://stackoverflow.com/questions/26755846/how-to-pass-localstorage-from-popup-js-to-content-js

标签

javascript

google-chrome-extension

content-script

message-passing