How to include jQuery in Chrome browser extension?

Question

JavaScript

manifest.json:

{
  "name": "Main JS",
  "description": "Пользовательский скрипт с использованием JQuery",
  "version": "1.0",
  "manifest_version": 2,
    "permissions": [
        "activeTab"
    ],
    "background": {
        "scripts": ["jquery.js","main.js"]
        //"persistent": false
    },
    "content_scripts": [
        {
            "matches":["http://localhost/*"],
            "js":["jquery.js", "main.js"],
            "run_at": "document_end"
        }
    ]
}

When loading the extension in chrome browser I get the error:

Uncaught TypeError: Cannot read properties of undefined (reading 'createElement')

Контекст
    jquery.js
Трассировка стека
    jquery.js:937 (анонимные функции)

var el = document.createElement( "fieldset" );

How to properly include jQuery in Google Chrome extension?

Answer 1

Add the following permission to your manifest:

...
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
...

This permission is needed for eval to work . Further, if you need jQuery
somewhere , let's say in the background.js file , then you simply use eval there :

Click to expand the code

jQueryDownload(); // Запускаем загрузку jQuery

// Функция для загрузки jQuery:

async function jQueryDownload() {
  
  // Загружаем библиотеку jQuery как текст с оф. сайта и записываем в переменную code:
  var code = await (await fetch('https://code.jquery.com/jquery-3.6.0.min.js')).text();
  
  // Выполняем код:
  window.eval(code);
  
}

Of course, you need to understand that the launch of your own code must be initiated after loading jQuery !
For example, like this:

Click to expand the code

jQueryDownload(); // Запускаем загрузку jQuery

// Функция для загрузки jQuery:

async function jQueryDownload() {
  
  // Загружаем библиотеку jQuery как текст с оф. сайта и записываем в переменную code:
  var code = await (await fetch('https://code.jquery.com/jquery-3.6.0.min.js')).text();
  
  // Выполняем код:
  window.eval(code);
  
  // Запуск своего кода:
  $(startMyJavaScriptCode);
  
}

// Функция уже со своим кодом:

function startMyJavaScriptCode() {
  
  // ...
  
  console.log('Запуск своего кода');
  
  // ...
  
}