CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensionmessage-passing
Chamilyan
Chamilyan

Reputation: 9423

Chrome Extension: Message passing confusion

I'm trying to send the number of checked items on a page over to a popup. The add input button on the popup alerts or sends to the console the amount of checkboxes checked on the webpage.

My script is not doing this and I thought there may be a confusion on how message passing works. Here is what I have:

Manifest:

{
  "name": "A plugin for...",
  "version": "1.0",
  "background_page": "background.html",
  "permissions": [
    "tabs", "http://*/*", "https://", "*"
  ],
  "content_scripts": [
    {
      "matches": ["http://*/*","https://*/*"],
      "js": ["main_content_script", jquery.min.js", "json.js"]
    }
  ],
  "browser_action": {
      "name": "Plugin",
      "default_icon": "icon.png",
      "popup": "popup.html"
  }
}

Popup.html

<html>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {

    $('#add').click(function(){
        add();
        alert("add clicked"); 
    });

    $('#save').click(function(){
        alert("save clicked"); 
    });

    $('#delete').click(function(){
       alert("delete clicked"); 
    });
});
</script>

<script>

    //chrome.tabs.sendRequest(integer tabId, any request, function responseCallback)
    //chrome.extension.onRequest.addListener(function(any request, MessageSender sender, function sendResponse) {...}));

    function add(){
       chrome.extension.onRequest.addListener(function(request, sender, sendResponse)
              console.log(request.count); //? nothing in console
        });
</script>

<form action="http://www.xxxxx.com/xxxxx/xxxx/session.php" method="post" enctype="text/plain">
<input type="submit" value="Add" name="add" id="add"/>
<input type="submit" value="Save" name="save" id="save"/>
<input type="submit" value="Delete" name="delete" id="delete"/>
</form>
</html>

main_content_script.js

$(document).ready(function() {

 //var location = window.location.href;
 var checked = $('input:checkbox:checked').length;

    if(checked > 0){

        var values = $('input:checkbox:checked').map(function () {
            //return $(this).parent().next().html(); --> returns the name
            var strong_tag = $(this).parent().next().html();
            var link_tag = $(strong_tag + 'a').html();
            return $(link_tag).attr('href');
            }).get();

    } else {

        return false;

    }

    if(values){
    var count = values.length;
    alert(count + " values selected: " + values);
        chrome.extension.sendRequest({count:count}, function(response) {
            console.log('count sent');  
        });

});

Upvotes: 4

Views: 2213

Answers (2)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94299

chrome.extension.onRequest is not to be used in popup. It is to be used in the background page.

Background page

var count=0;  //"count" is outside of any function
chrome.extension.onRequest(function(request, sender, sendResponse){
          count=request.count;
          console.log(request.count);
});

Popup - use chrome.extension.getBackgroundPage() to get back the variable.

var count = chrome.extension.getBackgroundPage().count;  //get it back
alert("There are "+count+" checkboxes checked.");  //Voilà!

Upvotes: 3

Boris Smus
Boris Smus

Reputation: 8472

The problem here is that your content script is sending messages, but there is no active listener. The lifetime of the popup.html page is from when the browser action is clicked until it disappears. Unless the page happens to exist when you send your request, there's nothing listening to your requests.

To fix the problem, you should setup your listener (chrome.extension.onRequest.addListener) in the background page (which persists for the lifetime of your extension).

Upvotes: 2

Related Questions