popup.js 什么时候启动？

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

现在问题陈述。我将当前页面的 url 从 find_offers.js 发送到 load_offers.js，然后 load_offers.js 从服务器中提取相关商品，该商品正在 div 中填充，称为 YTM_offers.

load_offers.js 正在侦听来自 find_offers.js 的消息 (url) 但这里发送部分工作正常，但接收部分不工作，直到我检查 popup.html 并重新加载当前页面。

我做错了什么？帮助 appreciated.Thanks

Answer 1

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

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

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

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

从您目前的逻辑来看，当前页面似乎不太可能在弹出窗口打开时发生变化；因此，当您打开弹出窗口时，您应该只查询有关当前选项卡的信息，而您并不真正需要当前形式的后台脚本。

popup.js 什么时候启动？

When does popup.js gets initiated?

javascript

google-chrome-extension