Firebase auth в Chrome extension manifest v3

Я пишу свое расширение, меня очень порадовало недавно заявления гугла о том что всем очень нужно обновиться до третьей версии манифеста ради прайваси пользователей и улучшения производительности (ни то, ни другое не поменялось значительно).

Google анонсировали что с 17 января 2022 года новые расширения Manifest V2 больше не будут приниматься интернет-магазином Chrome. Разработчики по-прежнему могут отправлять обновления для существующих расширений версии 2 манифеста.
Начиная с января 2023 года браузер Chrome больше не будет запускать расширения Manifest V2. Разработчики больше не могут отправлять обновления для существующих расширений версии 2 манифеста.

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

Теперь при попытке входа в аккаунт через Google, Facebook или Twitter возникает следующая ошибка.

This operation is not supported in the environment this application is running on. «location.protocol» must be http, https or chrome-extension and web storage must be enabled.

Как выглядел процесс входа изначально

Открываться страница options. Пользователь выбирает провайдера с которым нужно войти. Из страницы options отправляется message в background скрипт.

// background.js  authProvider = new firebase.auth.GoogleAuthProvider()  app.auth() .signInWithPopup(authProvider)   .then((userCredential) => {     const user = firebase.auth().currentUser       dispatch({ type: SIGN_IN, payload: { error: 'success', signInLater: false, user } })   })   .catch((error: any) => {     console.error(error)     dispatch({ type: SIGN_IN, payload: { error: error.code, signInLater: false, } })   })

В версии manifest 2 background это обычная страница у которой есть доступ к window. В версии 3 background обязательно должен быть сервис воркер, соответственно мы не можем просто так вызывать signInWithCredential.

Рабочий вариант

В манифесте нужно добавить oauth2 client_id и разрешение на получение identity.

{   "name": "ExtensionName",   "version": "0.1",   "manifest_version": 3,   "key": "your_public_key",    "background": {     "service_worker": "dist/bgWrapper.js"   },    "permissions": [     "identity",     "identity.email"   ],      "host_permissions": [     "<all_urls>"   ],      "oauth2": {     "client_id": "your_client_id",     "scopes": [       "profile",       "email",       "https://www.googleapis.com/auth/userinfo.email",       "https://www.googleapis.com/auth/userinfo.profile"     ]   } }

// background.js  chrome.identity.getAuthToken({}, (token) => {   let credential = firebase.auth.GoogleAuthProvider.credential(null, token)   app     .auth()     .signInWithCredential(credential)     .then((userCredential) => {       const user = firebase.auth().currentUser       dispatch({ type: SIGN_IN, payload: { error: 'success', user } })     })     .catch((error: any) => {       console.error(error)       dispatch({ type: SIGN_IN, payload: { error: error.code } })     })   }) }

Используйте API chrome.identity, чтобы получить токен Google OAuth, как описано в https://developer.chrome.com/apps/app_identity, а затем используйте этот токен для авторизации Firebase с помощью Auth.signInWithCredential().

Этот токен можно получить если у пользователя включена синхронизация в Google Chrome.

Key

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

После публикации расширения нужно перейти в консоль разработчика перейти во вкладку «Пакет» и выбрать «Показать открытый ключ».

Client id

Что бы получить client_id нужно:

• Перейти в Google Cloud Console

• Выбрать нужный проект

• Выбрать в меню слева APIs & Services > Dashboard > Credentials

• Кликнуть Create Credentials > OAuth client ID

• Application type выбрать chrome app

• Application id это id из chrome store

Введите свой идентификатор клиента OAuth и открытый ключ вашего расширения.

Минусы такого решения

• Работает только вход через google или email/пароль

• Работает только если включена синхронизация в настройках самого браузера

• Не получится использовать готовые компоненты по типу react-firebaseui

Плюсы

• Можно логинить пользователей автоматически

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

Надеюсь что эта статья поможет кому-то не тратить кучу времени в пустую при обновлении.