Я пишу ContentScript для расширения Chrome. В скрипте я хочу импортировать JavaScript (на самом деле JS и CSS) и инициировать класс из этого скрипта.
Чтобы обеспечить правильную загрузку Javascript, я следовал указаниям нескольких сообщений SO, таких как this , this и this .
var link = document.createElement( "link" );
document.body.appendChild(link);
link.onload = function(){
console.log("link loaded");
var script = document.createElement('script');
document.body.appendChild(script); //or something of the likes
script.onload = function () {
...
console.log("script loaded");
// somehow ContentTools is undefined even after the script is loaded
editor = ContentTools.EditorApp.get();
editor.init('*[data-editable]', 'data-name');
console.log("all finished")
};
script.src = "https://....min.js";
};
link.href = "https://....min.css";
link.type = "text/css";
link.rel = "stylesheet";
Я предполагаю, что этот способ вызова ContentTools.Editor во внутренней части вложенной загрузки является хорошим способом гарантировать правильную загрузку правильных зависимостей CSS и JS. Тем не менее, когда я запускаю его как расширение Chrome внутри ContentScript, он выдает ошибку с Undefined ContentTools в качестве referenceerror, но я вижу сообщения «ссылка загружена» и «скрипт загружен».
Очевидно, что ContentTools загружены и определены (см. Скриншот). И если я выполняю весь скрипт прямо в консоли, все работает. Похоже, основная причина заключается только в скрипте содержимого Chrome Extension, так или иначе, editor = ContentTools...
был вызван до полной загрузки скрипта.
Поскольку это только ошибка в расширении Chrome, но не в консоли, я немного растерялся здесь. Здесь также приветствуется решение, связанное с jQuery.