Как подключить JQuery в расширение браузера Chrome?

Question

[Issue]

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"
        }
    ]
}

При загрузке расширения в браузер хром я получаю ошибку:

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

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

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

Как правильно подключить JQuery в расширении Google Chrome?

Answer 1

[Надим]

Добавь в манифесте следующее разрешение:

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

Это разрешение нужно, чтобы работал eval.

Далее, если тебе где-то нужен jQuery, допустим в файле background.js, то банально используешь там eval:

Нажмите, чтобы развернуть код

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);
	
}

Разумеется надо понимать, что запуск уже своего собственного кода надо инициировать после загрузки jQuery!

Например, так:

Нажмите, чтобы развернуть код

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('Запуск своего кода');
	
	// ...
	
}