I want to implement FCM in my chrome extension. At the mement after a lot of research I've found that the quick and best way to implement fcm is using the old API chrome.gcm. At the moment this solution seems working fine and when the extension is loaded I'm able to get an fcm token.

Now what I want to do is to pass the token to the popup that is powered by vue.js I'm trying with this code but without success.

background.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)
})

popup.vue file

<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>

What I've noticed is that the chrome.runtime.sendMessage({fcmToken: registrationId}) will not work and on the popup side I'm unable to send or get messages from background

How I can pass messages between the vue.js powered popup and the background.js file of the extension?

Is better to use firebase client library to get push messages or the gcm is fine for this scope?