Bhu*_*wan 0 javascript message-passing google-chrome-extension content-script
我想将数据从 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>
弹出窗口.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.
});
内容.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侦听器不存在，并且请求失败。
这正是后台或事件页面的用途——持久事件侦听器。此外，后台页面localStorage与弹出窗口共享，因此没有问题。
话虽如此，有一个更好的替代方案可localStorage用于弹出窗口和内容脚本，无需任何消息传递：chrome.storageAPI。
| 归档时间： |
|
| 查看次数： |
2847 次 |
| 最近记录： |