gpt4 book ai didi

javascript - 如何将 localstorage 从 popup.js 传递到 content.js

转载 作者:行者123 更新时间:2023-12-02 16:50:00 25 4
gpt4 key购买 nike

我想将数据从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 仅在单击图标时才处于事件状态。因此不可能进行消息传递。

最佳答案

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

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

这正是backgroundevent pages用于 - 持久事件监听器。此外,后台页面与弹出窗口共享 localStorage,因此不会出现任何问题。

<小时/>

总而言之,有一个比 localStorage 更好的替代方案,它可用于弹出窗口和内容脚本,而无需任何消息传递:chrome.storage API .

关于javascript - 如何将 localstorage 从 popup.js 传递到 content.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26755846/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com