jQuery가 Facebook에로드되지 않는 이유는 무엇입니까?

Question

상황 : 어떤 페이지에서나 작동하는 크롬 확장 프로그램을 쓰고 있습니다.

문제점 질문 : 페이스 북에 jQuery를로드 할 수 없어 무슨 일이 일어나고 있는지 알고 싶습니다.

가설는 :

가

1. jQuery를가 표면 상 별도의 JSVM 실행 컨텍스트에 크롬 확장을 통해로드되면 페이스 북이 을 메가 마인드 어떻게 든 알고 : 페이스 북은 어떻게 든 모두가 감지 몇 가지 매우 진보 된 기술을 가지고 이 표면 상 별도의 JSVM 실행 컨텍스트를 분리하고 차단합니다. jQuery를이 script.src 및 블록을 통해로드되어
2. 그것을 (나는 를하지 방법이 작업을 수행하지만 대답 충분하지 않은 jQuery를 하나 대신 HTTPS를 통해 제공하는 구글 CDN을 사용하는 경우).

데이터

어떻게 jQuery를로드하지 않습니다 알 수 있습니까?

I 크롬에서 콘솔을 불러옵니다 ⌘⌥J. 나는 할 때 :

> jQuery 
    >> ReferenceError : jQuery is not defined. 
    > $('body') 
    >> Error : Tried to get element "body" but it is not present on the page. 

가 어떻게 페이스 북에 jQuery를로드하려고합니까?

방법 1 (필요하지만 실패) :

manifest.json을 파일에 다음 코드를 통해

:

"content_scripts"   : [ 
            { 
            "matches" : ["<all_urls>"], 
            "js"  : [ 
                "javascript/jq/jquery-1.9.1.min.js",            
                "javascript/jq/non-standard.js" 
                ], 
            "all_frames": true // (or false, same failure) 
            } 
           ] 

방법 2 (작동하지만 insufficent) :

이 SO 응답 (load jQuery into console)에 설명 된 방법을 사용하여 올바른 프로토콜을 허용하도록 수정 :

var jq = document.createElement('script'); 
    jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"; 
    document.getElementsByTagName('head')[0].appendChild(jq); 
    jQuery.noConflict(); 

요약

가설 1은 주요 보안 취약점을 것 이상-타고 웹 브라우저의 별도의 실행 컨텍스트 (즉, 샌드 박스 휴식) 때문에, 매우 어려울 것, 그리고이 될 가능성이 없습니다 제재. 그러므로, 나는 아마도 편집증에 빠졌고 명백한 것을 간과 할 것입니다. 바라건대 여러분 중 하나가 보게 될 것입니다.

부록 (기타 관련 코드)

비 standard.js의 모든 :

$.fn.in_groups_of = function(countPerGroup) { 
     var groups = [], offset = 0, $group; 
     while (($group = this.slice(offset, (countPerGroup + offset))).length) { 
      groups.push($group); 
      offset += countPerGroup; 
     } 
     return groups; 
    }; 

더 의 manifest.json을 :

"manifest_version"  : 2, 
"permissions"    : [ 
            "http://*/", 
            "https://*/", 
            "tabs", 
            "storage", 
            "unlimitedStorage" 
           ], 

Answer 1

Chrome 콘솔에서 콘텐츠 스크립트의 실행 컨텍스트에 대한 액세스 권한이없는 것 같습니다.

잘못되었습니다.

이전 스크린 캐스트는 크롬 개발자 도구의 콘솔 탭을위한 실행 환경을 변경하는 데 사용할 수 있습니다 하단에 두 개의 드롭 다운 상자를 가지고 있음을 보여줍니다 당신은 올바른 위치에서 볼 필요가 개발자 도구 콘솔.
왼쪽은 프레임 컨텍스트 (위쪽 프레임, iframe 등)를 변경하는 데 사용할 수 있으며 오른쪽은 스크립트 컨텍스트 (페이지, 컨텐트 스크립트 등)를 변경하는 데 사용할 수 있습니다.

Answer 2

답안

내 '실험적 방법'에 결함이있는 것 같습니다. Chrome 콘솔의 전제 조건에 대한 가정이 잘못되었습니다. Chrome 콘솔은 콘텐츠 스크립트의 실행 컨텍스트에 대한 액세스 권한을 갖고 있지 않습니다. 따라서 콘솔에서 jQuery가 페이지에 액세스하지 못했다고보고 했음에도 불구하고 실제로 콘텐츠 스크립트의 실행 컨텍스트에서이를 수행했습니다.

이 컨텐츠의 스크립트를 추가하여 검증 된, test.js는 manifest.json을합니다 :

이

"content_scripts"   : [ 
            { 
            "matches" : ["<all_urls>"], 
            "js"  : [ 
                "javascript/jq/jquery-1.9.1.min.js", 
                "javascript/jq/non-standard.js", 
                "javascript/test.js" // <-- add 
                ], 

test.js의 내용은 다음과 같습니다

var jtest = $('body'); 
    alert(jtest); 
    alert(jtest.text()); 

지금은로 이동 어떤 페이지 두 경고 상자가 예상대로 팝업됩니다.

작동합니다!

Answer 3

당신은 지금까지이 모든 것을 알고 있을지 모르지만 누군가가 여전히 유용하다고 생각합니다.

• 원본 페이지 스크립트 : 페이지 자체에 스크립트 Chrome 확장에
  ,

  당신은 몇 가지 "스크립트의 세계"를 가지고있다.

• 콘텐츠 스크립트 : 스크립트를 작성하고 페이지에서 실행합니다.
• 팝업 스크립트 : 팝업 페이지가 있으면 팝업에서 실행됩니다.
• 배경 스크립트 : 글로벌 배경 페이지에서 실행됩니다.

Google은 문서 작업에 탁월한 업무를 수행하므로 모든 스크립트에 대한 수많은 설명서가 제공됩니다. https://developer.chrome.com/extensions.

그러나 귀하의 경우 페이지 스크립트와 콘텐츠 스크립트는 별도의 세계에 있으며 DOM과 일부 Chrome 기본 객체를 공유하지만 생성 한 변수 (또는 객체)는 공유하지 않습니다.

이 경우 콘텐츠 스크립트에 jQuery가 있으면 컨텐츠 스크립트에서 $ 및 jQuery를 사용할 수 있습니다. DOM을 쿼리하는 데 사용할 수 있습니다 (일부 jQuery 이벤트는 예상대로 작동하지 않을 수도 있음). 하지만 페이지에는 $ 및 jQuery가 없습니다 ($가 있지만 jQuery는 아닙니다 ^^).

귀하의 방법 2, 실제로 jQuery를 페이지에 삽입하면 해당 jQuery가 페이지 스크립트가됩니다. 그리고 콘텐츠 스크립트에는 $ 또는 jQuery를 사용할 수 없습니다.

두 가지 방법을 동시에 사용하면 페이지 스크립트에서 jQuery 1을 사용할 수 있고 콘텐츠 스크립트에서 jQuery 2를 사용할 수 있으며 두 개의 다른 jQuery 인스턴스가 가능합니다. 혼란을 야기 할 수도 있지만, 항상 그렇게합니다.