firefox 확장 기능에서 jQuery 사용하기

모든 웹 페이지의 기초에 툴바를 가져 오는 firefox 확장 기능을 개발하려고합니다.firefox 확장 기능에서 jQuery 사용하기

는 지금까지 내가 jQuery를 작동하게 관리하고 나는 mr.on = 함수()에

$("body",mr.env).css("background","black");

를 실행하여 증명했다.

이 코드는 addon과 관련된 메뉴 항목을 클릭 할 때마다 웹 페이지의 배경색을 검정색으로 만 만듭니다.

하지만, 내가 그것을 단순히 실패

$('body',mr.env).append(' <img src="img/check.png" /> ');

를 실행하려고합니다. 오류 콘솔에 오류를 표시하지 않으며 이미지가 표시되지 않습니다.

왜 그럴까요?

<script src="window.js"/> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="jquery-1.4.4.min.js"></script> 

<!-- Firefox Tools menu --> 
<menupopup id="menu_ToolsPopup"> 
    <menuitem id="menu_crypt_demo" class="" image="" 
      label="Use DnsResolver?" insertbefore="javascriptConsole" accesskey="o" 
      oncommand="DnsResolver.onMenuItemCommand(event);"> 
    </menuitem> 
</menupopup>

이 자바 스크립트 파일 (window.js) :

이

는 XUL 내 오버레이입니다

var DnsResolver = { 
    onLoad: function() { 
    // initialization code 
    this.initialized = true; 

}, 

onMenuItemCommand: function() { 
testextension.on(); 
window.open("chrome://dnsresolver/content/window.xul", "", "chrome"); 
} 

}; 


window.addEventListener("load", function(e) { DnsResolver.onLoad(e); }, false); 

if(!testextension){ var testextension={};} 

(function(){ 

var mr=testextension; 


mr.on=function(){ 
    mr.loadLibraries(mr); 
    var jQuery = mr.jQuery; 
    var $ = function(selector,context){ return new jQuery.fn.init(selector,context||window._content.document); }; 
    $.fn = $.prototype = jQuery.fn; 

    mr.env=window._content.document; 

      /*$("body",mr.env).css("background","black");*/ 
    $('body',mr.env).append('<img src="img/check.png" />'); 


$(mr.env).ready(function(){ 

    // hide and make visible the show 
    $("span.close a",mr.env).click(function() { 
     $("#tbar"),mr.env.slideToggle("fast"); 
     $("#tbarshow",mr.env).fadeIn("slow"); 
    }); 

    // show tbar and hide the show bar 
    $("span.show a",mr.env).click(function() { 
     $("#tbar",mr.env).slideToggle("fast"); 
     $("#tbarshow",mr.env).fadeOut(); 
    }); 
}); 


    /*$("body",mr.env).css("background","black");*/ 
} 

// Loading the Jquery from the mozilla subscript method 
mr.loadLibraries = function(context){ 
    var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"] 
               .getService(Components.interfaces.mozIJSSubScriptLoader); 
    loader.loadSubScript("chrome://dnsresolver/content/jquery-1.4.4.min.js",context); 
    var jQuery = window.jQuery.noConflict(true); 
    if(typeof(jQuery.fn._init) == 'undefined') { jQuery.fn._init = jQuery.fn.init; } 
    mr.jQuery = jQuery; 
} 

})();

출처

2011-02-14 alex

하나의 코멘트 사용자 대역폭을 절약 할 수있는 JDK (Google)를로드하는 데 CDN을 사용하는 것이 좋을 것입니다. –

@Tom 아주 나쁜 생각, FireFox 확장은 하드 드라이브에 있으므로 하드 드라이브에서로드하는 것이 빠릅니다. –

Firefox 3부터는 , <script> 또는 신뢰할 수없는 출처에서로드 된 콘텐츠에 포함 된 다른 요소에서 크롬 리소스를 더 이상 참조 할 수 없습니다. 이 제한 사항은 신뢰할 수없는 소스에서 정의한 요소와 신뢰할 수있는 확장에서 추가 한 요소 모두에 적용됩니다. 그러한 참조를 명시 적으로 허용해야하는 경우 contentaccessible 플래그를 예로 설정하면 이전 버전의 Firefox에서 발견 된 동작을 얻을 수 있습니다.

출처

2011-02-15 23:54:23 Neil

FireFox의 HTML 탭을 사용하여 실제로 img 요소가 추가되었는지 확인합니다. 그것은 아마도 추가되었고 귀하의 URL에 문제가 있습니다.

내 FireFox 확장 기능을 빌드 할 때 해당 파일이 확장명을 지정하고 찾아 볼 수있는 특수 프로토콜 (chrome : // think)을 통해 위치한다는 것을 기억합니다.

출처

2011-02-14 23:59:52

** $ ('body', mr.env) .append (""); ** 액세스 거부 오류가 발생합니다. 또한 당신은 URL에 대해 옳았습니다. 이미지를 추가하려고하는 body 태그의 컨텍스트에서 이미지를 참조하기 때문에 상대 참조가 내 특정 코드에서 작동하지 않는 것 같습니다. 브라우저에로드 된 웹 페이지로 이동합니다. – alex

도구 모음을 통해 URI (chrome : //dnsresolver/content/check.png)에 액세스 할 수 있습니까? –

액세스가 거부되었습니다. – alex

firefox 확장 기능에서 jQuery 사용하기

답변

관련 문제