Question

的manifest.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."
			});
}

现在的问题陈述。我将当前页面的网址从find_offers.js发送到load_offers.js，然后load_offers.js从服务器中提取相关的优惠，这些优惠正在名为YTM_offers的div中填充。

load_offers.js正在侦听来自find_offers.js的消息（url），但此处发送部分工作正常，但在我检查popup.html并重新加载当前页面之前，接收部分无效。

我做错了什么？帮助赞赏。谢谢

Answer 1

假设弹出窗口在关闭时侦听消息是错误的。

实际上，当弹出窗口关闭时，包含load_offers.js的HTML文档会被完全卸载，并且每次都会从头开始重新加载。

因此，向弹出窗口发送消息通常是个坏主意，除非弹出窗口首先询问。

你需要修改你的逻辑;要么只在弹出窗口打开时查询信息，要么在其中存储信息，以便弹出窗口可以在打开时请求它。后者可能很难，因为您将背景声明为persistent: false（chrome.storage是一个选项）。

从查看当前逻辑看，弹出窗口打开时，当前页面似乎不太可能发生变化;因此，您应该在打开弹出窗口时查询有关当前选项卡的信息，而您实际上并不需要当前表单中的后台脚本。

popup.js何时启动？

1 个答案: