Создавайте удивительные расширения Chrome

Расширения Chrome — это небольшие программы, которые позволяют пользователям настраивать работу в Интернете. С их помощью пользователи могут настраивать функциональность и поведение Chrome разными способами. Например, расширение может накладывать информацию, относящуюся к отображаемой в данный момент веб-странице.

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

В этой статье объясняется, как создавать расширения Chrome, сочетая следующие технологии.

  • Реагировать
  • Машинопись
  • АМС Усиление
  • AWS Cognito (аутентификация)
  • Синхронизация приложений AWS (GraphQL)

Здесь я создал шаблонный репозиторий git, показывающий рабочий пример.



Кен Мияшита / chrome-extension-amplify-auth
шаблон для расширения Chrome с усиленной аутентификациейgitlab.com



Предпосылки

В этой статье не рассматриваются следующие основы, и предполагается, что вы с ними знакомы. Поскольку эти технологии содержат исчерпывающие руководства, я рекомендую вам сначала ознакомиться с ними.

Расширение для Chrome

  • Что такое (1) фоновые сценарии (2) сценарии всплывающих окон и (3) сценарии контента.
  • Как эти сценарии сегментированы и как они взаимодействуют друг с другом.

Вебпак

  • Зачем нужна комплектация.
  • Что такое (1) точки входа, (2) пакеты и (3) загрузчики.

AWS Amplify (с реакцией)

  • Как разрабатывать приложения React с помощью Amplify.
  • Как интегрировать Amazon Cognito в качестве основного поставщика аутентификации.
  • Как подключить API и базу данных к вашим приложениям.

Каковы проблемы?

Вы можете найти множество руководств и рабочих примеров в Интернете, если хотите создавать простые расширения Chrome или автономные веб-приложения с помощью Amplify.

Однако, если вы хотите объединить вышеуказанные технологии, вы столкнетесь со следующими проблемами. Решение может показаться очевидным после прочтения этой статьи.

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

Структура папок

Несколько небольших скриптов (приложений) работают вместе, совместно используя код, автоматически сгенерированный Amplify. Какова наиболее подходящая структура папок для них?

Конфигурация Webpack для расширений Chrome с реакцией

Обычно create-react-app используется при создании реагирующих приложений. Это отличный инструмент, который дает вам надежную отправную точку для разработки полноценных реагирующих приложений.

Но вы не можете использовать результат create-react-app как есть для своих расширений Chrome.

Хотя нам нужно создать несколько пакетов (фоновый сценарий, сценарий всплывающего окна, сценарий контента), create-react-app не поддерживает этот вариант использования.

Управление токенами безопасности для аутентификации AWS

По умолчанию AWS Amplify хранит токены безопасности в localStorage для браузера. Но если вы хотите войти во всплывающее окно расширения Chrome и разрешить скрипту содержимого доступ к персонализированным данным, такое поведение по умолчанию неудобно. Вам необходимо установить способ управления маркерами безопасности, общими для сценариев всплывающих окон и сценариев содержимого.

Пример расширения Chrome (шаблон)

Обзор

Шаблон — это полнофункциональное (но минимальное) приложение со следующими функциями.

  • Сайт портала. Это простое приложение для реагирования на доступ к персонализированным данным (элементам списка дел) на AWS.
  • Скрипт всплывающего окна. Он позволяет пользователям входить в AWS. Токены безопасности хранятся в хранилище Chrome.
  • Сценарии контента. С помощью токенов безопасности в хранилище Chrome скрипты контента получают доступ к персонализированным данным в AWS.

Настраивать

Клонируйте шаблонный репозиторий и установите зависимости.

$ git clone https://gitlab.com/kmiyashita/chrome-extension-amplify-auth.git
$ cd chrome-extension-amplify-auth
$ yarn

Перейдите в подпапку для проекта Amplify и инициализируйте проект.

$ cd packages/amplify-shared
$ amplify init
? Choose your default editor: Visual Studio Code
? Select the authentication method you want to use: AWS profile
? Please choose the profile you want to use:  default

Наконец, подготовьте серверные ресурсы, используя файлы конфигурации в каталоге amplify.

$ amplify push

Запустить расширение Chrome

