삽입 된 jQuery를 사용할 수 없습니다.

Question

Chrome 확장 프로그램에 웹 페이지 (콘텐츠 스크립트 포함)에 jQuery를 삽입하려고합니다.

나는 시도하지만 저를 혼란스럽게합니다.

여기 내 manifest.json입니다 :

{ 
    "name": "test", 
    "description": "test content script.", 
    "version": "0.0.1", 
    "background": { 
     "scripts": ["jquery-1.10.2.js", "popup.js"] 
    }, 
    "permissions": ["tabs", "notifications", "http://*/*", "https://*/*"], 
    "browser_action": { 
     "default_title": "test", 
     "default_icon": "icon.png" 
    }, 
    "options_page": "manage.html", 
    "content_scripts": [ 
     { 
      "matches": ["http://*/*", "https://*/*"], 
      "js": ["jquery-1.10.2.js"] 
     } 
    ], 
    "manifest_version": 2 
} 

JQuery와 - 1.10.2.js :

/*jquery's orign code*/ 
    console.log("end of jquery"); 

내가 콘솔 메시지를 볼 수 있지만 난 여전히 jQuery를 사용할 수 없습니다.

간단한 웹 사이트를 작성하고 <script> 태그를 추가하는 대신 콘텐츠 스크립트를 통해 jQuery를 포함하려고했습니다.

개발자 도구 콘솔에서 window.jQuery 또는 $("li").siblings()을 입력합니다.

페이지에 jQuery를 포함하면 작동하지만 콘텐츠 스크립트가 삽입 된 경우 jQuery은 정의되지 않음으로 표시됩니다.

왜 이런 일이 발생합니까?

Answer 1

상황은 this question과 매우 비슷합니다.

콘텐츠 스크립트는 라이브 in their own, isolated JavaScript context입니다. 이는 확장에 의해 추가 된 스크립트가 페이지 또는 다른 스크립트와 충돌하지 않도록하기 위해 수행됩니다.

Dev Tools 콘솔을 열면 페이지의 컨텍스트, iframe의 컨텍스트 (격리되어있는 컨텍스트) 및 컨텐트 스크립트 컨텍스트와 같은 웹 페이지의 모든 컨텍스트에서 콘솔 메시지가 표시됩니다. 그것이 로그 메시지를 보는 이유입니다.

그러나 모든 메시지를 한 번에 표시 할 수 있지만 실행하려고하면 하나의 컨텍스트로 이동해야합니다. 기본적으로 페이지의 컨텍스트는 콘솔 바로 위에 <top frame>입니다.

을 그리고 당신은 페이지의 컨텍스트에 일부 자바 스크립트를 사용할 수 있도록하려는 경우, 페이지에 주입해야합니다

가 확장의 맥락에서 뭔가를 실행하려면, 당신은 그것을로 전환해야 그 자체는 <script> 태그입니다. this question을 참조하십시오.

Answer 2

저는 이것을 사용했는데 정상적으로 작동합니다. 어쩌면 jquery의 경로가 올바르지 않을 수 있습니다.

"content_scripts": [{ 
    "matches": ["http://*/*", "https://*/*"], 
    "js": ["js/jquery.min.js", "js/socket/socket.io.js","js/socket/client.js"], 
    "run_at": "document_idle" 
}]