Javascript 使用XUL和JS将插件写入Firefox

我想写Firefox插件，当加载某个页面时，例如：www.google.com，在DOM中动态创建一个按钮，当我点击它时，它会将我带到另一个页面，例如：www.stackoverflow.com

注意：此按钮应仅在加载google.com时出现

我搜索得到一些答案，到目前为止没有任何工作，任何帮助将不胜感激。 谢谢

编辑：

非常感谢，这非常有帮助。你能告诉我如何在chrome扩展中做同样的事情吗？我尝试了manifest.json和js文件，但没有成功

这很简单

假设您的“页面修改功能”如下所示：

function install_my_button(domWindow) {

  // insert your button here (e.g: into domWindow.document.body)

  var button = domWindow.document.createElement('BUTTON');
  button.value = 'OTHER DOMAIN';
  domWindow.document.appendChild(button);
  button.addEventListener('click', function(evt) {
    domWindow.location.href = 'http://stackoverflow.com';
  }, false, true); // yes - 4 arguments!

  // that will place the button at the bottom of the page 
  // you may wish to use some CSS to position it, or perhaps
  // find a specific container element within the page in
  // which to place it.

  // prevent multiple handling
  domWindow.__my_button_installed__ = 1; 
}

然后定义一个类似这样的“加载”事件处理程序（请注意，这是我们将此代码限制为在目标域（例如：google.com）上工作的地方）：

其中

WindowListener

定义为：

var WindowListener = {
  setupBrowserUI: function(window, xulWindow, othWindow) {
    window.gBrowser.addEventListener('load', my_load_handler, true); 
  },
  tearDownBrowserUI: function(window) { 
    window.gBrowser.removeEventListener('load', my_load_handler, true); 
  },
  onOpenWindow: function(xulWindow) {
    let domWindow = xulWindow.QueryInterface(Ci.nsIInterfaceRequestor)
                      .getInterface(Ci.nsIDOMWindow);
    domWindow.addEventListener("load", function listener() {
      domWindow.removeEventListener("load", listener, false); 
      var domDocument = domWindow.document.documentElement;
      var windowType = domDocument.getAttribute("windowtype");
      if (windowType == "navigator:browser")
        WindowListener.setupBrowserUI(domWindow);
    }, false);
  },

  onCloseWindow: function(xulWindow) { },
  onWindowTitleChange: function(xulWindow, newTitle) { }
};

---

您不需要为此创建插件。相反，您可以编写脚本（这是一种更简单的方法），如果您愿意，您可以稍后将greasemonkey脚本编译到Firefox插件中。
所有其他主流浏览器都可以运行greasemonkey脚本，因此您可以在任何地方使用相同的脚本。

这里有一个演示插件，它会侦听url中是否有“mozillazine”，如果有，则会添加一个div

下载到桌面，然后拖动它打开firefox浏览器窗口，它将被安装。导航到mozillazine.org，你会看到一个蓝色的div被插入

要自定义：

1） 下载那个 2） 重命名为zip 3） 提取到文件夹 4） 将bootstrap.js编辑为www.google.com，而不是mozillazine。 5） 然后压缩这些内容，并将其命名为xpi，拖动到firefox进行安装（或者使用addon XPICompiler压缩并重命名为xpi并安装到firefox）

---

6） 现在导航到www.google.com的任何页面，它将显示蓝色div

您实际上需要编写一个Firefox“扩展”（又名“插件”）。NPAPI插件（比如Flash/AcrobatReader）是另一回事。这是真的，但如果您希望您的页面能够执行特权操作，这种方法也适用。例如：读取/写入本地文件而不询问用户在哪里。。。greasemonkey脚本要求您已安装greasemonkey。firefox插件非常简单，效率更高。完全满足您的需要，无开销，只需安装一件事。如果您不想下载xpi并“解压缩”，请参阅以下内容：

let windows = wm.getEnumerator("navigator:browser");
while (windows.hasMoreElements()) {
  let domWindow = windows.getNext().QueryInterface(Ci.nsIDOMWindow);
  WindowListener.setupBrowserUI(domWindow);
}
wm.addListener(WindowListener);

var WindowListener = {
  setupBrowserUI: function(window, xulWindow, othWindow) {
    window.gBrowser.addEventListener('load', my_load_handler, true); 
  },
  tearDownBrowserUI: function(window) { 
    window.gBrowser.removeEventListener('load', my_load_handler, true); 
  },
  onOpenWindow: function(xulWindow) {
    let domWindow = xulWindow.QueryInterface(Ci.nsIInterfaceRequestor)
                      .getInterface(Ci.nsIDOMWindow);
    domWindow.addEventListener("load", function listener() {
      domWindow.removeEventListener("load", listener, false); 
      var domDocument = domWindow.document.documentElement;
      var windowType = domDocument.getAttribute("windowtype");
      if (windowType == "navigator:browser")
        WindowListener.setupBrowserUI(domWindow);
    }, false);
  },

  onCloseWindow: function(xulWindow) { },
  onWindowTitleChange: function(xulWindow, newTitle) { }
};