Chrome Extensions: More than one page created











up vote
0
down vote

favorite












I'm still learning coding in javascript and I'm not familiar with Chrome extensions as well.
I try to develope one extension that would transfer selected text or image to another web page.
Everything works fine for sending image, and for text also.
But, with text are occured issues when I use the extension more than once. If I use it 3 time,for example, it opens three times the same tab with web page where the information are sent.
I thing the issue could be with content script which is injected every time when is clicked. But I am not sure for that, and don't know solution.



Here is background file:



function getClickHandler() {
function getPageDetails(callback) {
// Inject the content script into the current page
chrome.tabs.executeScript(null, { file: 'content.js' });
// Perform the callback when a message is received from the content script
chrome.runtime.onMessage.addListener(function(message) {
// Call the callback function
callback(message);
});
};
function onPageDetailsReceived(details) {
transfer1= details.summary;
transfer2= details.url;
transfer3= details.title;
page = " http://www.example.com/testing.php?trans1=" + transfer1+"&trans2="+transfer2+"&trans3="+transfer3;
chrome.tabs.create({"url": page});


}
return function(info, tab) {

// The srcUrl property is only available for image elements.
var url = info.srcUrl;
if (url == null)
{
getPageDetails(onPageDetailsReceived);

}
else
{
page = " http://www.example.com/testing.php?trans4=" + url;
chrome.tabs.create({"url": page});
}
};
};


chrome.contextMenus.create({
title : "testing",
type : "normal",
contexts : ["image","selection"],
onclick: getClickHandler()
});


And here is content.js:



chrome.runtime.sendMessage({
'title': document.title,
'url': window.location.href,
'summary': window.getSelection().toString(),
});


Thanks for help and advices!










share|improve this question







New contributor




