..., так вот, прежде, чем начать читать документацию, ознакомься, пожалуйста, со следующим списком ссылок:
Расширение построено на основе Chrome Manifest V3
В папке src/
хранятся файлы главной страницы (которая открывается по нажатию на иконку) расширения, но сейчас она не задействована.
В папке public/
хранятся корневые файлы расширения. То есть расширение на данный момент может спокойно работать без папки src/
, так как src/
на данный момент не содержит никаких реализаций.
-
Изначально задумывалось написать на основе React весь код, но сейчас стало ясно, что смысла в этом пока нет, а если и есть, то нужно научить файлы из папки
public/
собираться в тот вид, в котором они сейчас. По большей части, хочется это сделать для работы с Typescript. Нужда в этом возникла из-за того, что я пришёл с C++ и я за строгую типизацию, соответственно, за явное приведение типов и явную обработку ошибок. -
Не удалось изначально сесть за задачу и спроектировать примерную сборку проекта. Поэтому теперь нужно переработать файловую структуру так, чтобы это было всё написано не на нативных файлах
.js
в папкеpublic/
, а из папкиsrc/
файлы языка Typescript традиционно компилировались вbuild/public
, как это происходит сейчас, при этом расширение было легко отлаживаемо внутри браузера. -
Кажется, что в расширениях Chrome API есть множество неисправленных багов, таких как:
- Работа метода удаления инжектированного скрипта
chrome.scripting.removeCSS(uninjection)
, объявленного внутри промиса. Данный метод не возвращает никаких значений, напримерtrue
илиfalse
, тем самым от него невозможно получить возвращаемый код и убедиться в программе, что стили отключены действительно. Текущий фикс - использование цикла ;(
- Работа метода удаления инжектированного скрипта
-
Это скорее пункт успеха, а не сложности. В Практикуме замечена ошибка (точнее это даже не ошибка, далее об этом), что при подключении стилей по линковке
.css
файлов в структуреhtml
или с неизвестных источников, на веб-факультете, в некоторых уроках не проходятся задания. Примерный вид ошибок:Что-то пошло не так... :(
. Эта, якобы ошибка, вызвана заботой о безопасности пользователя - не позволять подключать скрипты с иных источников, кроме разрешённых, допустим любой файл по ссылке из нашегоcode.s3
можно подключить и тогда уроки будут проходиться. Сейчас же, текущее решение в переключении тёмной темы не нуждается в подключении таблицы стилей по ссылкам в сайт Практикума. Решение оказалось куда проще и даже, не побоюсь этого слова, неочевидным - инъекция CSS. Наше расширение позволяет избежать всех этих багов простым безопасным методом отmanifest v3
-chrome.scripting.insertCSS(injection)
и все уроки проходит без ошибок. На сегодняшний день - проверено (но не во всех уроках, а лишь в тех, в которых были ошибки с перезаписью стилей по ссылке), решение является рабочим.
main.js
- фоновый скрипт или же, традиционно,service-worker
, служит в роли back-end в расширении: обрабатывает получаемые сообщения от самого же расширения. Подробнее об отправке сообщений здесь. Здесь реализован главный функционал - мозги.index.js
- служит в роли front-end в расширении. С части front-end меняется всего лишь иконка внутри кнопки, для видимости. По нажатию кнопки переключения темы на страницеindex.html
, отправляется сообщение расширению.main.js
принимает сообщение и присылает ответ на запрос скриптуindex.js
. В зависимости от текущего состояния: включена тёмная тема или нет, и меняется иконка внутри кнопки.index.html
- на данный момент, это просто красивая страничка для переключения темы. В дальнейшем планируется к удалению и будет оставлен только файлoptions.html
, для тщательной настройки расширения. Файлindex.html
своим существованием занимает позицию в быстром доступе среди расширений, но это вообще не нужно, так как планируется, чтобы кнопка переключения тёмной темы существовала только внутри сайта Практикума. Как итог: возможность переключать тёмную тему в Практикуме будучи на любой странице/вкладке - избыточная и не нужная.styles/
- папка стилей, подключаемых во время инъекцирования тёмной темы в Практикуме. Сейчас хочется, чтобы это были файлы.scss
в исходниках.
constructor
- содержит в себе запуск всех необходимых фоновых процессов и сервисов во время работы расширения.- Сперва, при установке,
Initialize
- объявление всех служебных переменных:состояние тёмной темы - вкл/выкл?
- Метод
SaveState
внутриInitialize
служит заменой длинномуchrome.storage.local.set
, хоть иchrome.storage.local
сокращён к виду#LOCAL_STORAGE
, я решил, что лучше отобразить явно зачем я вызываю этот метод (да, вероятно, что это в действительности погоня за избыточным объяснением, потенциально к рефакторингу). LoadTabs
- прогрузка всех окон Практикума и ожидание к прогрузке, учитывая сохранённый статус тёмной темы. если возникает ошибка (из-за Chrome API), при клике на вкладку, на неё адекватно можно переключиться только с помощьюctrl + tab
, но даже если вы захотите переключиться на вкладку без долгого удержания мыши на ней, Chrome API всё равно будет думать, что вы тянете егоза яйцавкладку и кричать что-то по типуruntime.lastError
, решение - рекуррентный вызов LoadTabs с помощью интервалов, пока ошибка не пройдёт (т.е. пока пользователь, так сказать, не отпустит курсор)- Всё, что внутри
services
, это Chrome-сервисы для обработки, обязательные к работе.
- Сперва, при установке,