输出

Question

我对被视为chrome扩展视图的内容感到很困惑，它直接链接到我可以用来在不同组件之间传递消息的函数。

让我先描述一下我想要做的事情;

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

当用户点击通知时，我想在我的扩展名（/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);
});

但是我得到“Uncaught TypeError：无法读取未定义的属性'onMessage'，所以我假设我无法访问tokens.html中的chrome.extension ???

我尝试使用弹出页面（浏览器操作弹出窗口）和选项页面，它们都运行得很好。所以，我想我创建的视图不是Chrome扩展页面？

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

谢谢！

Answer 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”}）; （标签后跟消息）。

<强> 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中看到收到的消息。

enter image description here

邮件传递Chrome扩展程序

1 个答案:

代码中的问题

的manifest.json

background.js

notification.html

notification.js

输出

参考