Проблемы с добавлением компонента CSS/JS: упрочнение ссылок для сохранения их функциональности

Краткое содержание (TL;DR):

  • Проблемы с подключением ссылок на JavaScript и CSS для включения всплывающих подсказок Robustify на гиперссылках на нашем форуме Discourse.
  • Есть некоторые сходства с этим предыдущим случаем, хотя мы пока не обращаемся к API Robustify; возможно, в будущем стоит пойти этим путём, но изначально мы планировали просто включить всплывающие окна для корректно оформленных гиперссылок.

Подробности:

Пишу с, надеюсь, простым вопросом о внедрении небольшого приложения на CSS/JS на нашем форуме Discourse: мы пытаемся использовать удобное приложение, разработанное командой Mementoweb, которое добавляет всплывающее окно к любым гиперссылкам на странице, позволяя выбрать между доступом к сайту или просмотром его ранее сохранённой версии, если ссылка больше не работает. Это действительно крутая функция!, и мы надеемся, что она поможет решить некоторые неизбежные проблемы, возникающие при возвращении к сайту через пару лет и обнаружении нерабочих ссылок на устаревшие страницы. Изначально я надеялся просто проверить, будет ли это работать, если один из нас вручную сгенерирует код на сайте Robustify (пример).

Приложение работает на нескольких строках кода — ссылки оборачиваются в более длинный тег a href, а в тегах head добавляются ссылки на таблицу стилей CSS и некоторый JavaScript-код. Я немного сомневался, разрешит ли Discourse кастомизацию через JavaScript, но был очень воодушевлён, прочитав руководство для новичков и увидев, насколько широкими возможностями для модификаций он обладает. Мы используем удалённую тему (Sam’s Simple Theme), и я попытался добавить наш код в заголовок сайта как новый компонент:


Мне пока не удалось запустить это, хотя вчера я думал, что решил проблему, изучив плагины и изменив значение типа JS на “text/discourse-plugin” version=“0.8.13”. Также я пробовал решить проблему с небольшими вариациями, например, переместив CSS (прямая ссылка на таблицу стилей вместо DOI; копирование тегов напрямую в пространство CSS; включение как встроенный CSS и т. д.), но безрезультатно — сообщения с оборачиваемыми ссылками всё ещё отображаются без всплывающего окна:


Буду очень благодарен за любые советы!, а если я случайно найду решение, я подниму этот пост.

Можете ли вы предоставить скриншот консоли JavaScript вашего браузера и вкладки «Сеть»? Возможно, это проблема политики безопасности контента (CSP), которая препятствует загрузке JS-кода на страницу.

Спасибо, Фаизан :slight_smile: Ниже скриншот, сразу не вижу проблем с CSP, но готов попробовать на другой машине, если это поможет:

Код бегло просмотрел, и кажется, что какое-то перезаписывание мешает включению тегов JavaScript, показанных на скриншоте в предыдущем сообщении:

image

Не уверен на 100%, связано ли это с заменой значения script-type с text/javascript на text/discourse-plugin; есть ощущение, что с исходным значением оно тоже не работало, и в коде компонента больше нет ссылки на DOI JS.

Спасибо за поддержку по этому вопросу — интересно, не будет ли проще попытаться настроить полный API, если возникнут проблемы с запуском отдельных ссылок.