Siniša Knežević is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
























    up vote
    0
    down vote

    favorite












    I'm still learning coding in javascript and I'm not familiar with Chrome extensions as well.
    I try to develope one extension that would transfer selected text or image to another web page.
    Everything works fine for sending image, and for text also.
    But, with text are occured issues when I use the extension more than once. If I use it 3 time,for example, it opens three times the same tab with web page where the information are sent.
    I thing the issue could be with content script which is injected every time when is clicked. But I am not sure for that, and don't know solution.



    Here is background file:



    function getClickHandler() {
    function getPageDetails(callback) {
    // Inject the content script into the current page
    chrome.tabs.executeScript(null, { file: 'content.js' });
    // Perform the callback when a message is received from the content script
    chrome.runtime.onMessage.addListener(function(message) {
    // Call the callback function
    callback(message);
    });
    };
    function onPageDetailsReceived(details) {
    transfer1= details.summary;
    transfer2= details.url;
    transfer3= details.title;
    page = " http://www.example.com/testing.php?trans1=" + transfer1+"&trans2="+transfer2+"&trans3="+transfer3;
    chrome.tabs.create({"url": page});


    }
    return function(info, tab) {

    // The srcUrl property is only available for image elements.
    var url = info.srcUrl;
    if (url == null)
    {
    getPageDetails(onPageDetailsReceived);

    }
    else
    {
    page = " http://www.example.com/testing.php?trans4=" + url;
    chrome.tabs.create({"url": page});
    }
    };
    };


    chrome.contextMenus.create({
    title : "testing",
    type : "normal",
    contexts : ["image","selection"],
    onclick: getClickHandler()
    });


    And here is content.js:



    chrome.runtime.sendMessage({
    'title': document.title,
    'url': window.location.href,
    'summary': window.getSelection().toString(),
    });


    Thanks for help and advices!










    share|improve this question







    New contributor




    Siniša Knežević is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.






















      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I'm still learning coding in javascript and I'm not familiar with Chrome extensions as well.
      I try to develope one extension that would transfer selected text or image to another web page.
      Everything works fine for sending image, and for text also.
      But, with text are occured issues when I use the extension more than once. If I use it 3 time,for example, it opens three times the same tab with web page where the information are sent.
      I thing the issue could be with content script which is injected every time when is clicked. But I am not sure for that, and don't know solution.



      Here is background file:



      function getClickHandler() {
      function getPageDetails(callback) {
      // Inject the content script into the current page
      chrome.tabs.executeScript(null, { file: 'content.js' });
      // Perform the callback when a message is received from the content script
      chrome.runtime.onMessage.addListener(function(message) {
      // Call the callback function
      callback(message);
      });
      };
      function onPageDetailsReceived(details) {
      transfer1= details.summary;
      transfer2= details.url;
      transfer3= details.title;
      page = " http://www.example.com/testing.php?trans1=" + transfer1+"&trans2="+transfer2+"&trans3="+transfer3;
      chrome.tabs.create({"url": page});


      }
      return function(info, tab) {

      // The srcUrl property is only available for image elements.
      var url = info.srcUrl;
      if (url == null)
      {
      getPageDetails(onPageDetailsReceived);

      }
      else
      {
      page = " http://www.example.com/testing.php?trans4=" + url;
      chrome.tabs.create({"url": page});
      }
      };
      };


      chrome.contextMenus.create({
      title : "testing",
      type : "normal",
      contexts : ["image","selection"],
      onclick: getClickHandler()
      });


      And here is content.js:



      chrome.runtime.sendMessage({
      'title': document.title,
      'url': window.location.href,
      'summary': window.getSelection().toString(),
      });


      Thanks for help and advices!










      share|improve this question







      New contributor




      Siniša Knežević is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      I'm still learning coding in javascript and I'm not familiar with Chrome extensions as well.
      I try to develope one extension that would transfer selected text or image to another web page.
      Everything works fine for sending image, and for text also.
      But, with text are occured issues when I use the extension more than once. If I use it 3 time,for example, it opens three times the same tab with web page where the information are sent.
      I thing the issue could be with content script which is injected every time when is clicked. But I am not sure for that, and don't know solution.



      Here is background file:



      function getClickHandler() {
      function getPageDetails(callback) {
      // Inject the content script into the current page
      chrome.tabs.executeScript(null, { file: 'content.js' });
      // Perform the callback when a message is received from the content script
      chrome.runtime.onMessage.addListener(function(message) {
      // Call the callback function
      callback(message);
      });
      };
      function onPageDetailsReceived(details) {
      transfer1= details.summary;
      transfer2= details.url;
      transfer3= details.title;
      page = " http://www.example.com/testing.php?trans1=" + transfer1+"&trans2="+transfer2+"&trans3="+transfer3;
      chrome.tabs.create({"url": page});


      }
      return function(info, tab) {

      // The srcUrl property is only available for image elements.
      var url = info.srcUrl;
      if (url == null)
      {
      getPageDetails(onPageDetailsReceived);

      }
      else
      {
      page = " http://www.example.com/testing.php?trans4=" + url;
      chrome.tabs.create({"url": page});
      }
      };
      };


      chrome.contextMenus.create({
      title : "testing",
      type : "normal",
      contexts : ["image","selection"],
      onclick: getClickHandler()
      });


      And here is content.js:



      chrome.runtime.sendMessage({
      'title': document.title,
      'url': window.location.href,
      'summary': window.getSelection().toString(),
      });


      Thanks for help and advices!







      javascript google-chrome-extension






      share|improve this question







      New contributor




      Siniša Knežević is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question







      New contributor




      Siniša Knežević is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question






      New contributor




      Siniša Knežević is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked Nov 19 at 13:07









      Siniša Knežević

      11




      11




      New contributor




      Siniša Knežević is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      Siniša Knežević is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      Siniša Knežević is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          Every time that chrome.runtime.onMessage.addListener is called, it adds another listener, all of which keep firing on every message.



          If your intention is to only invoke a particular handler once, you need some self-deregistering logic by calling removeListener with a reference to the handler.



          If you only ever need one handler that doesn't change (which seems to be your case), you need to take care to call addListener only once.



          From the look of your current code, you can take chrome.runtime.onMessage.addListener on the top level:



          chrome.runtime.onMessage.addListener(function(message)  {
          onPageDetailsReceived(message);
          });


          and then remove it from getPageDetails. I understand the intention to make callback configurable, but you don't need it here, or at least you need to make sure the listener is only registered once.






          share|improve this answer





















            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });






            Siniša Knežević is a new contributor. Be nice, and check out our Code of Conduct.










             

            draft saved


            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375335%2fchrome-extensions-more-than-one-page-created%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            0
            down vote













            Every time that chrome.runtime.onMessage.addListener is called, it adds another listener, all of which keep firing on every message.



            If your intention is to only invoke a particular handler once, you need some self-deregistering logic by calling removeListener with a reference to the handler.



            If you only ever need one handler that doesn't change (which seems to be your case), you need to take care to call addListener only once.



            From the look of your current code, you can take chrome.runtime.onMessage.addListener on the top level:



            chrome.runtime.onMessage.addListener(function(message)  {
            onPageDetailsReceived(message);
            });


            and then remove it from getPageDetails. I understand the intention to make callback configurable, but you don't need it here, or at least you need to make sure the listener is only registered once.






            share|improve this answer

























              up vote
              0
              down vote













              Every time that chrome.runtime.onMessage.addListener is called, it adds another listener, all of which keep firing on every message.



              If your intention is to only invoke a particular handler once, you need some self-deregistering logic by calling removeListener with a reference to the handler.



              If you only ever need one handler that doesn't change (which seems to be your case), you need to take care to call addListener only once.



              From the look of your current code, you can take chrome.runtime.onMessage.addListener on the top level:



              chrome.runtime.onMessage.addListener(function(message)  {
              onPageDetailsReceived(message);
              });


              and then remove it from getPageDetails. I understand the intention to make callback configurable, but you don't need it here, or at least you need to make sure the listener is only registered once.






              share|improve this answer























                up vote
                0
                down vote










                up vote
                0
                down vote









                Every time that chrome.runtime.onMessage.addListener is called, it adds another listener, all of which keep firing on every message.



                If your intention is to only invoke a particular handler once, you need some self-deregistering logic by calling removeListener with a reference to the handler.



                If you only ever need one handler that doesn't change (which seems to be your case), you need to take care to call addListener only once.



                From the look of your current code, you can take chrome.runtime.onMessage.addListener on the top level:



                chrome.runtime.onMessage.addListener(function(message)  {
                onPageDetailsReceived(message);
                });


                and then remove it from getPageDetails. I understand the intention to make callback configurable, but you don't need it here, or at least you need to make sure the listener is only registered once.






                share|improve this answer












                Every time that chrome.runtime.onMessage.addListener is called, it adds another listener, all of which keep firing on every message.



                If your intention is to only invoke a particular handler once, you need some self-deregistering logic by calling removeListener with a reference to the handler.



                If you only ever need one handler that doesn't change (which seems to be your case), you need to take care to call addListener only once.



                From the look of your current code, you can take chrome.runtime.onMessage.addListener on the top level:



                chrome.runtime.onMessage.addListener(function(message)  {
                onPageDetailsReceived(message);
                });


                and then remove it from getPageDetails. I understand the intention to make callback configurable, but you don't need it here, or at least you need to make sure the listener is only registered once.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 19 at 13:28









                Xan

                52.6k9101128




                52.6k9101128






















                    Siniša Knežević is a new contributor. Be nice, and check out our Code of Conduct.










                     

                    draft saved


                    draft discarded


















                    Siniša Knežević is a new contributor. Be nice, and check out our Code of Conduct.













                    Siniša Knežević is a new contributor. Be nice, and check out our Code of Conduct.












                    Siniša Knežević is a new contributor. Be nice, and check out our Code of Conduct.















                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375335%2fchrome-extensions-more-than-one-page-created%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    404 Error Contact Form 7 ajax form submitting

                    How to know if a Active Directory user can login interactively

                    Refactoring coordinates for Minecraft Pi buildings written in Python