如何使用firefox插件中的jQuery和Javascript？

我無法在頁面中創建新元素。當頁面加載時，我檢查頁面和域名，這是工作，但我不知道如何在正確的窗口頁面中創建新元素。如何使用firefox插件中的jQuery和Javascript？

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

    } 
}

我的問題是：如何使用JavaScript和jQuery從Firefox插件時，我想操縱HTML在正確的窗口內容？從這裏需要什麼

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

工作。

來源

2011-09-02 golddragon007

你確定代碼甚至被執行？你是否在if語句中嘗試alert（或console.logs）？ – roselan

您是否在使用Mozilla的[Add-On SDK]（https://addons.mozilla.org/en-US/developers/builder）構建您的擴展？ – Binary9

if（pathnameis =='/ index.php'） { alert（'something'）; //其作品！ } 我沒有使用插件bulder，是的，我用sdk（Komodo）和我壓縮它，（但不是拉鍊是問題，因爲菜單正在工作！） – golddragon007

此代碼有一堆問題。首先，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)

來源

2011-09-02 13:35:53

如果我想innerhtml白色JavaScript，我該怎麼做？ – golddragon007

wnd.document.getElementById（「id」）。innerhtml =「something」; – golddragon007

這裏是你可以使用結合示例代碼的模板。我還添加了一個額外的聲明，以便您可以看到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!'); 
     }); 
    } 
}

來源

2013-05-11 10:24:27 swmcdonnell

如何使用firefox插件中的jQuery和Javascript？

回答

相關問題