无法通过Chrome扩展程序将消息从popup.js发送到content.js

时间:2019-06-08 09:12:41

标签: javascript google-chrome google-chrome-extension

我正在扩展。它是产品跟踪扩展。当页面加载时,在产品页面中注入一个按钮,当用户单击该按钮时,它将使用google oauth2对该用户进行身份验证。我已经完成身份验证,但是现在我无法将消息从oauth.js(popup.js)发送到content.js

我已经在这里尝试了所有相同类型的解决方案很多次,但是我认为我的问题有所不同。

有时候,消息在发送5秒钟后就会在content.js中接收到,但大多数情况下没有收到

有时,消息会在5.6秒后收到,但大多数情况下不会。消息经常显示(并非总是)

“未选中的runtime.lastError:消息端口在收到响应之前已关闭。”

身份验证api发送响应时,消息正在发送。

请看看。用户单击此按钮

https://www.screencast.com/t/TVm7OW1t2GP

打开一个弹出窗口以验证用户身份

https://www.screencast.com/t/lhEWel1OskHf

当用户通过单击按钮进行身份验证时,我正在使用api获取userinfo,然后希望将该信息发送到content.js

我已经尝试了以下链接:

这是代码

menifest.json

{
"update_url": "https://clients2.google.com/service/update2/crx",

   "background": {
      "scripts": [ "scripts/background.js" ]
   },
   "content_scripts": [ {

      "all_frames": false,
      "css": [ "styles/main.css" ],
      "js": [ "bower_components/jquery/dist/jquery.min.js", "scripts/contentscript.js" ],
      "matches": [ "<all_urls>","http://*.flipkart.com/*", "https://*.flipkart.com/*", "http://*.amazon.com/*", "https://*.amazon.in/*", "http://*.snapdeal.com/*", "https://*.snapdeal.com/*", "http://*.jabong.com/*", "https://*.jabong.com/*", "http://*.infibeam.com/*", "https://*.infibeam.com/*", "http://*.paytm.com/*", "https://*.paytm.com/*" ],
      "run_at": "document_end"
   } ],
   "description": "Track product prices on Amazon.in, Flipkart, Snapdeal, Jabong, Infibeam, etc.. and save money!",
   "externally_connectable": {
      "matches": [ "*://*.pricetrack.abc/*" ]
   },
   "icons": {
      "128": "images/icon-128.png",
      "16": "images/icon-16.png"
   },
   "oauth2": {
    "client_id": "774-a5iurgts5hi81lrfhgtb4esdfqqi76n8.apps.googleusercontent.com",
    "scopes":["openid", "email", "profile","https://www.googleapis.com/auth/contacts.readonly"]
  },
  "browser_action": {       
    "default_title": "filter",
    "default_popup": "popup.html"
  },

  "key": "MIIBIjANBgsfdfB",
   "manifest_version": 2,
   "name": "PriceTrack.In Shopping Assistant",
   "permissions": [  "identity","cookies", "storage", "tabs", "alarms", "webRequest", "*://*.pricetrack.in/*", "http://*.flipkart.com/*", "https://*.flipkart.com/*", "http://*.amazon.com/*", "https://*.amazon.in/*", "http://*.snapdeal.com/*", "https://*.snapdeal.com/*", "http://*.jabong.com/*", "https://*.jabong.com/*", "http://*.infibeam.com/*", "https://*.infibeam.com/*", "http://*.paytm.com/*", "https://*.paytm.com/*" ],
   "version": "0.0.5",
   "web_accessible_resources": [ "images/*.gif" ]
}

contentscript.js

"use strict";

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
      console.log('here3');
    if( request.message === "clicked_browser_action" ) {
        console.log('here');
      // var firstHref = $("a[href^='http']").eq(0).attr("href");

      // // console.log(firstHref);
      // // alert(firstHref);
      // // This line is new!
      // chrome.runtime.sendMessage({"message": "open_new_tab", "url": firstHref});
    }
  }
);

// chrome.runtime.onMessage.addListener(
// function(request, sender, sendResponse) {
//     console.log(sender.tab ?
//                 "from a content script:" + sender.tab.url :
//                 "from the extension");


//     console.log("received message from popup: "+request.greeting);

//     sendResponse({farewell: "I'm good, thank you popup!"});
// });

function getPid(a) {
    return a.indexOf("flipkart") >= 0 ? jq(".btn-buy-now").attr("data-pid") : a.indexOf("amazon") >= 0 ? jq("#ASIN").val() : a.indexOf("snapdeal") >= 0 ? jq("#productId").val() : a.indexOf("jabong") >= 0 ? jq("#catalogConfigId").val() : a.indexOf("infibeam") >= 0 ? jq("#listingId").val() : a.indexOf("paytm") >= 0 ? jq("#listingId").val() : void 0
}

function getButtonText(a) {
    return "<br/><div style='text-align:center'><button id=\"ptadd\" class='" + a + ' pure-button button-success button-xlarge\'>Add to pricetrack</button><div id="ptprogress" class="noshow"><img src="' + chrome.extension.getURL("images/progress.gif") + '"/></div><div id="ptaddstatus"/></div></br>'
}

