Trigger Chrome Extension Background Page Using a Message

Currently, I am in the process of developing my initial chrome extension and focusing on establishing message passing and background.js functionality. However, it seems like my background.js file is not being triggered or receiving any messages. I am seeking assistance in identifying what I might be doing incorrectly. Below is a simplified example of my setup:

manifest.json

{
  "manifest_version": 2,
  "name": "RAData",
  "version": "0.1",
  "background": {
    "scripts": ["background.js"] },
  "content_scripts": [{
    "matches": [
      "<all_urls>"],
    "js": ["content.js"] }]
}

content.js

chrome.runtime.sendMessage("message from content");
console.log("content.js loaded");

background.js

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  console.log("message received");
});
console.log("background.js loaded");

In theory, whenever a page is loaded, content.js should execute, display "content.js loaded" in the console, and then activate background.js with the message. Background.js should then display "message received" and "background.js loaded" in the console.

However, in reality, the console only shows "content.js loaded", indicating that none of the code in background.js is being run.

Answer №1

If you're searching for the console of the background page, remember to check out the section labeled "Inspect views:" in the Chrome extension settings at chrome://extensions

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

Ways to conceal an item by considering the size of a different element

I have a question about displaying content within a div element. I want to show a "show more" button only if the content inside the div exceeds a max height of 530px. Otherwise, the button should remain hidden. Here is the code snippet I'm using: Ja ...

Ways to efficiently group and aggregate data in JavaScript, inspired by LINQ techniques

I'm feeling overwhelmed by this. Could you lend a hand? Consider the following .NET classes: Teacher: public class Teacher { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } publ ...

Typescript error encountered when executing multiple API calls in a loop causing Internal Server Error

I'm relatively new to Typescript/Javascript and I am working on a function called setBias(). In this function, I want to set all indices of this.articles[i].result equal to the biased rating returned by the function getBiasedRating(this.articles[i].ur ...

The JSON response did not contain the expected property in Javascript

Currently, I am developing a weather widget using React that displays temperature and rain forecast. The data is fetched from OpenWeather API and the JSON response structure is as follows: //rainy day 0:{ main: { temp:10} rain: { 3h: 1000} } / ...

Show the Form Data in a Stylish Bootstrap Popup

Our website's homepage features a basic form that sends its results to a page named Results.aspx. Instead of displaying the form results on the same page, I want them to appear in a new modal window. How can this be done? Just to summarize, the form ...

Sending Parsed Information to Callback for Flexible Use

Is there a way to pass the value of coins, or even better, currency to my callback function so I can freely use the parsed JSON data in other functions? function fetchJSON(path, callback) { var jsonReq = new XMLHttpRequest(); jsonReq.onreadystatechang ...

What is the best way to save the previous state data into a variable so that in case of an error during an API call, we can easily undo the changes that were made

I'm dealing with a toggle button that changes data upon clicking and then triggers an API call to update the databases. However, in case the API returns an error, I want to revert the changes made in the UI. Can anyone guide me on how to achieve this? ...

Can a JavaScript framework be created to ensure all browsers adhere to standards?

As someone who isn't an expert in JavaScript, I wonder if it's feasible to create a comprehensive embeddable JavaScript file that ensures all browsers adhere to standards. Could there be a compilation of known JavaScript hacks that compel each br ...

Troubleshooting Problem with MVC Ajax Requests

When working with an MVC view, I have a submit button that includes validation checks. If the validation fails, I return false to prevent the form from being submitted. In addition to standard validation, I also use an Ajax GET request to check for duplic ...

Mapping an object in ReactJS: The ultimate guide

When I fetch user information from an API, the data (object) that I receive looks something like this: { "id":"1111", "name":"abcd", "xyz":[ { "a":"a", "b":"b", "c":"c" ...

I am currently dealing with an issue where 3 controllers are responsible for fetching data from a database and displaying it in a dropdown list. However, the problem arises when a value is selected from the list as it

This particular one serves as the main controller and module for this page. var bookinsert = angular.module('bookinsert', ['ngCookies']); bookinsert.controller('book_insert_ctrl', function ($scope, $http, $rootScope, $cookies ...

Toggle the visibility of text boxes based on the checkbox selection

After doing some research, I decided to revise the question after receiving feedback that it was causing some concern. When a checkbox is clicked, the content of the corresponding div should be visible and vice versa. How can I achieve this? Thank you. JQ ...

Trouble with comparing two datetime values in JavaScript

I have a dilemma with two different appointments: appointment1 = "2013-07-08 12:30:00" appointment2 = "2013-07-08 13:30:00" My goal in JavaScript is to compare these two appointment dates. If they don't match, I want to remove the appointment; if t ...

Struggling to receive accurate data from every statement

I have an object (known as allUserInfo) that looks like this: Object { available_client_ids: Array[2] 0: "demo" 1: "4532t78" available_client_names: Array[2] 0: "Demo" 1: "Bobs Bakery" email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

Establishing numerous websocket connections within a singular application

I am looking to conduct load testing on our websocket service. Is there a method to establish multiple websocket connections from one workstation? My attempt with npm ws and websocket modules in conjunction with NodeJS was successful for a single connecti ...

Custom font not displaying on Chromecast receiver app

I have followed the specified steps to incorporate a custom font into an html canvas text field. Interestingly, the font displays correctly when accessed on the Desktop Chrome browser, but on the Chromecast receiver application, the font fails to load. Wha ...

The TextBox will alter its color following an incorrect submission

I am struggling to create a bootstrap form that will change the color of the borders to red after incorrect submission. The issue I am facing is that the textbox always remains in red. Does anyone have any suggestions for setting the textbox borders to red ...

Using npm-installed cesium for the web browser is a straightforward process that involves importing

Exciting news - Cesium is now available on npm! Once I've run npm install cesium in my project, all the codes are placed inside the node_modules folder. In the introductory hello world example of Cesium, it imports cesium similar to this: <script ...

Tips on adding a base64 encoded image string to a JSON object using JavaScript

I'm trying to convert an image file into a JSON object using JavaScript. I've managed to turn the image into a string by utilizing base64 encoding, but I'm unsure how to then convert this string into a JSON object. Can anyone help? ...

jQuery fails to make a POST request when the content type is set to application/json

I am utilizing jQuery version 1.10.1. My goal is to execute a POST request with the content type set to application/json. The code I have implemented is as follows: $.ajax({ type: "post", url: urlBase + "user/search", contentTy ...