CODEWITHSUNDEEP
google-chrome-extension
necker
necker

Reputation: 7173

How to prevent Chrome extension to add multiple listeners

I have the following code in my popup.js:

function setDomain(domain) {      
   $.ajax({
        url: "http://example.com/api/" + domain,
        type: "GET",
        success: function (returnedData) {
          //do sth with returnedData
        }
   })
}


chrome.runtime.onMessage.addListener(
  function requestEvents(request, sender, sendResponse) {

    if (request.task==="showPopup"){
         chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
         chrome.tabs.sendMessage(tabs[0].id, {from: 'popup', subject: 'domainName'}, setDomain);});
    }
  }
);

When a user is opening multiple tabs this leads to having multiple addListener events when user decides to click the browser action.

background.js looks like this:

chrome.browserAction.onClicked.addListener(function(){
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    chrome.runtime.sendMessage({task: "showPopup"});
  })
});

I tried multiple things but haven't been able to get it to work properly. I experimented with hasListener and removeListener like described here: https://developer.chrome.com/apps/events but could not get it to work. I'm not sure how should I use removeListener. I added at the end of function requestEvents (in popup.js) but it didn't seem to remove the listener. Also do not know how to check which listeners are currently appended.

What should I do to prevent adding multiple listeners when opening multiple tabs?

EDIT: In content.js I have:

chrome.runtime.onMessage.addListener(function (msg, sender, response) {
  if ((msg.from === 'popup') && (msg.subject === 'domainName')) {
    var domainName = document.domain;
    domainName = extractDomain(domainName)
    response(domainName)
  }
}

var iframe = document.createElement('iframe');
iframe.id="iframe-pl"
iframe.frameBorder = "none";
iframe.src = chrome.extension.getURL("popup.html")

As can be seen from above code I inject popup.html into a website.

popup.html looks like this

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="popup.js"></script>
    <script type="text/javascript" src="jquery-3.2.0.min.js"></script>
    <link href="stylesheets/stylesheet.css" rel="stylesheet">
    <link href="stylesheets/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu|Hind|Varela|Lato:300,400,500,600,700,900", rel="stylesheet", type="text/css">
  </head>
  <body>
  <div class="title white">
    ...

So the question is how does one prevent adding multiple listeners when opening multiple tabs? Any answers would be appreciated ...

Upvotes: 0

Views: 1489

Answers (1)

Iv&#225;n Nokonoko
Iv&#225;n Nokonoko

Reputation: 5118

You have this background.js:

chrome.browserAction.onClicked.addListener(function(){
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    chrome.runtime.sendMessage({task: "showPopup"});
  })
});

This will query for the active tab, but send a message to ALL listeners. According to docs:

If sending to your extension, the runtime.onMessage event will be fired in every frame of your extension (except for the sender's frame)

Try replacing chrome.runtime.sendMessage({task: "showPopup"}); with chrome.tabs.sendMessage(tabs[0].id,{task: "showPopup"}) to send the message to only the active tab.

Apart from that, you are including 2 message listeners per webpage: one in content.js (that I assume is a content script) and another one in popup.js that gets loaded when you insert popup.html in an iframe in the webpage.

Upvotes: 1

Related Questions