function getPid(a) {
    return a.indexOf("flipkart") >= 0 ? jq(".btn-buy-now").attr("data-pid") : a.indexOf("amazon") >= 0 ? jq("#ASIN").val() : a.indexOf("snapdeal") >= 0 ? jq("#productId").val() : a.indexOf("jabong") >= 0 ? jq("#catalogConfigId").val() : a.indexOf("infibeam") >= 0 ? jq("#listingId").val() : a.indexOf("paytm") >= 0 ? jq("#listingId").val() : void 0
}

var host = "https://pricetrack.in",
    getItemURL = host + "/getItems",
    checkURL = host + "/check",
    addItemURL = host + "/addItem",
    jq = $.noConflict(),
    attachListener = function(a, b, c) {

        // console.log(a);
        //  console.log(b);
        //   console.log(c);
        //   alert(a);
        //    alert(b);
        //   alert(c);


        //when click on green button
        jq("#ptadd") ? jq("#ptadd").off("click").click(function(d) {
            d.preventDefault(), jq("#ptprogress").addClass("show"), jq("#ptaddstatus").html("");
            chrome.runtime.sendMessage("ptlogin", function(a) {

            });

            // var e = new XMLHttpRequest;
            // e.open("GET", checkURL, !0), e.onload = function(d) {
            //     if (4 === e.readyState){
            //         if (200 !== e.status){ 
            //             jq("#ptprogress").removeClass("show"), jq("#ptaddstatus").html("You need to login to pricetrack.in. Try to add product after logging in."), chrome.runtime.sendMessage("ptlogin", function(a) {
            //                 console.log("Got response - " + a)
            //             });
            //         }    
            //         else {
            //             console.log("User is logged in");
            //             var f = new XMLHttpRequest;
            //             f.open("POST", addItemURL, !0), f.setRequestHeader("Content-Type", "application/json"), f.send('{"url":"' + a + '"}'), f.onload = function(a) {
            //                 if (4 === f.readyState)
            //                     if (jq("#ptprogress").removeClass("show"), 200 !== f.status) jq("#ptaddstatus").html("Failed to add product to watchlist"), console.log("Failed to add product");
            //                     else {
            //                         var d = f.responseText,
            //                             e = JSON.parse(d);
            //                         console.log("Add  product response " + d), e && e.msg && "T" === e.msg ? (jq("#ptaddstatus").html("Added product to watchlist"), jq("#ptadd").hide(), b && (c.trackedItems || (c.trackedItems = []), c.trackedItems.push(b), chrome.storage.sync.set(c, function() {
            //                             console.log("Saved new item")
            //                         }))) : (jq("#ptaddstatus").html("Failed to add product to watchlist"), console.log("Failed to add"))
            //                     }
            //             }
            //         }
            //     }    
            // }, e.send()
        }) : console.error("Could not attach listener to pricetrack button")
    },
    renderButton = function(a, b, c) {
        var d, e = jq("button.ptadd");
        if (e && e.length > 0) return void console.log("Add to pricetrack button added");
        if (a.indexOf("flipkart") >= 0) d = jq("button._3zLR9i._3Plo8Q._16LyaZ._36SmAs"), d && d.length > 0 && (console.info("This is a flipkart product page " + a), d.parent().closest("form").after("<div><center><br/>" + getButtonText("flipkart") + "</center></div>"));
        else if (a.indexOf("amazon") >= 0) {
            var f = "([A-Z0-9]{10})",
                g = "0",
                h = a.match(f);
            h && 2 === h.length && (g = h[0]), "0" !== g && (console.info("This is amazon product page " + a), jq("#add-to-cart-button").parent().closest("div").before(getButtonText("amazon")), jq("#bb_atc_button").parent().closest("div").before(getButtonText("amazon")), jq("#buybox-see-all-buying-choices-announce").parent().closest("div").before(getButtonText("amazon")))
        } else a.indexOf("snapdeal") >= 0 ? (d = jq("#buy-button-id"), d && d.length > 0 && (console.info("This is a snapdeal product page " + a), d.parent().closest("div").before(getButtonText("flipkart")))) : a.indexOf("jabong") >= 0 ? (d = jq("#add-to-cart"), d && d.length > 0 && (console.info("This is a jabong product page " + a), d.parent().closest("div").before(getButtonText("flipkart")))) : a.indexOf("infibeam") >= 0 ? (d = jq("input.buyimg.buy-image.btn-image-buy"), d && d.length > 0 && (console.info("This is a infibeam product page " + a), d.parent().closest("div").before(getButtonText("flipkart")))) : a.indexOf("paytm") >= 0 && (d = jq("div.buy-bar > button.md-button"), d && d.length > 0 && (console.info("This is a paytm product page " + a), d.closest("div").after(getButtonText("flipkart"))));
        attachListener(a, b, c)
    },
    renderButtonInital = function() {
        var a = jq(location).attr("href");
        chrome.storage.sync.get("trackedItems", function(b) {
            var c = b;
            console.log("Found stored items: " + JSON.stringify(c));
            var d = getPid(a);
            console.log("PID is " + d), c && c.trackedItems && -1 !== c.trackedItems.indexOf(d) ? console.log(d + " is in stored data") : renderButton(a, d, b)
        })
    };
