Javascript Mozilla插件开发-在具有不同域的windows之间通信

我正在尝试创建一个插件，允许用户随意查询字典站点并查看所选单词的定义。我一直在努力寻找一种在页面工作者（我必须访问字典站点条目的DOM）和用户正在查看的主页之间进行通信的方法。我知道页面工作者能够从DOM中获取定义，因为我能够看到记录到控制台的定义。我在获取postMessage和onMessage以进行合作时遇到问题。我目前正在尝试使用iFrame来弥补这一差距，不过也欢迎使用其他方法

下面是我的一些代码

index.js：

var getDefinition = "var def = document.getElementsByClassName('def-content');" +
                    "definition = def[0].textContent;" +
                    "word = document.getElementsByClassName('js-headword');" +
                    "word = word.textContent;" +
                    "self.port.emit('dialog', definition);" +
                    "var thiswin = document.getElementById('example').contentWindow;" +
                    "thiswin.postMessage(definition, '*');"

currPage = require("sdk/page-mod").PageMod({
    include: "*",
    contentScriptWhen: "ready",
    contentScriptFile: [
        data.url("jquery.js"),
        data.url("jquery-ui.min.js"),
        data.url("define.js"),
    ],
    onMessage: function(message){
        console.log("received message");
    },
    onAttach: function(worker){
        workers.push(worker);

        worker.on("message", function(definition){
            console.log("received message");
        });

        worker.port.on("dblclick", function(selected, thispage){
            newPage = require("sdk/page-worker").Page({
                contentURL: "http://dictionary.reference.com/browse/" + selected,
                contentScriptWhen: "ready",
                contentScriptFile: [
                    data.url("jquery.js"),
                    data.url("jquery-ui.min.js"),
                    data.url("iframe.js")
                ],
                contentScript: getDefinition,
                onMessage: function(message){
                    console.log("received message");
                }
            });
        });
    }
});

define.js：

function calldictionary(definition){
    console.log("here comes calldictionary");
    console.log(definition);
    $('div#definition').text(definition);
    $('#define').dialog("open");
}

function send(){
    var selected = getSelected();
    if (selected != ""){
        var mainwin = document.getElementById('example').contentWindow;
        $('iframe#example').attr('src', 'http://dictionary.reference.com/browse/' + selected);
        self.port.emit("dblclick", selected);
    }
}

function getSelected() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

$(window).dblclick(function() {
    send();
});

window.addEventListener("message", function(event){
    if (event.origin == "dictionary.reference.com"){
    console.log("received message");}
    }, false);

function calldictionary(definition){
    console.log("here comes calldictionary");
    console.log(definition);
    $('div#definition').text(definition);
    $('#define').dialog("open");
}

function send(){
    var selected = getSelected();
    if (selected != ""){
        self.port.emit("dblclick", selected);
    }
}

function getSelected() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

$(window).dblclick(function() {
    send();
});

self.on("message", function(message){
    console.log("received message");}
});

---

你把定期的窗口消息和电子邮件弄混了。试试这个：

index.js

var getDefinition = "var def = document.getElementsByClassName('def-content');" +
                    "definition = def[0].textContent;" +
                    "word = document.getElementsByClassName('js-headword');" +
                    "word = word.textContent;" +
                    "self.port.emit('dialog', definition);";

currPage = require("sdk/page-mod").PageMod({
    include: "*",
    contentScriptWhen: "ready",
    contentScriptFile: [
        data.url("jquery.js"),
        data.url("jquery-ui.min.js"),
        data.url("define.js"),
    ],
    onMessage: function(message){
        console.log("received message");
    },
    onAttach: function(worker){
        workers.push(worker);

        worker.on("message", function(definition){
            console.log("received message");
        });

        worker.port.on("dblclick", function(selected, thispage){
            newPage = require("sdk/page-worker").Page({
                contentURL: "http://dictionary.reference.com/browse/" + selected,
                contentScriptWhen: "ready",
                contentScriptFile: [
                    data.url("jquery.js"),
                    data.url("jquery-ui.min.js"),
                    data.url("iframe.js")
                ],
                contentScript: getDefinition,
                onMessage: function(message){
                    worker.postMessage(message);
                }
            });
        });
    }
});

define.js：

function calldictionary(definition){
    console.log("here comes calldictionary");
    console.log(definition);
    $('div#definition').text(definition);
    $('#define').dialog("open");
}

function send(){
    var selected = getSelected();
    if (selected != ""){
        var mainwin = document.getElementById('example').contentWindow;
        $('iframe#example').attr('src', 'http://dictionary.reference.com/browse/' + selected);
        self.port.emit("dblclick", selected);
    }
}

function getSelected() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

$(window).dblclick(function() {
    send();
});

window.addEventListener("message", function(event){
    if (event.origin == "dictionary.reference.com"){
    console.log("received message");}
    }, false);

function calldictionary(definition){
    console.log("here comes calldictionary");
    console.log(definition);
    $('div#definition').text(definition);
    $('#define').dialog("open");
}

function send(){
    var selected = getSelected();
    if (selected != ""){
        self.port.emit("dblclick", selected);
    }
}

function getSelected() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

$(window).dblclick(function() {
    send();
});

self.on("message", function(message){
    console.log("received message");}
});

---

非常感谢你！这允许窗口相互通信，尽管我收到了关于加载混合活动内容的警告。我曾希望我所建立的能够绕过这一点，但显然没有。我做错了什么？这可能是您在define.js文件的“send”函数中注入的iframe。你不需要那个iframe，这就是页面工作者的作用。我编辑了答案并删除了那部分。我不确定到底是哪一部分。我假设它是定义从字典窗口传递到主窗口的地方。不过，看起来问题可能是将数据从http传输到https的结果。有没有办法解决这个问题？是的，我更新了这两个文件以反映您的建议。如果您已经从define.js中删除了iframe注入，那么我很确定您没有生成该警告，因为您没有发出任何HTTP请求（至少在您显示的代码中没有），您只是将数据从加载项脚本传递到内容脚本。这可能是页面本身的问题