Изменение компонента Ember.js расширением для Chrome

Пишу расширение для Stepik, хотелось бы добавить пару кнопок в стандартный редактор. Добрался до самого редактора, добавил кнопку привязал событие, казалось бы все работает:

Сначала хотел напрямую править редактор CKEDITOR:

const ckeName = Object.keys(CKEDITOR.instances)[0]; // имя экземпляра CKEDITOR
const cfg = CKEDITOR.instances[ckeName].config; // текущий конфиг

// добавляю идентификаторы кнопок в конфиг
cfg.toolbar_StepEditToolbar.push({
    name: "tools",
    items: ["tools", "test1", "test2"]
});

// уничтожаю текущий редактор и пересоздаю с новым конфигом
CKEDITOR.instances[ckeName].destroy(false);
const editor = CKEDITOR.replace(ckeName, cfg);

// добавляю кнопку
editor.ui.addButton('test1', {
    icon: "",
    label: "Test1",
    command: "",
    toolbar: "tools, 100"
});

И, казалось бы успех:

Кнопка Test1

Но! После того, как пересоздается редактор, весь остальной интерфейс перестает на него реагировать: нельзя сохранить текущий шаг, нельзя перейти к следующему. Редактор просто живет своей жизнью.

Я еще немного покопался, интерфейс Stepik написан на ember.js:

> Ember.VERSION
'3.25.4'

Скачал расширения для просмотра дерева компонентов, ну и вполне логично, что CKEDITOR - это часть ember.js.

Вопросы: могу ли я, используя inline-скрипт изменить компонент Ember? Как получить имя приложения Ember? Как добраться до определенного компонента Ember? И, наконец, как изменить этот компонент?


Ответы (0 шт):