list .json
{
"manifest_version": 2,
"name": "YouTellMe",
"description":"FIND AND COMPARE OVER 10.000.000 PRODUCTS AND GET THE BEST PRICES FROM ALL MAJOR INDIAN WEBSHOPS. GET DISCOUNTS TO HAVE THE CHEAPEST PRICE!",
"version":"0.0",
"browser_action":
{
"default_icon":"logoytm.png",
"default_popup": "offers.html",
"badge" : "YTM"
},
"background" :
{
"scripts" : ["find_offers.js"],
"persistent" : false
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"permissions":
[
"tabs",
"activeTab",
"webNavigation",
"notifications",
"https://ajax.googleapis.com/",
"http://localhost/*",
]}
find_offers.js
if( ! window.jQuery )
{
console.log("importing jquery...")
script = document.createElement('script');
script.source = 'http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js';
document.getElementsByTagName("head")[0].appendChild(script)
}
chrome.tabs.onUpdated.addListener(tab_activated);
chrome.webNavigation.onCompleted.addListener(load_iframe);
var tablink;
function tab_activated()
{
chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
function(tabs)
{
tablink = tabs[0].url;
});
}
function load_iframe()
{
console.log("in load iframe");
ytm_product_url = "http://localhost/bookmarklet/product/";
console.log("current URL " + tablink);
if(tablink != undefined)
{
var uri = ytm_product_url+"?retailer_url="+tablink;
}
else
{
var uri = ytm_product_url+"?retailer_url="+document.location.href;
}
chrome.extension.sendMessage({url:uri});
}offers.html
<html>
<head>
<title></title>
</head>
<link rel="stylesheet" type="text/x-scss" href="bookmark_offers.css" />
<script src='jquery.min.js'></script>
<script src='load_offers.js'> </script>
<body>
<div id="YTM_offers"> </div>
</body>
</html>load_offers.js
chrome.runtime.onMessage.addListener
(
function (request)
{
alert("message received");
$.ajax
(
{
url : request.url,
}
)
.done
(
function(data)
{
notifyUser();
console.log( $("#YTM_offers")[0] );
// document.getElementById('YTM_offers').innerHTML += data;
$("#YTM_offers").html(data);
console.log($("#YTM_offers"));
}
)
}
)
function notifyUser()
{
console.log("notification...")
if (! Notification)
{
alert('Notifications are supported in modern versions of Chrome, Firefox, Opera and Firefox.');
return;
}
if(Notification.permission !== "granted")
Notification.requestPermission();
var notification = new Notification("YouTellMe",
{ icon : 'logoytm.png',
body : "We've got more offers for you." +
"\nClick on extension Icon for more details."
});
}现在是问题陈述。
我将当前页面的 url 从 find_offers.js 发送到 load_offers.js 然后 load_offers.js 从服务器中提取相关的报价，这是填充在名为 YTM_offers 的 div 中。
load_offers.js 正在监听来自 find_offers.js 的消息(url)，但发送部分工作正常，但接收部分不起作用，直到我检查 popup.html 并重新加载当前页面。
我做错了什么？ 帮助赞赏。谢谢
最佳答案
您错误地假设弹出窗口在关闭时会监听消息。
实际上，包含load_offers.js 的HTML 文档在弹出窗口关闭时完全卸载，并且每次都从头开始重新加载。
因此，向弹出窗口发送消息通常不是一个好主意，除非弹出窗口先询问。
你需要修改你的逻辑；要么仅在弹出窗口打开时从其中查询信息，要么存储信息以便弹出窗口在打开时可以请求它。后者可能很困难，因为您将背景声明为 persistent: false(不过，chrome.storage 是一个选项)。
从您当前的逻辑来看，当前页面在弹出窗口打开时似乎不太可能发生变化；因此，当您打开弹出窗口时，您应该只查询有关当前选项卡的信息，而您实际上并不需要当前形式的后台脚本。
关于javascript - popup.js 何时启动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29893870/