Я нашел решение своей проблемы.Ответ @cloop в вопросе, на который я ссылаюсь, верен, но ради людей, которые позже столкнутся с этим вопросом, я объясню по-своему.Я надеюсь, что это будет более дружественным для новичка, поскольку я сам не разработчик.
Обратите внимание, что это просто мое решение иметь MVP, скорее всего, есть лучший способ сделать это.
Прежде всего, не используйте Библиотека Firebase UI , поскольку она не будет совместима с расширениями Chrome.Я предполагаю, что вы прошли руководство по расширению Chrome , а также базовую документацию Firebase Authentication .
Теперь мы должны отказаться от всего, что у нас есть, и начать все заново с пустого расширения.Мы настроим для него аутентификацию по электронной почте и паролю.
Сначала мы создадим манифест:
{
"name": "Test extension",
"version": "0.1",
"description": "An extension to test Firebase auth",
"permissions": [/*Insert necessary permissions*/],
"content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://*.firebase.com https://www.googleapis.com; object-src 'self'",
"background": {
"page":"background.html",
"persistent": true
},
"browser_action": {
"default_popup": "popup.html",
},
"manifest_version": 2
}
background.html - это фоновая страница, связанная со скриптом background.js.Это связано с тем, что нам необходимо загрузить firebase в <head> страницы, прежде чем мы сможем инициализировать его в скрипте, см., Например, скрипт здесь .popup.html будет страницей, которую мы будем динамически загружать в зависимости от состояния аутентификации.Он связан со скриптом popup.js и содержит только элемент div #container.Мы немедленно добавим прослушиватель событий в это всплывающее окно, чтобы отправить сообщение фоновому сценарию, используя Messaging API .
window.addEventListener('DOMContentLoaded', (_event) => {
console.log("DOM loaded and parsed");
//Send a message to background script informing that the page is loaded
chrome.runtime.sendMessage({type: "popupLoad"}, function (response) {
if (response.type == "loggedIn") {
let htmlString = /*Your extension UI's HTML*/;
document.querySelector("#container").innerHTML(htmlString);
} else if (response.type == "loggedOut") {
let htmlString = /*Log in form HTML*/
document.querySelector("#container").innerHTML(htmlString);
};
});
Итак, мы сделали это, отправив сообщениефоновый скрипт, как только DOM нашего popup.html будет полностью загружен для запроса состояния аутентификации.Фоновый скрипт отправит нам объект response типа loggedIn или loggedOut, что позволит нам решить, какой интерфейс нам следует загрузить для нашего всплывающего окна.
Теперь мы смотрим на фоновый скрипт.
Сначала вам нужно инициализировать Firebase.
var config = {
/*Your config parameters from the Firebase console*/
};
firebase.initializeApp(config);
Теперь нам нужно добавить прослушиватель сообщений.Обратите внимание, что при этом будет прослушиваться любое сообщение от любого Chrome environement (вкладка, окно, всплывающий скрипт и т. Д.), Поэтому мы должны убедиться, что действуем в отношении правильного типа сообщения.Вот почему я использовал {type: "popupLoad"} при создании сообщения всплывающего скрипта.Все мои сообщения имеют как минимум атрибут type.
chrome.runtime.onMessage.addListener(
function(message, _sender, _sendResponse) {
if (message.type == "popupLoad") {
//Get current authentication state and tell popup
let user = firebase.auth().currentUser;
if (user) {
sendResponse({type: "loggedIn"});
} else {
sendResponse({type: "loggedOut"});
};
} else if (message.type == "other") {
//handle other types of messages
};
});
Мы достигли того, что, как только пользователь нажимает на значок расширения, мы можем решить, какой интерфейс интерфейсаВсплывающее окно должно основываться на состоянии аутентификации.Конечно, если пользователь вышел из системы, он увидит нашу форму входа / регистрации.Кнопка этой формы должна иметь прослушиватель событий, который отправляет сообщение (например, типа loginAttempt) в фоновый сценарий, а затем фоновый сценарий должен дать ответ на всплывающий сценарий, если вход выполнен успешно, что позволяет намзаменить содержимое #container пользовательским интерфейсом нашего расширения.Здесь мы видим, что расширение на самом деле является одностраничным приложением.
Мне пришлось использовать метод firebase.auth().onAuthStateChanged() в фоновом скрипте, который по сути является прослушивателем событий, если он обнаруживает изменения в состоянии аутентификации, если яне ошибаюсь.
Я не буду вдаваться в подробности, но я надеюсь, что для начинающих, таких как я, этого будет достаточно, чтобы обернуть голову вокруг этого и придумать рабочий прототип.
Короче:
- Не использовать библиотеку Firebase UI
- Инициализировать Firebase в фоновом скрипте
- Расширение представляет собой одностраничное приложение.Используйте Messaging API для извлечения текущего состояния проверки подлинности или изменений состояния проверки подлинности из фонового сценария, чтобы иметь возможность решить, какой интерфейс вы хотите обслуживать пользователю
Если кто-то заметит какую-либо проблему с этим ответом,не стесняйтесьНекоторая заслуга принадлежит многим людям, которые были достаточно любезны, чтобы помочь мне в разработке Discord, или тем немногим разработчикам, которых я написал по электронной почте и поставил меня на правильный путь.