Chrome Extension: Message passing confusion_问答_开发者

Chrome Extension: Message passing confusion

开发者 https://www.devze.com 2023-04-06 22:05 出处：网络

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.

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');  
        });

});

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à!

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).