javascript - Addon-sdk page-mod 加载了一些奇怪的而不是实际的网页

Question

我尝试使用内容脚本的点击方法，但无法使其正常工作。经过一些调整后，我决定列出 html 正文的所有元素，令我惊讶的是它只加载一个元素

console.log: ever: <div><br data-mce-bogus="1"></div>

这是我的脚本，以防我做坏事。

/lib/main.js

var { Hotkey } = require("sdk/hotkeys");
var pageMod = require("sdk/page-mod");
var self = require("sdk/self");
 
pageMod.PageMod({
    include: "https://www.evernote.com/Home.action#st=p&n=*",
    contentScriptFile: [self.data.url("jquery-1.7.min.js"), self.data.url("my-script.js")],
    onAttach: function(worker) {
                    var newnoteHotkey = Hotkey({
                    combo: "accel-n",
                    onPress: function() {
                            worker.port.emit("clickButton", "#gwt-debug-newNoteButton");
                    }
            });
    }
});

我在那里加载了 jquery，但是没有它我得到了同样的错误

数据/我的脚本.js

self.port.on("clickButton", function(message) {
  console.log(document.body.innerHTML)
});

如你所见，我发布了我的调整，它记录了 HTML 正文部分中的每个元素我想要实现的是运行此命令 $(document.getElementById("gwt-debug-newNoteButton")).click();如果只有我加载了这个元素，它应该可以工作

也许我正在加载的网站有问题？ Evernote.com 确实以一种奇怪的方式加载

Answer 1

首先你有一个问题:你正在 onAttach 事件处理程序中创建一个新的热键，所以如果这个 PageMod 匹配多个页面，你的热键将只适用于最新的一个(因为每次处理程序被调用它创建热键绑定(bind)并覆盖之前的实例)。

不幸的是，Evernote 网站似乎加载了一些 iframe，这些 iframe 也与您在 PageMod 中指定的模式相匹配。这似乎也可能发生，因为 Workers 对象似乎在过去的某些页面中存在，如 this thread 所示。 .

如果你像这样修改你的 main.js 文件

var { Hotkey } = require("sdk/hotkeys");
var pageMod = require("sdk/page-mod");
var self = require("sdk/self");
var array = require('sdk/util/array');

var workerList = [];

pageMod.PageMod({
    include: "https://www.evernote.com/*",
    contentScriptFile: [self.data.url("my-script.js")],
    onAttach: function(worker) {
    workerList.push(worker);
    worker.on('pageshow', function() { array.add(workerList, this); });
    worker.on('pagehide', function() { array.remove(workerList, this); });
    worker.on('detach', function() { array.remove(workerList, this); });
    }
});

var newnoteHotkey = Hotkey({
    combo: "accel-n",
    onPress: function() {
        for (index in workerList) {
           workerList[index].port.emit("clickButton", "#gwt-debug-newNoteButton");
        } 
    }
});

因为某些页面可能会隐藏或显示，并且由于附加到不可见页面的工作人员会抛出错误(as explained here)，解决方案是监听 pagehide 和 pageshow 事件，以便仅保留当前数组中显示的 worker 。

然后在你的 data/my-script.js 中做这样的事情:

self.port.on("clickButton", function(message) {
  var button = document.querySelector("#gwt-debug-newNoteButton");
  if (button) {
      doSomethingWith(button):
  }
})