0

как к расширению подключить библиотеки jQuery ?

manifest.json

   {
    "name": "SomeName",
    "description": "SomeDesc",
    "version": "1.0",
    "manifest_version": 3,
    "content_scripts": [
        {
          "matches":["<all_urls>"],
          "js": [
            "lib/jQuery.min.js",
            "lib/ion.rangeSlider.min.js",
            "main.js"
          ]
        }
    ],
    "action":{
        "default_popup": "index.html",
        "default_icon": "favicon.ico"
    },
    "permissions": ["storage", "activeTab", "scripting"]
}

index.html

<html>
    <head>
        <link rel="stylesheet" href="/style/style.css">
        <!--Plugin CSS file with desired skin-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
        
      </head>
    <body>
          <input type="text" class="js-range-slider" name="my_range" value="" />

      <script src="main.js"></script>
    </body>
  </html>

main.js

$(".js-range-slider").ionRangeSlider();

в итоге выдаёт ошибку , Uncaught ReferenceError: $ is not defined - что означает что библиотека не подключилась.

1 ответ 1

0

нашёл способ как можно подключить , вся проблема была что я подключал jQuery как cdn ссылкой а надо было загрузить в папку с расширениям и подключить в html.

manifest.json

   {
    "name": "SomeName",
    "description": "SomeDesc",
    "version": "1.0",
    "manifest_version": 3,
    "action":{
        "default_popup": "index.html",
        "default_icon": "favicon.ico"
    },
    "permissions": ["storage", "activeTab", "scripting"]
}

index.html

<html>
    <head>
        <link rel="stylesheet" href="/style/style.css">
        <!--Plugin CSS file with desired skin-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
        <script src="lib/jQuery.js"></script>
      </head>
    <body>
          <input type="text" class="js-range-slider" name="my_range" value="" />

      <script src="main.js"></script>
    </body>
  </html>
1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 11 июн 2022 в 12:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.