Question

我无法在页面中创建新元素。我在页面上载时检查页面和域名，这是有效的，但我不知道如何在正确的窗口页面中创建新元素。

window.addEventListener("load", function() { myExtension.init(); }, false);

var myExtension = {
  init: function() {
    var appcontent = document.getElementById("appcontent");   // browser
    if(appcontent)
      appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
  },

  onPageLoad: function(aEvent) {
var unsafeWin = aEvent.target.defaultView;
        if (unsafeWin.wrappedJSObject) unsafeWin = unsafeWin.wrappedJSObject;

var locationis = new XPCNativeWrapper(unsafeWin, "location").location;
var hostis = locationis.host;
//alert(hostis);
if(hostis=='domain.com')
{
    var pathnameis=locationis.pathname;
    if(pathnameis=='/index.php')
    {
        $("#left .box:eq(0)").after('<div id="organic-tabs" class="box"></div>'); // this code somewhy doesn't working, but if I copy to FireBug it't work.
    }
}

  }
}

我的问题是：当我想在正确的窗口内容中操作html时，如何使用firefox插件中的Javascript和jQuery？从这里需要什么

$("#left .box:eq(0)").after('<div id="organic-tabs" class="box"></div>');

工作。

Answer 1

此代码存在许多问题。例如，appcontent不是浏览器，gBrowser是。所以它应该是：

init: function() {
  gBrowser.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
},

然后，使用wrappedJSObject绝对没必要（而且你的方式也不安全）。

var wnd = aEvent.target.defaultView;
var locationis = wnd.location;

最后，您尝试在浏览器文档中选择一个元素（运行脚本的文档），而不是在加载到选项卡中的文档中。您需要为jQuery提供一个明确的上下文来处理：

$("#left .box:eq(0)", wnd.document)

但你不应该像这样使用jQuery，它定义了许多可能与其他扩展冲突的全局变量。相反，您应该调用jQuery.noConflict()并在myExtension中为jQuery创建别名：

var myExtension = {
  $: jQuery.noConflict(true),

  ....

  myExtension.$("#left .box:eq(0)", wnd.document)

Answer 2

以下是您可以使用的模板，其中包含您的示例代码。我还添加了一个附加语句，以便您可以看到jQuery的另一种用法。重点：

您必须先加载jQuery才能使用它。您应该替换要在Chrome中使用的jQuery库文件，例如，在chrome / content目录中。
使用 window.content.document 作为每个jQuery的上下文对网页内容的操作
使用此作为成功搜索结果的上下文来帮助您在正确的位置插入代码。


window.addEventListener('load', myExtension.init, false);

var myExtension = {
    jq : null,  
    init : function() {
        var app;

    // Load jQuery
        var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"].getService(Components.interfaces.mozIJSSubScriptLoader);
        loader.loadSubScript("chrome://myExtension/content/jquery-1.5.2.min.js");
        myExtension.jq = jQuery.noConflict();

        // Launch extension
        if ((app = document.getElementById("appcontent"))) {
            app.addEventListener("DOMContentLoaded", myExtension.run, true);
        }
    },

    run : function() {

        // make sure this is the correct Web page to change
        var href = event.originalTarget.location.href;
        if (href && href.match(/http:\/\/(www\.)?domain\.com\/(index\.php)/i)) {
            changeScreen();
        }
    },

    changeScreen : function() {

        // make changes to the screen
        // note the "window.content.document) in the first jQuery selection
        myExtension.jq("#left .box:eq(0)", window.content.document).after('');

                // note the use of "this" to use the search results as the context
        myExtension.jq("#right", window.content.document).each(function() {
            myExtension.jq("tr td", this).append('MATCH!');
        });
    }
}

如何使用firefox附加组件中的jQuery和Javascript？

2 个答案: