javascript - Firefox 扩展上独立于选项卡的 jQuery

Question

我正在开发一个基于 jQuery 的 Firefox，如本 Answer here 中所述。 .

实现答案中提供的示例后，一切正常，但问题是 Firefox 选项卡之间的代码以某种方式链接，并且 example.doc 始终引用最后打开的选项卡。

• 打开 tab1:plugin-example 已添加到当前页面。
• this.doc 引用 tab1。
• 打开 tab2:plugin-example 已添加到当前页面(tab2)。
• this.doc 现在引用 tab2
• 返回查看 tab1:this.doc 仍然引用 tab1。
• 点击 tab1 上的 plugin-example 将会作用于 tab2 中的 plugin-example。

如何使我的代码在选项卡之间独立？

以下是代码摘录:

(function() {
    jQuery.noConflict();
    $ = function(selector,context) { 
        return new jQuery.fn.init(selector,context||example.doc); 
    };
    $.fn = $.prototype = jQuery.fn;

    example = new function(){};

    example.run = function(doc,aEvent) {
        if (doc.getElementById("plugin-example")) return;
        this.doc = doc;
        this.main = main = $('<div id="plugin-example">').appendTo(doc.body).html('Example Loaded!');
        this.main.click(function() { //<--- added this function
                example.main.html(example.doc.location.href);
        });
        main.css({ 
            background:'#FFF',color:'#000',position:'absolute',top:0,left:0,padding:8
        });
    };
    // Bind Plugin
    var delay = function(aEvent) { 
        var doc = aEvent.originalTarget; setTimeout(function() { 
            example.run(doc,aEvent); 
        }, 1); 
     };
    var load = function() { 
        gBrowser.addEventListener("DOMContentLoaded", delay, true); 
    };
    window.addEventListener("pageshow", load, false);

})();

Answer 1

您的代码(覆盖脚本)只会在每个窗口运行一次，而不是每个选项卡运行一次。因此每个窗口只有一个 example 实例。因此 example.doc 将被设置为最后调度的 DOMContentLoaded。

您的函数应该正确关闭文档并避免全局状态。这就是我要写的人(话又说回来，我会像瘟疫一样避免使用 jquery(在附加组件中)...)

// Use strict mode in particular to avoid implicitly var declarations
(function() {
  "use strict";

  // Main runner function for each content window.
  // Similar to SDK page-mod, but without the security boundaries.
  function run(window, document) {
    // jquery setup. per https://stackoverflow.com/a/496970/484441
    $ = function(selector,context) {
      return new jq.fn.init(selector,context || document); 
    };
    $.fn = $.prototype = jq.fn;

    if (document.getElementById("my-example-addon-container"))  {
      return;
    }
    let main = $('<div id="my-example-addon-container">');
    main.appendTo(document.body).text('Example Loaded!');
    main.click(function() { //<--- added this function
      main.text(document.location.href);
    });
    main.css({
      background:'#FFF',color:'#000',position:'absolute',top:0,left:0,padding:8
    });
  };

  const log = Components.utils.reportError.bind(Components.utils);

  // Do not conflict with other add-ons using jquery.
  const jq = jQuery.noConflict(true);

  gBrowser.addEventListener("DOMContentLoaded", function load(evt) {
    try {
      // Call run with this == window ;)
      let doc = evt.target.ownerDocument || evt.target;
      if (!doc.location.href.startsWith("http")) {
        // Do not even attempt to interact with non-http(s)? sites.
        return;
      }
      run.call(doc.defaultView, doc.defaultView, doc);
    }
    catch (ex) {
      log(ex);
    }
  }, true);
})();

这里是a complete add-on as a gist 。只需放入一份 jquery 副本就可以了。

PS:将此转发于 jquery in extensions question