Question

我正在尝试将页面上已检查项目的数量发送到弹出窗口。弹出窗口上的add输入按钮会警告或向控制台发送在网页上检查的复选框数量。

我的脚本没有这样做，我认为可能存在关于消息传递如何工作的混淆。这就是我所拥有的：

清单：

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

});

Answer 1

chrome.extension.onRequest不会在popup中使用。它将在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);
});

弹出 - 使用chrome.extension.getBackgroundPage()取回变量。

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

Answer 2

这里的问题是您的内容脚本正在发送消息，但没有活动的侦听器。 popup.html页面的生命周期是从单击浏览器操作到消失时的生命周期。除非您发送请求时页面恰好存在，否则没有任何内容可以听取您的请求。

要解决此问题，您应该在background page中设置您的监听器（chrome.extension.onRequest.addListener）（在您的分机的有效期内仍然存在）。

Chrome扩展程序：消息传递混乱

2 个答案: