将消息从 background.js 发送到弹出窗口

Question

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?

Answer 1

You can use the chrome.tabs.query and chrome.tabs.sendMessage APIs to send a message from the background to the Popup.

   chrome.tabs.query({}, function (tabs) {
    tabs.forEach((tab) => {
      chrome.tabs.sendMessage( 
        tab.id,
        youtPayload, 
        function (response) {
         // do something here if you want
        }
      );
    });
  });

That's it!

Answer 2

I spend lots of hours to finding solution to the same proble and still not find any.

My current understanding is, that we are trying to do and use method for the purpose, they wasnt ment to be used for.

Key information leading to this:

• popup.js can share the same. Js file and objects with background.js
• documentation primarely is talking about passing data between web page (content.js) and others (popup.js or background.js)