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

Плюсы

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

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

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