Chrome Extension '$' не отображается во всплывающем окне

Я создаю свое первое расширение chrome и столкнулся с проблемой использования jQuery во всплывающем окне. Когда я проверяю всплывающее окно, у меня появляется ошибка: Uncaught ReferenceError: $ is not defined, хотя я включаю свою локальную копию jQuery в manifest.json. Я могу console.log в popup.js, но библиотека jQuery, по-видимому, не загружается. Я искал родственные вопросы, но не может определить проблему - пожалуйста, сообщите

manifest.json

{ 
    "manifest_version":2, 
    "name":"extension", 
    "version":"0.1", 
    "content_scripts":[ 
     { 
      "matches": [ 
       "<all_urls>" 
      ], 
      "js":["jquery-3.1.1.min.js","content.js","popup.js"] 
     }], 
    "browser_action":{ 
       "default_icon":"icon.png", 
       "default_popup":"popup.html" 
      } 
     , 
    "background":{ 
     "scripts":["background.js"] 
    }  

}

popup.html

<!DOCTYPE html> 
<script src="popup.js"></script> 
<div> 
Search RT for Movie: <input type="text" value=""><input type="submit" id="bleh"> 
</div>

popup.js

$(document).ready(function(){ 
    function d(c){ 
     console.log(c) 
    } 
    d('hi') 
    $('#bleh').click(function(){d('bi')}) 
})

источник

2017-01-29 st4rgut

Вы должны фактически загрузить JQuery на вашей странице. – SLaks

Я попытался загрузить jQuery в popup.js, но получил ту же ошибку – st4rgut

Вы загружаете * popup.js * в своем всплывающем окне и в качестве сценария содержимого. Обычно это плохая идея. Скрипты, если они специально не написаны для обоих контекстов, должны быть только в одном или другом. – Makyen

You нужно загрузить jQuery в всплывающее окно. Вы можете сделать это, добавив <script> тег для него:

popup.html:

<!DOCTYPE html> 
<script src="jquery-3.1.1.min.js"></script> 
<script src="popup.js"></scrip> 
<div> 
    Search RT for Movie: <input type="text" value=""><input type="submit" id="bleh"> 
</div>

источник

2017-01-29 03:14:54 Makyen

Спасибо, я смог заставить его работать, используя ваши предложения. Однако он будет только console.log в раскрывающемся окне всплывающего окна «проверка элемента». нормальное окно разработчика только регистрировалось «привет». Ты знаешь почему? – st4rgut

Существует несколько различных консолей (http://stackoverflow.com/a/38920982/3773011). Какой из них используется для конкретного вызова 'console.log()' зависит от того, в какой области и контексте выполнялся 'console.log()'. Я не совсем уверен, что именно то, что вы говорите, произошло. Пожалуйста, укажите, к какому DevTools вы обращаетесь. Например, какой DevTools является «нормальным окном разработчика»? – Makyen

Я имел в виду консоль браузера, спасибо, что прочитал ваш предыдущий пост на консолях, и думаю, что сейчас понимаю – st4rgut

Chrome Extension '$' не отображается во всплывающем окне

ответ

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