Соберите расширение для Chrome:

$ yarn build

Откройте Управление расширениями браузера Chrome и загрузите встроенное расширение chrome-extension-amplify-auth/packages/chrome-ext/dist.

Когда вы открываете любую веб-страницу, вы заметите, что ваш сценарий содержимого показывает небольшое наложение в правом нижнем углу.

Нажав на значок расширения Chrome, вы можете открыть всплывающее окно. Создайте новую учетную запись пользователя и войдите в нее.

Теперь наложение сценария контента автоматически обновляется и показывает элементы списка дел.

Запустить сайт портала

Запустите веб-сервер для сайта портала.

$ yarn start-web

Откройте http://localhost:8080 в браузере Chrome и просмотрите список дел.

Структура папок

У нас есть следующие два требования относительно структуры папок.

  • Код Amplify должен быть общим для нескольких пакетов в расширении Chrome (скрипт контента, скрипт всплывающего окна) и на сайте портала.
  • Для расширения Chrome необходимо создать несколько пакетов (скрипт контента, скрипт всплывающего окна, фоновый скрипт).

Чтобы удовлетворить эти требования, мы используем следующий подход.

  • Структура монорепо.
  • Проект Amplify образует независимый пакет (amplify-shared) в структуре монорепозитория. Этот пакет используется двумя пакетами: chrome-ext и web-ui.
  • Пакет «chrome-ext» имеет три подпапки для фонового сценария, сценария содержимого и сценария всплывающего окна. Webpack создает пакеты из этих подпапок.

Конфигурация Webpack для расширения Chrome

Webpack — это сборщик статических модулей для современных приложений JavaScript. В большинстве случаев, начиная с версии 4.0.0, webpack не требует файла конфигурации для сборки вашего проекта. Но мы бы ввели минимальный файл конфигурации webpack.config.js для следующих целей.

  • Создайте несколько пакетов (фоновый сценарий, сценарий всплывающего окна, сценарий контента)
  • Скомпилируйте коды TypeScript в JavaScript.
  • Не используйте eval для сопоставления источника, поскольку CSP расширения Chrome (Политика безопасности контента) не разрешает это.

Аутентификация

Когда вы входите в систему с помощью аутентификации с помощью AWS Amplify, токены безопасности по умолчанию сохраняются в localStorage. После входа функции Amplify для доступа к данным используют сохраненные токены безопасности.

К сожалению, в нашем сценарии этот механизм не работает должным образом. Сценарий всплывающего окна запускается в контексте расширения, а сценарии содержимого запускаются в контексте веб-страницы, а не расширения. Поскольку localStorage сегментируется по контексту, маркеры безопасности, хранящиеся во всплывающих окнах, недоступны для сценариев содержимого.

Но Amplify хорошо разработан, и он позволяет нам настраивать, где хранятся токены безопасности. Чтобы решить эту проблему, мы используем chrome.storage.local. Он предоставляет те же возможности хранения, что и localStorage API, со следующими ключевыми отличиями:

  • Сценарии содержимого вашего расширения могут получать доступ к пользовательским данным, совместно используемым со сценарием всплывающего окна.
  • Он асинхронен с массовыми операциями чтения и записи и, следовательно, быстрее, чем блокирующий и последовательный API localStorage.

Вот SharedAuthStorage.ts, реализующий наше собственное хранилище для токенов безопасности.

В скрипте всплывающего окна

  • setItem() вызывается, а токены безопасности хранятся в chrome.storage.local.

В сценарии содержания

  • sync() вызывается в Amplify.configure(). Он заполняет кэш в памяти, сканируя chrome.storage.local.
  • После заполнения кэша в памятиgetItem() может синхронно возвращать значения (токены безопасности).

Вы можете настроить Amplify для использования этого пользовательского хранилища следующим образом. Таким образом, вы объединяете свою настройку и различные параметры конфигурации AWS (awsExports), управляемые Amplify CLI.

Amplify.configure({
    ...awsExports,
    Auth: {storage: SharedAuthStorage}
});

В этой статье объясняется, как использовать Amplify с аутентификацией в расширениях Chrome. Надеюсь, шаблон поможет вашему развитию.