如何将本地存储从popup.js传递到content.js [英] how to pass localstorage from popup.js to content.js
问题描述
我想将数据从popup.hmtl的本地存储传递到内容脚本content.js 我使用popup.html接收用户名和密码并将其存储在本地存储中.现在，我想在执行之前将数据传输到内容脚本.
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;
});
}
我找到了答案:
将以下代码从popup.js转移到后台.js
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.
});
因为popup.js仅在单击图标时处于活动状态，所以无法传递消息.
since popup.js is active only when the icon is clicked.So No Message Passing was possible.
推荐答案
您正试图通过向弹出页面发送消息来检索数据.
You are trying to retrieve data by messaging the popup page.
此问题:弹出页面仅在显示时存在.当它关闭时，它被销毁，您的onMessage侦听器不存在，并且请求失败.
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.
总而言之，对于localStorage，还有一个更好的替代方法，可用于弹出脚本和内容脚本，而无需任何消息传递:
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.
这篇关于如何将本地存储从popup.js传递到content.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
