Добавление jquery в разработку расширения chrome

-1

Я рассмотрел несколько сообщений о добавлении jquery в разработку расширения chrome, но большинство из них старые и используют варианты манифеста, которые были устаревшими (например, «background_page»). Я уже добавил член «content_scripts». Я до сих пор получаю «Неоткрытый ReferenceError: $ не определен».Добавление jquery в разработку расширения chrome

Принимая простейший возможный сценарий - опираясь на образец расширения Chrome, чтобы добавить 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:

<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>

У меня есть все файлы в том же каталоге (popup.html, Icon.png, manifest.json, myScript.js, jquery.js). В html и в скрипте ошибок нет. Единственная ошибка я получаю upong нажав [Проверить всплывающее окно] является: Uncaught 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 для лучшего понимания того, что делать скрипты содержания и как они соотносятся с собственными страницами вашего расширения.

Как и в стороне, вам все равно придется обернуть свой код в $(document).ready(), так как ваш код будет выполнен до #btn в DOM.

источник

2014-10-28 13:49:03 Xan

Спасибо Xan, вы предоставили то, что я попросил, - «быстрое исправление» для его работы. И также предоставил мне материал для лучшего понимания (developer.chrome.com/extensions/overview#arch). – Veverke

Похоже, вы говорите, что в консоли инструментов разработчика нет ошибок для загружаемых страниц (+ контент-скриптов), но консоль инструментов разработчика для всплывающего окна (активирована с помощью функции «Просмотр всплывающего окна» для вашего расширения) показывает указанную вами ошибку.

Я бы предположил, что ваш popup.html использует $ в некотором встроенном скрипте, или ваш jquery.js как-то пуст. Если первый, убедитесь, что вы поместили тег <script>, чтобы загрузить jquery там, прежде чем использовать его. У вашего скрипта контента должен быть доступ к нему уже, из того, что вы сделали в манифесте, но я не думаю, что он будет доступен для всплывающего окна.

источник

2014-10-24 15:31:46

Привет Брайан, о вашем 1-м абзаце: вы поняли это правильно. Правильно. О втором абзаце вашего ответа: в popup.html нет javascript. Только тег

Добавление jquery в разработку расширения chrome

ответ

Смежные вопросы