Question

似乎允许网站与扩展程序通信的external_connectable功能仍然在开发通道中，但尚未稳定。有没有其他方法允许特定网站与我的分机通信，而我等待此功能变得稳定？ chrome扩展开发人员传统上如何做到这一点？

Answer 1

感谢Rob W指点我的HTML5消息传递方向。为了其他Chrome扩展开发人员的利益，我写的是我试图解决的一般问题以及最终有效的解决方案。

我正在制作一个Chrome扩展程序，可以通过弹出播放器控制选项卡上的音乐播放。当用户点击弹出播放器上的播放/暂停/等时，扩展程序应该能够将该消息传送到网页并返回一个响应，说明操作是否已完成。

我的第一种方法是将内容脚本注入音乐播放器页面。但问题是，内容脚本在“沙箱”中运行，无法访问页面上的本机javascript。因此，内容脚本相当无用（单独使用），因为虽然它可以从扩展中接收命令，但它不会对网页本身产生任何影响。

对我有利的一件事是音乐播放的网站属于我，所以我可以放置我想要的任何javascript，并从服务器提供它。这正是我习惯的优势：我创建了另一个javascript文件，该文件将驻留在网站上并通过页面的窗口对象与上面提到的内容脚本进行通信（即 HTML5消息传递）。这仅适用，因为内容脚本和javascript文件都存在于同一网页中，并且可以共享页面的窗口对象。感谢Rob W指出我的能力。以下是页面上的javascript文件如何通过window对象启动与内容脚本的连接的示例：

content_script.js（通过扩展名注入xyz.com）：

window.addEventListener("message", function(event) {
    if(event.data.secret_key &&
      (event.data.secret_key === "my_secret_key") && 
       event.data.source === "page"){
        if(event.data.type){
            switch(event.data.type) {
                case 'init':
                    console.log("received connection request from page");
                    window.postMessage({source: "content_script", type: 'init', 
                                        secret_key: "my_secret_key"}, "*");
                    break;
            }
        }
    }
}, false);

onpage.js（驻留在服务器上并与xyz.com一起提供）：

window.postMessage({source: "page", type: 'init', 
                    secret_key: "my_secret_key"}, "*");

window.addEventListener("message", function(event) {
    if(event.data.secret_key && 
      (event.data.secret_key === "my_secret_key") && 
       event.data.source === "content_script"){
        if(event.data.type){
            switch(event.data.type) {
                case 'init':
                    console.log("connection established");
                    break;
            }
        }
    }
}, false);

我检查密钥只是为了确保邮件来自我期望的位置。

就是这样！如果有任何不清楚的地方，或者您有任何疑问，请随时跟进！

Answer 2

您可以使用扩展程序在网页旁边注入内容脚本，并使用该扩展程序在网站和扩展程序的背景页之间来回传递消息。

但是，这很乏味，外部可连接性更好。

chrome扩展 - external_connectable的替代？

2 个答案: