Crear una extensión de Chrome normalmente es muy similar a crear cualquier otra aplicación web: se usan recursos HTML, JavaScript y CSS.
Sin embargo, si bien en términos técnicos crear una extensión de Chrome es similar a crear una aplicación web en algunos aspectos, existen diferencias que debes tener en cuenta. Se necesita una configuración especial para habilitar y usar bibliotecas y servicios alojados por terceros, como Firebase. A su vez, las API como la chrome.identity API se encuentran disponibles para extensiones de Chrome y pueden mejorar la experiencia del usuario. Veremos los pasos que deben seguirse para habilitar Firebase en una extensión de Chrome.

Inicialización de Firebase


Normalmente, indicamos a los desarrolladores que importen y configuren el Firebase SDK en sus archivos main.html. Sin embargo, en las extensiones de Chrome y por requisito de la Política de seguridad de contenido, la mejor opción es evitar secuencias de comandos integradas. En consecuencia, contarás con el código de inicialización del Firebase SDK en tu archivo JS en lugar de tu HTML, como se indica en general. Las siguientes líneas ahora se incluyen en el archivo JS de tu extensión: 
// Initialize Firebase
var config = {
  apiKey: "<qwertyuiopasdfghjklzxcvbnm>",
  databaseURL: "https://<my-app-id>.firebaseio.com",
  storageBucket: "<my-app-id>.appspot.com"
};
firebase.initializeApp(config);

Sugerencia de un profesional: hemos eliminado la línea de authDomain debido a que solo resulta útil para los métodos de autenticación de elementos emergentes y redireccionamiento del Firebase SDK que no usaremos.

Necesitarás, de todos modos, cargar firebase.js desde tu archivos HTML:
<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>

Sin embargo, deberás incluir en la lista blanca el dominio en el cual se aloja la secuencia de comandos (es decir, www.gstatic.com). También deberás incluir en la lista blanca *.firebaseio.com y www.googleapis.com, dominios empleados por la base de datos en tiempo real y el almacenamiento de Firebase. Para permitir el acceso a estos dominios, agrega lo siguiente a tu manifest.json: 
"Content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'"

Autenticación de usuarios


Aunque la autenticación de contraseñas y la autenticación anónima de Firebase funcionan como se espera en la extensión de Chrome, será necesario aplicar a Google Sign-In ajustes adicionales que consistan en dos puntos claves:

Configuración de un ID de cliente


Debes crear un ID de cliente de Google que esté configurado para usarse en tu extensión de Chrome y agregarlo a la lista blanca de tu proyecto de Firebase. Sigue estos pasos:




  • En la consola de Firebase de tu proyecto, habilita el método de autenticación de Google en la sección Auth y la pestaña SIGN IN METHOD.
  • Agrega el ID de cliente creado a la lista blanca usando Whitelist client IDs from external projects (optional) y haz clic en SAVE.





De esta manera, tu ID de cliente quedará configurada en tu extensión de Chrome y se incluirá en la lista blanca para usarse en tu proyecto de Firebase.

Uso de la chrome.identity API y autorización de Firebase


Usa la chrome.identity API para autenticar tus usuarios según se indica en https://developer.chrome.com/apps/app_identity. Una ligera diferencia respecto de estas instrucciones es que deberás solicitar acceso a los ámbitos de correo electrónico y perfil. Por lo tanto, en tu manifest.json necesitarás lo siguiente: 
"permissions": [
  "identity"
],
"oauth2": {
  // Use your Client ID Below.
  "client_id": "1234567890-abcdefjhijk.apps.googleusercontent.com",
  "scopes": [
    "https://www.googleapis.com/auth/userinfo.email",
    "https://www.googleapis.com/auth/userinfo.profile"
  ]
},

El aspecto positivo de la Chrome Identity API es que tus usuarios tendrán una experiencia de inicio de sesión de tipo “nativo”, ya que podrán autenticarse a través de las cuentas con las cuales hayan iniciado sesión en sus navegadores Chrome.

Una vez que tus usuarios se hayan autenticado, recibirás un tóken de OAuth de Google. Usa este token para autorizar Firebase mediante Auth.signInWithCredential(): 
var credential = firebase.auth.GoogleAuthProvider.credential(null, token);
firebase.auth().signInWithCredential(credential);

¡Eso es todo! De esta manera, estarás listo para comenzar a usar las funciones del Firebase SDK, como la base de datos en tiempo real y el almacenamiento de Firebase.

Extensión de ejemplos


Hemos publicado un ejemplo de extensión de Chrome en el que se muestra la manera de usar Firebase en una extensión de Chrome con el inicio de sesión de Google. No dudes en conocerlo y poner manos a la obra: https://github.com/firebase/quickstart-js/tree/master/auth/chromextension.

También puedes probar la extensión de Chrome de manera directa: https://chrome.google.com/webstore/detail/lpgchdfbjddonaolofeijjackhnhnlla.




¿Qué crearás?


Gracias a Firebase y las extensiones de Chrome, existe un espectro completo de apps que puedes crear. ¿Qué desarrollarás? Comunícalo en los comentarios.