找到干净的解决方案

我找到了一个非常干净的解决方案，它确实使整个问题变得毫无意义，而且当我问这个问题时我确信它存在......我太无知了，也去寻找它。

在 PageMod 构造函数中使用 attachTo: 'top' 只会将脚本附加到顶级文档，而不是任何 iframe。

因此，如果您发现 PageMod 多次附加到您的附加组件，可能是因为它附加到 iframe 以及顶级标签文档。添加 attachTo: 'top' 作为传递给 PageMod 构造函数的对象的属性，您就无需担心 iframe。

对于下面的问题，解决方案是

var _workers = [];

var pageMod = require("sdk/page-mod").PageMod({
    include: /https?:\/\/www\.websitename\.net.*/,
    contentScript: "self.port.on('hello', function() { " +
                   "console.log('['+document.location.href+']: " +
                   "My worker said hello to me!');",
    contentScriptWhen: "end",
    attachTo: 'top',   //<-- add this property to only attach to top level document
    onAttach: function(worker) {
        _workers.push(worker);
        worker.on("detach", function() {
            var ind = _workers.indexOf(this);
            if(ind !== -1) {
                _workers.splice(ind, 1);
            }
        });
        worker.port.emit("hello");
    }
});

当然，如果没有@Noitidart 的帮助，我永远不会确定是 iframes 的原因。

老问题

我正在尝试为 Firefox 编写一个附加组件，它可以修改特定网站的页面。我认为 PageMod 是完美的选择，但我遇到了一些问题。工作人员似乎多次(4 到 2 次)附加到同一个 URL，我不知道为什么会发生这种情况。

我在附加组件的 ma​​in.js 中尝试了以下代码:

var _workers = [];

var pageMod = require("sdk/page-mod").PageMod({
    include: /https?:\/\/www\.websitename\.net.*/,
    contentScript: "self.port.on('hello', function() { " +
                   "console.log('['+document.location.href+']: " +
                   "My worker said hello to me!');",
    contentScriptWhen: "end",
    onAttach: function(worker) {
        _workers.push(worker);
        worker.on("detach", function() {
            var ind = _workers.indexOf(this);
            if(ind !== -1) {
                _workers.splice(ind, 1);
            }
        });
        worker.port.emit("hello");
    }
});

在运行此代码并在单个选项卡中打开 https://www.websitename.net 时，控制台有 2 到 4 个实例

[https://www.websitename.net/]: My worker said hello to me!

这意味着同一个页面有多个 worker 附加到它。 我不知道为什么会这样，我当然不希望这样，因为我打算稍后使用 _workers 数组与附加脚本进行通信。

编辑:

感谢@Noitidart，我现在已经确认在多个 worker 中，只有一个是实际页面，其他是 iframe，这就是每个 worker 的内容脚本可用的 DOM 内容不同的原因。

不过，问题仍然存在。如何确保工作人员(以及内容脚本)不附加到 iframe？

我可以确保未附加到 iframe 的工作人员是被推送到 _workers 的工作人员，但是有没有办法将内容脚本附加到 worker 一旦我确定它是正确的？我不希望多次附加相当大的内容脚本。

编辑 2:

再次感谢@Noitidart，我想我有一些解决方案:如果检测到 worker 附加到 iframe 则销毁。

更好的解决方案是只将主要内容脚本附加到正确的工作人员，但目前我无法找到一种方法将内容脚本附加到正确的工作人员 (worker.contentScriptFile = data.url ("file.js") 似乎不起作用)。

因此，当前的黑客:

verify.js:

if(window.top !== window) {
    self.port.emit('iframe');
}
else {
    self.port.emit('hi');
}

ma​​in.js:

var _workers = [];

var pageMod = require("sdk/page-mod").PageMod({
    include: /https?:\/\/www\.websitename\.net.*/,
    contentScriptFile: [data.url("verify.js"), data.url("my_main_script.js")],
    contentScriptWhen: "end",
    onAttach: function(worker) {
        worker.on("detach", function() {
            var ind = _workers.indexOf(this);
            if(ind !== -1) {
                _workers.splice(ind, 1);
            }
        });

        worker.port.on("hi", function() {
            //Not iframe, keep this one.
            //If there is a way, attach 'my_main_script.js'
            //to this worker now, and not before.

            _workers.push(worker);

            //Emit 'ack' to tell my_main_script.js
            //that we're good to go.
            worker.port.emit('ack');
        });

        worker.port.on("iframe", function() {
            //iframe, get rid of it.
            worker.destroy();
        });
    }
});

我应该注意，脚本在 contentScriptFile 中出现的顺序并不重要，每个附件都会加载两个脚本。因此，希望 verify.js 在加载 my_main_script.js 之前销毁 worker 是没有意义的。

同样，这个解决方案并不完整。如果我没有足够强调这一点，我真的希望有一种方法可以将 my_main_script.js 附加到正确的 worker，而不是为所有 worker 加载它。如果有这样的方法，请评论/回答。

最佳答案

在 contentScript 或网站上运行的任何内容中(我对 sdk 了解不多)，检查 if (window.frameElement == true) 如果它是 true 而不是它的框架那么你想要取消附加。

编辑: 也许 window.frameElement 不会在框架内工作。如果它不起作用，请执行此操作 if (window.top != window) 然后它是一个框架

关于javascript - PageMod 多次将 worker 附加到同一个 URL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22382201/