paulenot
@paulenot
IT Issue

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

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?
  • Вопрос задан
  • 123 просмотра
Решения вопроса 1
@zkrvndm
Софт для автоматизации
Добавь в манифесте следующее разрешение:
...
"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('Запуск своего кода');
	
	// ...
	
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы