【问题标题】：Message passing in Chrome Extension在 Chrome 扩展程序中传递消息
【发布时间】：2013-01-10 22:47:56
【问题描述】：

我对什么算作 chrome 扩展视图感到很困惑，它直接与我可以用来在不同组件之间传递消息的函数相关联。

让我先描述一下我想做什么；

我的 background.html 根据通过 socket.io 从 node.js 服务器接收到的一些事件创建桌面通知。

当用户点击通知时，我想在我的扩展 (/src/view/token.html) 中创建一个指向 html 的新选项卡，然后从 background.js（我的套接字.io 代码）到新选项卡。我想通过消息传递来做到这一点。

所以，基本上，我在做

 var notification = webkitNotifications.createNotification(image, title, content);
 notification.onclick(function(e){

    chrome.tabs.create({url: "/src/view/tokens.html"}, function(tab){
        //just to make sure the tab is activated..
        chrome.tabs.onUpdated.addListener(function(tabId){
            if(tabId == tab.id) {
                chrome.tabs.sendMessage({data: whatever_data}, tabId); 
            }
        });
    });

 });

现在我的问题出在我的 tokens.js（在 tokens.html 中加载），我尝试使用以下命令收听消息：

chrome.extension.onMessage.addListener(function (msg, _, sendResponse) {
console.log(msg);
});

但我收到“未捕获的类型错误：无法读取未定义的属性 'onMessage':，所以我假设我无权访问 tokens.html 中的 chrome.extension ？？？

我用弹出页面（浏览器操作弹出）和选项页面尝试了这个，它们都工作得很好。所以，我猜我创建的视图不是 chrome 扩展页面？

现在我很困惑... 1) 什么被认为是可以访问 chrome.* API 的 chrome 扩展页面 2）我应该如何实现我想做的事情？

谢谢！

【问题讨论】：

标签： google-chrome-extension message-passing

【解决方案1】：

代码中的问题

chrome.tabs.sendMessage()错误的调用模式
由于不共享完整的代码，我假设所有页面都获得了权限，因为清单不generate warnings 用于某些值集。
notification.onclick(function 创建Uncaught TypeError: Property 'onclick' of object #<Notification> is not a function 错误

Chrome.tabs.sendMessage

chrome.tabs.sendMessage({data:whatever_data},tabId)的调用形式；应该是chrome.tabs.sendMessage(tabId,{"data": "whatever_data"}); （标签 ID 后跟消息）。

notification.onclick(函数

使用notification.onclick = (function(将处理程序分配给onclick属性（因为它不是函数）

解决上述问题后，我让你的脚本运行起来了。

manifest.json

注册后台脚本并获得所需的所有权限。

{
    "name": "Message Passing",
    "description": "This is used as a message passing",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "permissions": [
        "notifications",
        "tabs"
    ]
}

background.js

修改代码以消除错误

//Created Notification
var notification = webkitNotifications.createNotification("icon.jpg", "title", "content");
//Added onclick property
notification.onclick = (function (e) {
    //Created new tab
    chrome.tabs.create({
        url: "/src/view/notification.html"
    }, function (tab) {
        //just to make sure the tab is activated..
        chrome.tabs.onUpdated.addListener(function (tabId) {
            if (tabId == tab.id) {
                //Send Mesage
                chrome.tabs.sendMessage(tabId, {
                    "data": "whatever_data"
                });
            }
        });
    });
});
notification.show();

notification.html

确保没有inline script 或<script> 标签符合CSP。

<html>

    <head>
        <script src="notification.js">

        </script>
    </head>

    <body>
        <p>This is a notification</p>
    </body>

</html>

notification.js

使用您的脚本没有任何变化！

chrome.extension.onMessage.addListener(function (msg, _, sendResponse) {
    console.log(JSON.stringify(msg));
});

输出

您可以在新的tab 中看到收到的消息。

参考文献

【讨论】：

谢谢！抱歉，chrome.tabs.create 中的错误...在我的代码中，它首先是 tabId，而不是数据...当我在这里输入时...我没在看...我会试一试，然后报告回来...
你的工作得很好......但我仍然不明白为什么我以前的不工作...... notification.onclick 也是一个错字......在我的原始代码中，它是 notification.onclick = function(e) ...唯一的区别是我今天在 Windows 机器上...我在 Mac 上进行测试...但我认为这不是问题..... ......奇怪......
另一件事是，在 Mac 机器上，如果我执行 console.log(chrome)。我只看到 chrome.app 而不是 chrome.extension... 很奇怪...
@h0cked：当我在 Windows 中执行 console.log(chrome) 时，我只能看到 chrome.app，因为 chrome.extension 仅限于 chrome-extension:// 协议