Quiero implementar FCM en mi extensión de Chrome. En este momento, después de mucha investigación, descubrí que la forma más rápida y mejor de implementar fcm es usar la antigua API chrome.gcm . Por el momento, esta solución parece funcionar bien y cuando se carga la extensión, puedo obtener un token fcm.

Ahora lo que quiero hacer es pasar el token a la ventana emergente que funciona con vue.js. Estoy intentando con este código pero sin éxito.

fondo.js

 const openPopup = () => { chrome.windows.create({ type: 'popup', height: 520, width: 440, url: chrome.runtime.getURL('popup.html') }) } const registeredToken = (registrationId) => { console.log('FCM Token') console.log(registrationId) openPopup() chrome.runtime.sendMessage({fcmToken: registrationId}) if( chrome.runtime.lastError ) { console.log('error') } } const notificationId = (id) => { if(chrome.runtime.lastError) { console.log(chrome.runtime.lastError) } console.log(id) } chrome.runtime.onInstalled.addListener( () => { console.log('FCM extension installed') }) chrome.action.onClicked.addListener( (tab) => { console.log(tab) openPopup() }) chrome.gcm.register(['my_sender_id'], registeredToken) chrome.gcm.onMessage.addListener( (message) => { console.log(message, message.data["gcm.notification.title"]) chrome.notifications.create('', { type: 'basic', iconUrl: 'letter.png', title: message.data["gcm.notification.title"], message: message.data["gcm.notification.body"], buttons: [ { title: 'Dismiss' }, { title: 'Reply' } ] }, notificationId) }) chrome.notifications.onButtonClicked.addListener( (notificationId, buttonIndex) => { console.log('button clicked') console.log(notificationId, buttonIndex) })

archivo emergente.vue

 <template> <div class="main_app"> <h1>Hello {{msg}}</h1> </div> </template> <script> export default { name: 'popupView', data () { return { msg: '' } }, mounted() { chrome.runtime.onMessage( (message, sender, sendResponse) => { console.log(message, sender, sendResponse) this.msg = message }) }, methods: { } } </script>

Lo que noté es que chrome.runtime.sendMessage({fcmToken: registrationId}) no funcionará y en el lado emergente no puedo enviar ni recibir mensajes en segundo plano.

¿Cómo puedo pasar mensajes entre la ventana emergente activada por vue.js y el archivo background.js de la extensión?

¿Es mejor usar la biblioteca del cliente de firebase para recibir mensajes push o gcm está bien para este alcance?