크롬 확장을 개발할 때 jquery 추가하기

-1

크롬 확장을 개발할 때 jquery를 추가하는 방법에 대해 여러 게시물을 보았습니다.하지만 대부분은 오래되었고 사용되지 않는 manifest 옵션을 사용합니다 (예 : "background_page"). 이미 "content_scripts"회원을 추가했습니다. 나는 여전히 "잡히지 않은 ReferenceError : $가 정의되지 않았습니다"이됩니다.크롬 확장을 개발할 때 jquery 추가하기

가장 간단한 시나리오를 촬영 - 여기에 jQuery를 추가하는 크롬의 확장 샘플에 구축 - 우리는 같은 것이다 :

매니페스트 :

{ 
    "manifest_version": 2, 

    "name": "myExt", 
    "description": "myExt Desc", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 

    "content_scripts": [ 
    { 
     "js": [ "jquery.js", "myScript.js" ], 
     "matches": [ "http://*/*", "https://*/*" ] 
    } 
    ] 
}

myScript.js :

를

//var myObj = { 
// execute: function() { 
//  $("#btn1").click(function() { 
//   alert('I was clicked indeeeed!'); 
//  }); 
// } 
//} 

//document.addEventListener('DOMContentLoaded', function() { 
// myObj.execute(); 
//}); 

$("#btn1").click(function() { alert('iae'); });

popup.html :

내가 같은 디렉토리에있는 모든 파일 (popup.html, icon.png, manifest.json을, myScript.js, jquery.js)가

<html> 
 
    <head> 
 
    
 
     <title>Getting Started Extension's Popup</title> 
 
     <style> 
 
      body 
 
      { 
 
       min-width: 357px; 
 
       overflow-x: hidden; 
 
      } 
 
      img 
 
      { 
 
       margin: 5px; 
 
       border: 2px solid black; 
 
       vertical-align: middle; 
 
       width: 75px; 
 
       height: 75px; 
 
      } 
 
     </style> 
 
     <!-- 
 
      - JavaScript and HTML must be in separate files: see our Content Security 
 
      - Policy documentation[1] for details and explanation. 
 
      - 
 
      - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html 
 
     --> 
 
     
 
     <script src="myScript.js"></script> 
 
     
 
    </head> 
 
    <body> 
 
     <table> 
 
      <tr> 
 
       <td> 
 
        Hey 
 
       </td> 
 
       <td> 
 
        There 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        This is an extension! 
 
       </td> 
 
       <td> 
 
        <input type="button" id="btn1" value="Click Me" /> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </body> 
 
    </html>

. HTML이나 스크립트에는 오류가 없습니다. 내가 [팝업 검사]를 클릭 upong 얻을 수있는 유일한 오류는 다음과 같습니다 catch되지 않은 ReferenceError가 : $는

내가 무엇을 놓치고를 정의되어 있지?!?

출처

2014-10-23 Veverke

popup.html의 내용은 무엇입니까? –

popup.html – Veverke

실제로 팝업에 jQuery가 포함되지 않았습니다.

매니페스트에 정의 된 콘텐츠 스크립트는 매니페스트에 지정한 페이지에만 적용됩니다. 귀하의 경우 http 및 https 구성표에있는 모든 페이지가 표시되지만 팝업에는 유효한 URL chrome-extension://yourextensionsidhere/popup.html이 삽입되어 삽입되지 않습니다.

콘텐츠 스크립트는 개념적으로 사용자가 제어하지 않는 페이지에 대한 것입니다. 결과적으로 Chrome에 스크립트를 삽입 할 수 있다고하더라도 isolated context 원칙으로 인해 페이지의 코드에서 여전히 작동하지 않습니다.

확장 프로그램 페이지를 완전히 제어 할 수 있으므로 <script> 태그가있는 스크립트를 수동으로 포함해야합니다.

<script src="jQuery.js"></script> 
<script src="myScript.js"></script>

는 더 나은 콘텐츠 스크립트가하는 일의 이해와 그들이 어떻게 확장의 자신의 페이지에 관련에 대한 Architecture Overview을 읽어보십시오.

#btn이 DOM에 들어가기 전에 코드가 실행되기 때문에 따로 코드를 $(document).ready()으로 마무리해야합니다.

출처

2014-10-28 13:49:03 Xan

감사합니다. Xan, 당신은 내가 요청한 것을 제공해주었습니다 - 작동하게하는 "빠른 수정"- 더 나은 이해를 얻기위한 자료를 제공했습니다 (developer.chrome.com/extensions/overview#arch). – Veverke

당신이로드하는 페이지 (내용 스크립트)에 대한 dev 도구 콘솔에 오류가 없다는 소리가 들리지만, dev 도구 콘솔 (확장 기능에 대한 "Inspect Popup"에서 활성화 됨))에서 언급 한 오류가 표시됩니다.

popup.html이 일부 인라인 스크립트에서 $을 사용하고 있거나 jquery.js가 비어 있다고 생각됩니다. 전자의 경우 사용하기 전에 <script> 태그를 jquery에로드해야합니다. 콘텐츠 스크립트는 이미 매니페스트에서 수행 한 작업을 통해 액세스해야하지만 팝업에서 사용할 수 있다고 생각하지 않습니다.

출처

2014-10-24 15:31:46

의 내용을 추가했습니다. 첫 번째 단락에 대해 Brian, 안녕하세요. 맞습니다. 대답의 두 번째 단락에 대해 : popup.html에는 javascript가 전혀 없습니다.

크롬 확장을 개발할 때 jquery 추가하기

답변

관련 문제