Flutter: Создание расширения «Получение ссылок для онлайн-кинотеатров» для Chrome

Привет, я автора телеграм-канала FlutterPulse, хотел поделиться с пользователями хабра расширением для Google Chrome, а также способом его создания.

Расширение создано для получения ссылок для программы yt-dlp для последующего скачивания файлов локально. Пока поддерживается только сайт телеканала Пятница friday.ru

Для кого данная статья:

• Люди, которые не имеют отношения к программированию, но хотят скачать файл локально и самостоятельно

• Люди, которые хотят самостоятельно написать расширение для браузера на языке Flutter

Предыстория

Иногда так бывает, что хочется посмотреть сериал\шоу где-нибудь на даче, где нет интернета. Можно, конечно, скачать с торрента, но туда же он тоже как-то попадает)))))

У меня уже был написан код на python для трёх кинотеатров — Пятница, Тнт‑премьер, Телеканал Ю. Посмотреть его можно тут

Хотелось написать именно расширение для браузера, чтобы было проще получать ссылки. Конечно, видел статью-перевод на habr по этой теме, но я дополню некоторыми нюансами.

Ну а почему Flutter? Обычно же всё-таки пишется на js?! Да, но я не люблю js), хотелось попробовать что-то новое, ну и, напомню, что я автора телеграм-канала FlutterPulse и хотелось написать авторскую новость для своего канала.

Установка и ссылка для скачивания расширения

Данный раздел будет полезен для обеих групп пользователей (и для юзеров, и для программистов), причём для юзеров это будет последний раздел, а программисты его пока пропускают

• Скачиваем проект и распаковываем в какую-нибудь папку. Всё кроме папки build/web можно удалить

• Откроем Chrome и перейдем к chrome://extensions/

• Проверяем включен ли Режим разработчика

• Нажимаем Загрузить распакованное и выбираем нашу папку web (из предыдущего шага)

  

  Мы видим, что расширение успешно добавлено:

  

• Заходим на сайт любого шоу или сериала на сайте телеканала Пятница, например chiefbattle.friday.ru

• 

  Открываем наше расширение

• Расширение создаёт ссылки только на последний эпизод, на весь сезон, либо на все сезоны

  

• Мы можем скопировать 1 строку, либо все ссылки сразу. Можно их сохранить в какой-нибудь файл, либо вставить в командную строку, но об этом чуть позже

• Сначала нам надо скачать программу yt-dlp для своей операционной системы и открываем папку со скачанной программой

• Если Вам нужно скачать 1 файл, то можно прямо в адресную строку вставить скопированный текст и нажать Enter

  

• Если файлов несколько, рекомендую создать файл с расширением cmd или bat (например 1.bat) прямо в папке со скачанной программой, открыть его блокнотом, вставить все скопированные строчки, сохранить и запустить

• Наслаждаться скачанными файлами))))

А теперь про Flutter

Конечно, по ссылке из предыдущего поста Вы всегда можете скачать последнюю версию и самостоятельно похимичить))), но я всё-таки расскажу в чём фишка.

• Файл index.html я взял из статьи, не стал его изменять

• Файл manifest.json тоже не сильно поменялся, я добавил немного permission

{
    "manifest_version": 3,
    "name": "Ссылки для yt-dlp",
    "description": "A Chrome extension powered by Flutter Web",
    "version": "1.0",
    "permissions": [
        "tabs",
        "activeTab",
        "webRequest",
        "webRequestBlocking",
        "clipboardWrite"
    ],

    "action": {
        "default_popup": "index.html"
    },
    "host_permissions": [
        "https://*.friday.ru/*",
        "http://*.friday.ru/*"
    ]
}

• Т.к. у нас расширение, которое работает с сетью, а также с Chrome, мы должны установить необходимые пакеты

  dio: 5.8.0+1
  html: 0.15.5
  chrome_extension: ^0.4.0

• Т.к. на большинстве сайтов (в т. ч. с тем, с которым мы работаем) стоит cors-блокировка её пришлось обходить странным способом — написал небольшой код на php, разместив его бесплатно на хостинге (не реклама :)) на техническом домене. Можете, естественно, свой хостинг использовать. Не забудьте его прописать в const String proxy

• Можно отключить проверку Cors, хоть это и не безопасно, в этом случае надо proxy переменную поставить равно пустой строке и запускать браузер Chrome вот такой строкой (предварительно закрыв полностью Chrome):

chrome.exe --disable-web-security --user-data-dir="C:\chrome_dev"

• _currentUrl у меня высчитывается с помощью chrome_extension, установленного из pub-dev. Если не получается это сделать (например при локальном тестировании в браузере, мы сами вписываем конкретный сайт)

• Логику работы кода получения ссылок описывать не буду, по сути это повторение запросов, которые делает сам сайт для получения

• Интерфейс программы достаточно простой для среднестатистического программиста на Flutter, если есть вопросы - спрашивайте

• Компиляция идёт с помощью команды

flutter build web --web-renderer html --csp

• Установка описана в предыдущей части статьи, можно подробнее посмотреть здесь

Заключение

Напомню, не забудьте подписаться на канал про Flutter)

Пишите, что Вам понравилось, что нет. Нужно ли добавлять другие кинотеатры (и какие)