Создание современного расширения React Chrome с помощью нового фреймворка

Когда я только начинал создавать расширения для Chrome, меня очень раздражал шаблон.

Было очень сложно настроить manifest.json, указав его на нужные файлы. Нужно было прочитать как минимум 4 записи в блоге, чтобы понять, как правильно это сделать. Раздражение усугублялось, если вы пытались использовать современные JavaScript-фреймворки, такие как React. Теперь вам нужно было разбираться с Webpack и выяснять, как это связано с историей manifest.json.

Мы решили решить эту проблему, создав фреймворк для разработки браузерных расширений под названием Plasmo. Это другой способ думать о браузерных расширениях, и если вы привыкли к созданию расширений, некоторые вещи могут выглядеть немного странно.

Если вы хотите проследить за развитием событий, бегите:

pnpm dlx plasmo init
Войти в полноэкранный режим Выйти из полноэкранного режима

Посмотрев на созданную директорию plasmo init, вы можете заметить отсутствие manifest.json.

Это одна из ключевых особенностей Plasmo Framework — мы автоматически генерируем manifest.json, чтобы вы могли сосредоточиться на создании классных вещей, а не заботиться о том, куда направить content_scripts, и как должен выглядеть формат схемы.

Идея проста: вы добавляете файл popup.tsx, экспортирующий компонент React, и Plasmo поймет, что это всплывающая страница. Он зарегистрирует его в манифесте и напишет код для автоматического монтажа компонента в ваше всплывающее представление.

То же самое верно для content.ts, background.ts и options.tsx. Фреймворк понимает, что это за файлы, и автоматически строит манифест с их учетом.

Если у вас несколько скриптов, вы можете использовать каталоги contents/, options/ и popups/ для достижения того же эффекта.

Ключевые принципы:

Отсутствие файла manifest.json

Мы твердо убеждены, что файл manifest.json — это негерметичная абстракция. Поэтому мы построили фреймворк так, чтобы генерировать как можно больше манифеста.

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

Хорошо, когда есть мнения

Этот фреймворк не для всех, и это совершенно нормально. Наша цель не в том, чтобы создать фреймворк, который удовлетворит потребности каждого. Вместо этого мы ориентируемся на людей, которые хотят быстро создавать расширения производственного уровня с использованием React.

Если кто-то хочет создать минималистичное расширение, использующее ванильный Javascript, то этот фреймворк не для них.

Только MV3

Manifest версии 3 — это будущее. Давайте примем его и создадим вокруг него хорошие инструменты, чтобы люди могли создавать удивительные продукты.

Документы

Ознакомьтесь с нашей документацией, чтобы увидеть другие интересные возможности. Мы постоянно итерируем и улучшаем, так что если у вас есть отзывы, мы будем рады их услышать!

Оцените статью
Procodings.ru
Добавить комментарий