Safari 확장 프로그램에서 웹 페이지에 jQuery 삽입

Question

사파리 확장 프로그램의 웹 페이지에 jQuery를 삽입하고 싶습니다. 하지만 일부 페이지에만 jQuery를 시작/끝으로 추가하면 모든 페이지에 삽입되므로 탐색 속도가 느려집니다. 나는 그것의 온로드 기능을 사용하여 스크립트 태그를 생성하여 그것을 시도 :

initjquerycheck: function(callback) { 
    if(typeof(jQuery) != 'undefined'){ 
     callback(jQuery); 
    }else { 
     window.setTimeout(function() { initjquerycheck(callback); }, 100); 
    } 
} 

그러나 대해서 typeof (jQuery를가) 정의되지 않은 남아 :

var node = document.createElement('script');  
node.onload = function(){ 
    initjquerycheck(function($) { 
     dosomethingusingjQuery($); 
    }); 
}; 
node.async = "async"; 
node.type = "text/javascript"; 
node.src = "https://code.jquery.com/jquery-2.0.3.min.js"; 
document.getElementsByTagName('head')[0].appendChild(node); 

JQuery와로드하면 내가 사용 확인. (console.log()를 사용하여 확인). 디버깅 콘솔에서 console.log (typeof (jQuery)) 만 호출하면 'function'이 반환됩니다. 어떤 생각을 고치는 방법? 미리 감사드립니다!

Answer 1

확장 기능이 삽입 된 스크립트는 웹 페이지의 JavaScript 네임 스페이스에 액세스 할 수 없습니다. 삽입 된 스크립트는 <script> 요소를 만들어 페이지의 DOM에 추가하지만 스크립트에 의해 인스턴스화 된 jQuery 개체는 삽입 된 스크립트가 아닌 페이지의 네임 스페이스에 속합니다.

적어도 두 가지 해결책이 있습니다. 하나는 jQuery를 확장 API를 사용하여 일반적인 방법으로 페이지에 삽입하는 것이다. 이 방법은 타겟팅하는 웹 페이지를 URL 패턴을 사용하여 분류 할 수있는 경우에만 실행 가능합니다.

두 가지 경우, 삽입 된 스크립트와 웹 페이지의 네임 스페이스간에 통신하려면 Window.postMessage을 사용하십시오. 페이지에 <script>을 추가해야하며이 스크립트에는 message 이벤트에 대한 리스너가 있어야합니다. 리스너는 jQuery를 마치 페이지 자체의 "원시"인 것처럼 사용할 수 있습니다.

다음은 필요한 경우 시작할 수있는 몇 가지 코드입니다. bridge.js에서

var s0 = document.createElement('script'); 
s0.type = 'text/javascript'; 
s0.src = 'https://code.jquery.com/jquery-2.0.3.min.js'; 
document.head.appendChild(s0); 

var s1 = document.createElement('script'); 
s1.type = 'text/javascript'; 
s1.src = safari.extension.baseURI + 'bridge.js'; 
document.head.appendChild(s1); 

window.addEventListener('message', function (e) { 
    if (e.origin != window.location.origin) 
     return; 
    console.log(e.data); 
}, false); 

window.postMessage('What jQuery version?', window.location.origin); 

: 확장에서

스크립트 주입

window.addEventListener('message', function (e) { 
    if (e.origin != window.location.origin) 
     return; 
    if (e.data == 'What jQuery version?') { 
     e.source.postMessage('Version ' + $.fn.jquery, window.location.origin); 
    } 
}, false);