从 popup.html 到 content.js 的 Chrome 扩展 sendMessage 不起作用答案

【问题标题】：Chrome Extension sendMessage from popup.html to content.js not working从 popup.html 到 content.js 的 Chrome 扩展 sendMessage 不起作用
【发布时间】：2013-03-12 02:45:02
【问题描述】：

我正在尝试构建一个扩展，它将数据从 popup.html 发送到选项卡圆顶，但我无法让 sendMessage 工作，我不明白为什么。我正在遵循这个指导方针：https://developer.chrome.com/extensions/messaging.html

这是我的来源：

manifest:
{
   "manifest_version": 2,
   "name": "OMG Campaign Preview Maker",
   "description": "Easy OMG Campaign Preview Maker",
   "background": {  "scripts": ["background.js"]},
   "version": "0.1",
   "content_scripts": [
        {
          "matches": ["http://*/*", "https://*/*"],
          "js": ["jquery-1.7.min.js", "content.js"]
        }
    ],
   "browser_action": {
      "default_icon": "logo_128.jpg",
      "popup": "popup.html",
      "default_popup": "popup.html"
   },
   "icons": {
      "128": "logo_128.jpg"
   }
}

popup.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<h1>Clicks</h1>
<p>extra1:
  <input type="text" name="extraclicks[]" id="extra1">
  <br>
  extra2:
  <input type="text" name="extraclicks[]" id="extra2">
  <br>
  extra3:
  <input type="text" name="extraclicks[]" id="extra3">
  <br>
  <br>
  <input type="submit" name="sendclicks" id="sendclicks" value="Invia Clicks">
</p>
</body>
</html>

popup.js

function sendClicks(){
    console.log("popup.js > sendClicks()");
    var clicksArr = new Array();

    $("input[name='extraclicks\\[\\]']").each(function(i, value){
        clicksArr.push($(this).val());
    });

    chrome.tabs.getSelected(null, function(tab) {
        console.log("popup.js > tab id: "+tab.id)
        chrome.tabs.sendMessage(tab.id, {type:"clicks" },
            function(response) {
                console.log(response.msg);
            }
        );
    });
    console.log("avra' inviato?");
}

$(function(){
    console.log("popup.js > OMD Extension ready");
    $('#sendclicks').click(function(){sendClicks();});
});

content.js

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    console.log("content.js > onMessage");

    if (request.type == 'clicks') {
        console.log("content.js > clicks");
        sendResponse({msg: "success"});
    }
});

虽然我可以在控制台中完美地看到从 popup.js 生成的日志，但我没有看到 content.js 启动的任何日志。我做错了什么？

【问题讨论】：

我尝试在content.js 中写入console.log("I'm here");，但在检查器控制台中什么也看不到。我怀疑文件是否已加载。

标签： javascript google-chrome-extension communication

【解决方案1】：

哎呀，我想你只是向 popup.js 本身发送消息......

getSelected in popup.js 监听弹出选项卡的活动（它也是 chrome 中的选项卡）因此，标签 ID 实际上是弹出标签，而不是插入 content.js 的标签

顺便说一句，getSelected 已弃用。尝试替代方案？ http://developer.chrome.com/extensions/tabs.html#method-getCurrent

【讨论】：

这很奇怪，getSelected 在谷歌在其消息传递指南中放置的示例中，顺便说一下，如果我切换标签，console.log("popup.js > tab id: "+tab.id) 返回一个不同的数字。如果 id 引用 popup.html，则在切换选项卡时打印的值不应更改。此外，在 getCurrent 参考中它说“如果从非选项卡上下文（例如：背景页面或弹出视图）调用，则可能未定义。”这是我的情况。

【解决方案2】：

好吧，我傻了…… 错误的是......我正在观看的检查员页面。 content.js 中的“console.log”打印在 TAB INSPECTOR CONSOLE 而不是扩展名上！

我希望它会帮助其他人。

【讨论】：