使用XUL和JS将Addon写入Firefox

Question

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

注意：此按钮仅在加载google.com时显示。

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

编辑：

非常感谢，这非常有帮助。 你可以指导我如何在chrome扩展中做同样的事情吗？ 我尝试使用manifest.json和js文件，但没有运气！

Answer 1

这很简单。

假设您的“页面修改功能”看起来像这样：

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; 
}

然后定义一个'load'事件处理程序，它看起来像这样（请注意，这是我们将此代码限制为在目标域上工作的地方（例如：google.com）：

const Cc = Components.classes;
const Ci = Components.interfaces;
let consoleService = Cc["@mozilla.org/consoleservice;1"]
                       .getService(Ci.nsIConsoleService);
function LOG(msg) { consoleService.logStringMessage("EXTENSION: "+msg); }

let wm = Cc["@mozilla.org/appshell/window-mediator;1"]
           .getService(Ci.nsIWindowMediator);

var my_load_handler = function (evt) {
  try {
    var browserEnumerator = wm.getEnumerator("navigator:browser");
    while (browserEnumerator.hasMoreElements()) {
      var browserWin = browserEnumerator.getNext();
      var tabbrowser = browserWin.gBrowser;
      var numTabs = tabbrowser.browsers.length;
      for (var index = 0; index < numTabs; index++) {
        var currentBrowser = tabbrowser.getBrowserAtIndex(index);
        var domWindow = currentBrowser.contentWindow.wrappedJSObject;            
        // identify your target page (google.com or www.google.com)
        if (/\/\/(?:www\.)?google.com/.test(domWindow.location.href)) {
          // install the privileged method (if it's not already there!)
          if (!domWindow.hasOwnProperty('__my_button_installed__') {
            install_my_button(domWindow);
          } 
        } 

      }
    }
  } catch (e) {
    LOG(e);
  }
}

你需要为所有（当前和未来）chromeWindow元素运行它：

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

其中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) { }
};

Answer 2

下面是一个演示插件，如果在网址中找到'mozillazine'就会收听，如果是，那么它会添加一个div。

https://www.dropbox.com/s/7zzlobbonkzucqw/demo%20listen%20page%20load%20window%20listener.xpi

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

定制：

1）下载2）重命名为zip 3）提取到文件夹4）编辑bootstrap.js为www.google.com而不是mozillazine。 5）然后压缩该内容，并将其命名为xpi，拖动到firefox进行安装（或使用插件XPICompiler压缩并重命名为xpi并安装到firefox）6）现在导航到任何带有www.google.com的页面，它将会显示蓝色div

Answer 3

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