Question

我有两个内容脚本：

annotationEditor（panel）
editField（pageMod）

插件首先要求用户在annotationEditor创建的弹出面板中输入一些文本。这很完美。文本在变量annotationText中返回。 annotationText存储为全局变量savedText，以便editField可以访问它。

然后我希望editField获取savedText并对其执行某些操作（将其附加到输入字段）。问题是我遇到的是在页面加载时调用pageMod事件onAttach，而不是在“文本被保存”之后。我也找不到PageMod Module的任何其他事件。所以worker.port.emit("editel", [this.annotationAnchor, savedText])也不起作用。

var annotationEditor = panels.Panel({
    width: 220,
    height: 220,
    contentURL: data.url('editor/annotation-editor.html'),
    contentScriptFile: data.url('editor/annotation-editor.js'),
    onMessage: function(annotationText) {
        if (annotationText) {
            // handleNewAnnotation(annotationText, this.annotationAnchor);
            savedText = annotationText;
            annotationEditor.hide();
        }
        annotationEditor.hide();
    },
    onShow: function() {
        this.postMessage('focus');
    }
});

var editField = pageMod.PageMod({
    include: ['*'],
    contentScriptWhen: 'ready',
    contentScriptFile: [data.url('jquery-1.8.3.min.js'), data.url('edit.js')],
    onAttach: function(worker) {
        worker.port.emit("editel", [this.annotationAnchor, savedText]);
    }
});

尝试2：这更接近吗？似乎仍然没有正常工作。我没有在edit.js内容脚本中接收任何消息。

const tabs = require('sdk/tabs');
var editors = [];

function getEditor(tab) {
for (var i = editors.length; i--;)
    if (editors[i].tab===tab) return editors[i];
}

var annotationEditor = panels.Panel({
    width: 220,
    height: 220,
    contentURL: data.url('editor/annotation-editor.html'),
    contentScriptFile: data.url('editor/annotation-editor.js'),
    onMessage: function(annotationText) {
        if (annotationText) {
            var currentEditor = getEditor(tabs.activeTab);
            console.log(currentEditor)
            currentEditor.port.emit("editel",[this.annotationAnchor, annotationText]); 
            annotationEditor.hide();
        }
        annotationEditor.hide();
    },
    onShow: function() {
        this.postMessage('focus');
    }
});

var editField = pageMod.PageMod({
include: ['*'],
contentScriptWhen: 'ready',
contentScriptFile: [data.url('jquery-1.8.3.min.js'),
                    data.url('edit.js')],
onAttach: function(worker) {
    editors.push(worker);
    worker.on('detach', function () {
        detachWorker(this, selectors);
    });
}
});

将currentEditor记录为：

constructor {"contentScriptFile":["resource://jid1-kpzxxdxlwq8qkg-at-jetpack/widget/data/jquery-1.8.3.min.js","resource://jid1-kpzxxdxlwq8qkg-at-jetpack/widget/data/edit.js"],"contentScript":null,"port":{}}

看起来不错吗？

此处还有内容脚本 - edit.js。显然现在它并没有做太多。第一步是让它抓住来自main.js的消息。

self.port.on("editEl", function(el) {
$(el[1]).val(el[0]);
});

Answer 1

您需要使worker成为全局变量。然后在面板worker.port.emit中进行onMessage。

编辑：更好的方法是创建一个工作数组，如文档中的this example所示。然后，要在以后查找当前选项卡的工作人员，您可以执行以下操作：

const tabs = require('sdk/tabs');

var getWorker = function(tab) {
  for (var i = workers.length; i--;)
    if (workers[i].tab===tab) return workers[i];
}

var currentWorker = getWorker(tabs.activeTab);

pageMod事件，用于侦听来自面板的响应

1 个答案: