Transmit a message from the background.js script to the popup window

Currently, I am looking to integrate FCM (Firebase Cloud Messaging) into my chrome extension. After conducting thorough research, I have discovered that the most efficient way to implement FCM is by utilizing the old API chrome.gcm. So far, this method has been effective as I am able to successfully obtain an FCM token when the extension loads.

Now, my goal is to pass this token to the popup powered by Vue.js. However, I have encountered difficulties with the following code:

In the background.js file:

 // Code snippet not included for brevity

The popup.vue file contains the following code:

 // Code snippet not included for brevity

I have observed that the 

chrome.runtime.sendMessage({fcmToken: registrationId})
function does not work as intended. Additionally, I am unable to send or receive messages between the popup and background scripts.

How can I establish communication between the Vue.js-powered popup and the background.js script of the extension? Is it advisable to switch to using the Firebase client library for receiving push notifications, or is sticking with GCM sufficient for this purpose?

javascriptvue.jsgoogle-chrome-extensionchrome-extension-manifest-v3

Answer №1

To communicate a message from the background to the Popup, utilize the chrome.tabs.query and chrome.tabs.sendMessage methods as explained in the official documentation.

   chrome.tabs.query({}, function (tabs) {
    tabs.forEach((tab) => {
      chrome.tabs.sendMessage( 
        tab.id,
        youtPayload, 
        function (response) {
         // perform any desired actions here
        }
      );
    });
  });

This process allows for seamless communication between the background script and the Popup window.

Answer №2

After countless hours of searching, I have yet to find a solution to the ongoing issue.

Based on my current understanding, it seems like we are attempting to utilize methods in ways they were not originally intended for.

The key details that led me to this realization are:

  • The fact that popup.js can share the same .js file and objects with background.js
  • The documentation primarily focuses on transferring data between web pages (content.js) and other components (popup.js or background.js)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing JQuery AJAX to Submit a JSONP Form with File Attachments

I have been working on implementing a contact form for our clients who create websites with their own domains through us. As part of our services, we provide hosting and a web editor to help them build their websites. The contact form they include on their ...

javascriptphpjqueryajaxforms

Begin the Wordpress AJAX Login

Is there a way to trigger the code below when a user is logged out from another location due to user inactivity, similar to how wp-admin displays an AJAX login overlay if a user is logged out? I have not come across any documentation or tutorials on achiev ...

javascriptphpjqueryajaxwordpress

executing jQuery toggle on freshly generated content

I have a webpage that I designed using jQuery. Within this page, there is a table with rows assigned specific color classnames (e.g., tr class="yellowclass"). Users can filter the rows by clicking checkboxes to show/hide tables of different colors. The i ...

javascriptjqueryajaxjsondom

utilize a Vue animation complete callback to incorporate a function

