如何将本地存储从popup.js传递到content.js

Question

我想将数据从popup.hmtl的本地存储传递到内容脚本content.js，我使用popup.html接收用户名和密码并将其存储在本地存储中。现在，我想在执行之前将数据传输到内容脚本。

**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;

});


}

我找到了答案：

将以下代码从popup.js转移到后台.js

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

由于popup.js仅在单击图标时处于活动状态，因此无法传递消息。

Answer 1

您正在尝试通过向弹出页面发送消息来检索数据。

问题在于：弹出页面仅在显示时存在。 当它关闭时，它被销毁，您的onMessage侦听器不存在，并且请求失败。

这正是背景或事件页面的用途-持久事件侦听器。 此外，后台页面与弹出窗口共享localStorage ，因此在那里没有问题。

chrome.storage ， localStorage有一个更好的替代方法，可用于弹出脚本和内容脚本，而无需任何消息传递： chrome.storage API 。

如何将本地存储从popup.js传递到content.js

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-11-07 12:03:56

如何将本地存储从popup.js传递到content.js

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-11-07 12:03:56

解决方案1
2 已采纳 2014-11-07 12:03:56