jq(document).ready(function() {

    var a = jq(location).attr("href");
    a.indexOf("flipkart") < 0 && a.indexOf("paytm") < 0 && renderButtonInital()
}); 
// chrome.runtime.onMessage.addListener(function(a, b, c) {
//     if (console.log("Got message in content script " + a.action), "getItems" === a.action) {
//         var d = new XMLHttpRequest;
//         d.open("GET", getItemURL, !0), d.onload = function(a) {
//             4 === d.readyState && (200 !== d.status ? console.log("Failed to fetch tracked items list") : chrome.storage.sync.set({
//                 trackedItems: JSON.parse(d.responseText)
//             }, function() {
//                 console.log("Saved " + JSON.parse(d.responseText))
//             }))
//         }, d.send()
//     } else "renderButton" === a.action && renderButtonInital()
// });

oauth.js

'use strict';

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      var init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      console.log(token);

      if (token) {
        //alert('Already Logged in');
         console.log(token);
          var x = new XMLHttpRequest();
          x.open('GET', 'https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=' + token);
          x.onload = function() {
              console.log(x.response);
                chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                var activeTab = tabs[0];
                console.log(activeTab.id);
                chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
              });
          };

          x.send();

      }
    });
  });
};

============================

background.js

"use strict";

function popUpCreationCallBack(a) {
    popupTabId = a
}
chrome.runtime.onInstalled.addListener(function(a) {
    console.log("previousVersion", a.previousVersion)
});
var webRequestCallBack = function(a) {
        (a.url.indexOf("api/3/page/dynamic/product") > 0 || a.url.indexOf("catalog.paytm.com/v1/p") > 0) && (console.log(JSON.stringify(a)), chrome.tabs.sendMessage(a.tabId, {
            action: "renderButton"
        }, function(b) {
            console.log(b + " - sending renderButton messsage to tab " + a.tabId)
        }))
    },
    metadata = {
        urls: ["*://*.pricetrack.in/*", "http://*.flipkart.com/*", "https://*.flipkart.com/*", "http://*.amazon.in/*", "https://*.amazon.in/*", "http://*.snapdeal.com/*", "https://*.snapdeal.com/*", "http://*.jabong.com/*", "https://*.jabong.com/*", "http://*.infibeam.com/*", "https://*.infibeam.com/*", "http://*.paytm.com/*", "https://*.paytm.com/*"]
    };
chrome.webRequest.onCompleted.addListener(webRequestCallBack, metadata);
var refreshTrackedItemAlarm = "refreshTrackedItemAlarm";
chrome.alarms.create(refreshTrackedItemAlarm, {
    delayInMinutes: 1,
    periodInMinutes: 30
}), chrome.alarms.onAlarm.addListener(function(a) {
    a.name === refreshTrackedItemAlarm && chrome.tabs.query({
        active: !0
    }, function(a) {
        a.forEach(function(a) {
            (a.url.indexOf("flipkart") > 0 || a.url.indexOf("amazon") > 0 || a.url.indexOf("snapdeal") > 0 || a.url.indexOf("jabong") > 0 || a.url.indexOf("infibeam") > 0 || a.url.indexOf("paytm") > 0) && chrome.tabs.sendMessage(a.id, {
                action: "getItems"
            }, function(a) {
                console.log(a + " - sending messsages to tab")
            })
        })
    })
}), console.log("'Allo 'Allo! Event Page for Page Action");

var popupTabId;
chrome.runtime.onMessage.addListener(function(a, b, c) {
    if (console.log("Got request internal - " + a), "ptlogin" === a) {
        var d = 440,
            e = 440,
            f = screen.width / 2 - d / 2,
            g = screen.height / 2 - e / 2;
        chrome.tabs.create({
            url: chrome.extension.getURL("dialog.html"),
            active: !1
        }, function(a) {
            chrome.windows.create({
                tabId: a.id,
                type: "popup",
                focused: !0,
                width: d,
                height: e,
                left: f,
                top: g
            }, popUpCreationCallBack(a.id))
        })
    }
    return !0
}), chrome.runtime.onMessageExternal.addListener(function(a, b, c) {
    return console.log("Got request external - " + a), "closepopup" === a && popupTabId && (c("closed"), chrome.tabs.remove(popupTabId), console.log("Popup closed")), !0
});

dialog.html

<!DOCTYPE html>
<html>

<head>
    <title>Login to Pricetrack.In</title>
    <link rel="stylesheet" type="text/css" href="styles/main.css">
    <script type="text/javascript" src="scripts/oauth.js"></script>
</head>

<body>
    <CENTER>
        <div style="width: 90%">
            <ul style="list-style-type: none;padding: 0;margin: 0;">
                <li style="margin-bottom : 15px;">
                    <!-- <a href="https://www.pricetrack.in/auth/google?redirect=/ptlogindone" class="button-success pure-button button-xlarge">Sign In with Google</a> -->
                    <button>Sign In with Google</button>
                </li>
        </div>
    </CENTER>
</body>

</html>

0 个答案:

没有答案