1

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

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

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

当用户单击通知时，我想在我的扩展程序（/src/view/token.html）中创建一个指向 html 的新选项卡，然后从 background.js（我的 socket.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）我应该如何实现我想要做的事情？

谢谢！

4

1 回答 1

3

代码中的问题

  • chrome.tabs.sendMessage()错误的调用模式
  • 由于不共享完整的代码，我假设所有页面都获得了权限，因为清单不会为某些值集生成警告。
  • 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 后跟消息）。

通知.onclick（功能

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

解决上述问题后，我让您的脚本运行。

清单.json

注册后台脚本并授予所需的所有权限。

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

背景.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();

通知.html

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

<html>

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

        </script>
    </head>

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

</html>

通知.js

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

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

输出

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

在此处输入图像描述

参考

于 2013-01-11T06:09:32.853 回答