Can a function be passed inside the "done" callback for Vue animation? enter: function(e, done) { element.animate({ // ... }, duration, done) } Is there a way to ensure that the next "afterEnter" hook will still be called? If I wer ...

vue.jsanimationcallbackhook

Different methods to retrieve content within a div that is located on a separate, included page

It's a bit tricky to come up with a title for this topic, but essentially, I'm trying to figure out how to get content from an included page into a specific div using HTML and PHP. Let me break it down: In the header.php file, we have the follo ...

javascriptphpjqueryhtml

The consistent failure of the 201 status node express API is causing major

I am currently working on creating an API using Express. However, when I receive a response from the server, it shows '201 created'. The issue arises when I attempt to make an HTTP request through promises and encounter a false interpretation of ...

javascriptnode.jsexpresshttp

Execute a simulated click on the Material-UI Tabbar using a programmatic approach or keyboard shortcut

In my electron/react application, I am implementing Material UI tabs in the following manner: <Tabs> <Tab label="View1" > <View1 /> </Tab> <Tab label="View2"> ...

javascriptreactjsreact-reduxmaterial-ui

Manipulating CSS styles with jQuery

Trying to update the UL image in the CSS directory using jQuery for a Twitter stream: as tweets are displayed, want to change the avatar of the account associated with each post. Using .css is straightforward, but struggling to modify the URL for the new i ...

javascriptjqueryhtmlcsstwitter

Issue with React setState not triggering when switching between tabs in Material UI. Attempted to hide using a div with display set to none

Every time I switch between Material UI Tabs, the state gets cleared and does not persist. Check out this link for more information I have attempted different solutions: Using React Context to pass in the React State, but the issue remains unresolved T ...

javascriptreactjsmaterial-ui

Is there a way to successfully integrate a JavaScript file that has been downloaded from `npm` or `yarn` into a web client or

Currently, I am following a guide titled "Headless Drupal with React" on Medium. The tutorial itself does not address my specific questions. In the tutorial, it demonstrates importing React and ReactDOM directly from CDN in the .html file. My query revolv ...

javascriptreactjsnpmyarnpkg

The submitEvent.target cannot be converted to formdata in Vue

update I successfully created a new function based on the helpful answer provided below export function getFormDataAsJson(e) { const jsondata = {} let fd= new FormData(e.target) for (let key of fd.entries()) { jsondata[key[0]]=key[1] ...

javascriptvue.jsvuejs3

Guide to setting up an automated process in PHP

When setting up a tournament interface on my page: Users utilize functions like fopen() and fwrite() to create tournaments. The created tournaments must only start after a specific time, for example, 1 hour. This delay allows other users to join the tour ...

javascriptphphtmlcron

Tips for locating the highest number in JavaScript

I'm having trouble with my code where the first number, even if it's the largest, is not displaying as such. Instead, it shows the second largest number. Even when following suggestions, I encountered an issue where if the numbers are entered as ...

javascripthtmlmax

Basic example of jQuery in an ASPX file

I can't figure out why this basic example is not working. In my WebApplication, I have a script: function myAlert() { $("#Button1").click(function () { alert("Hello world!"); }); } In my asp page, I have the following code: < ...

c#javascriptjqueryasp.net

What is the best way to retrieve the value from a textfield in one module and use it in a

How can I access the value of a textField in another module within React.js without importing the entire textfield component? What is the most effective approach to get access to the value variable in a different module? Below is a sample functional textF ...

javascriptreactjsuse-state

Troubleshooting Controller Action Failure in AJAX Request

Hello there I am encountering an issue with my AJAX call not reaching the Controller action in my ASP.NET MVC web application project. Below, you will find my AJAX call written in Javascript and the corresponding Controller's Action. Here is the AJA ...

javascriptjqueryajaxasp.net-mvcsharepoint

What is causing the check box in the simple_form view to consistently return a value of 1 when checked or unchecked in rails 3.2?

A checkbox with the name "need_delivery" is used to determine whether the next two text boxes should be displayed. These two text boxes are enclosed within a div with the id of task_request_delivery. Below is the code snippet in the simple_form view named ...

javascriptjqueryruby-on-rails-3simple-form

When importing a component that is passed as a prop in React, it is causing a blank page to render and is displaying an error in the

Visit this link for the code Everything was running smoothly with the app until I decided to include the Icon component in SidebarOption.js. Now, upon doing so, a blank page appears and an error is displayed in the console: An error occurred stating that ...

javascriptreactjsmaterial-uireact-dom

Is there a way to insert a label directly following a dropdown menu within the same table cell?

My goal is to include drop-down lists in a web page, so I decided to create a table structure using JavaScript. Firstly, I used the document.createElement() method to generate a table, table body, rows, and cells. Then, I proceeded to create select element ...

javascripthtmldom

Retrieving the contents of a unique 404 error page using ajax

Currently attempting to retrieve the content of a custom 404 page through ajax (I need to extract a counter value from this page using Greasemonkey). Regrettably, jQuery's .fail method in ajax does not provide the option to access the page's con ...

javascriptjqueryajax