Mozilla插件开发 - 与不同域的Windows之间进行通信 [英] Mozilla Addon Development - Communicating between windows with different domains

问题描述

我正在尝试创建一个插件，允许用户随意查询字典站点并查看所选单词的定义。我一直在努力寻找一种方法来沟通页面工作者，我必须访问词典网站条目的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，'*'）; PageMod（{
 include：*，
 contentScriptWhen：ready，
 contentScriptFile：
 $ currPage = require（sdk / page-mod [
 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）; 
 
 
函数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）; 
 
 
 
函数getSelected（）{
 if（window.getSelection）{
 return window.getSelection（）。toString（）; 
} else if（document.selection）{
 return document.selection.createRange（）。text; 
} 
 return''; 
 
 $ b $（window）.dblclick（function（）{
 send（）; 
}）; 
 
 window.addEventListener（message，function（event）{
 if（event.origin ==dictionary.reference.com）{
 console.log（收到消息）;} 
}，false）; 
  

解决方案

href =https://developer.mozilla.org/zh-CN/Add-ons/SDK/Guides/Content_Scripts/using_postMessage =nofollow>内容脚本消息。试试这个：

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）;; PageMod（{
 include：*，
 contentScriptWhen：ready，
 contentScriptFile：
 $ currPage = require（sdk / page-mod [
 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）; 
 
 
函数send（）{
 var selected = getSelected（）; 
 if（selected！=）{
 self.port.emit（dblclick，selected）; 
 
 
 
函数getSelected（）{
 if（window.getSelection）{
 return window.getSelection（）。toString（）; 
} else if（document.selection）{
 return document.selection.createRange（）。text; 
} 
 return''; 
 
 $ b $（window）.dblclick（function（）{
 send（）; 
}）; 
 $ b self.on（message，function（message）{
 console.log（received message）;} 
}）; 
  

I am trying to create an addon that will allow the user to query a dictionary site at will and view the definition of a chosen word. I have been struggling to find a way to communicate between the page-worker that I have to access the DOM of the dictionary site entry and the main page that the user is viewing. I know that the page-worker is able to scrape the definition from the DOM, as I am able to see the definition logged to the console. I am having issues getting postMessage and onMessage to cooperate. I am currently attempting to bridge the gap using iframes, though other approaches are welcome.

Here are some bits of my code...

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);

解决方案

You're mixing up regular window messaging with content script messaging. Try this:

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 != ""){
        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");}
});

这篇关于Mozilla插件开发 - 与不同域的Windows之间进行通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！