[英]Mozilla Addon Development - Communicating between windows with different domains
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.
我一直在努力寻找一种方法,以便在必须访问词典站点条目DOM的页面工作人员与用户正在查看的主页之间进行通信。 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.
我知道页面工作人员能够从DOM抓取定义,因为我能够看到定义记录到控制台。 I am having issues getting postMessage and onMessage to cooperate.
我在获取postMessage和onMessage合作方面遇到问题。 I am currently attempting to bridge the gap using iframes, though other approaches are welcome.
我目前正在尝试使用iframe弥补这种差距,尽管也欢迎使用其他方法。
Here are some bits of my code... 这是我的一些代码...
index.js: 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: 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 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: 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");}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.