Extension in Chrome operating in the background while the pop-up is out of sight

As a beginner, my goal was to develop a Chrome Extension. However, I am facing a roadblock as I am unsure how to set up my extension to run in the background.

Despite conducting research to find a solution, I have been unable to find a suitable answer to my problem.

The core functionality of my extension is stored within AngularJS controller files, but I am uncertain about how to establish a connection with a background.js file or even if it is necessary.

I aim for the extension's logic to be active even when the popup window is not visible, similar to the modHeaders app.

Here is an excerpt from the manifest file:

    "manifest_version": 2,   
    "name": "Chrono",   
    "version": "1.1",
    "description": "Reminder",   
    "browser_action": {
            "default_icon": "images/timerIcon.png",
            "default_popup": "index.html",
            "default_title": "ChronoBip"   
},   
    "background": {
            "scripts": ["background.js"],
            "persistent": false   
},   
    "permissions": [
            "background",
            "tabs"   ] 
    }

If additional information is required, please let me know.

javascriptangularjsgoogle-chrome-extension

Answer №1

If you're having issues with running a separate .js file (background.js), consider using your controller JS file as your background script instead. Test to see if this approach yields better results.

In my case, I moved my controller (myAppCtrl.js) file to the background.

"manifest_version": 2,   
    "name": "Chrono",   
    "version": "1.1",
    "description": "Reminder",   
    "browser_action": {
            "default_icon": "images/timerIcon.png",
            "default_popup": "index.html",
            "default_title": "ChronoBip"   
},   
    "background": {
            "scripts": ["app/controllers/myAppCtrl.js"],
            "persistent": false   
},   
    "permissions": [
            "background",
            "tabs"   ] 
    }

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

Automatic playback of the next video in a video slider

Looking to upgrade my video slider functionality - switching between videos, playing automatically when one finishes. Struggling to find a solution that combines manual control with automatic playback. My attempt: function videoUrl(hmmmmmm){ ...

javascripthtmlcss

How can I create a semantic-ui dropdown with a dynamically generated header?

Here are the dropdown options: const options = [ { key: '1', text: 'Example 1', value: 'Example 1', type:'ABC' }, { key: '2', text: 'Example 2', value: 'Example 2', t ...

javascriptreactjsdrop-down-menusemantic-uisemantic-ui-react

View saved local storage information

I have an inquiry regarding saving data using localStorage for a shopping cart feature. I am able to list the data on one page through console.log but am facing difficulties in calling the data on another page. Can anyone assist with this? The Product page ...

javascriptarraysreactjslocal-storageshopping-cart

How to disable the onChange event in PrimeNG p-dropdown?

I'm currently utilizing PrimeNG's dropdown component. Each option in the list includes an icon that, when clicked, should trigger a specific method. Additionally, I need to execute another method when the onChange event of the dropdown is trigger ...

javascriptangulartypescriptprimeng

Having numerous calls to isNaN within a JavaScript if-else statement

I've created a JavaScript function that generates div elements and styles them based on user input values. However, I'm facing an issue when trying to display a warning message if the input is not a number. Currently, I'm unable to create th ...

javascriptjquerycssif-statement

Inheriting Angular Components without a template defined in the parent class

Looking to create a base class that contains common logic in order to inherit it and create various components. After researching online, I came across two approaches: Utilize the base class as a Pure TypeScript class and apply the @Component decorator in ...

angularjstypescriptinheritanceangular-componentsbase-class

Styling CSS for disabled nested elements

In a project I am currently working on, I've noticed that disabled items do not appear disabled enough. My initial plan was to easily address this issue with some CSS. Typically, adjusting the opacity is my go-to solution to achieve the desired effec ...

javascripthtmlcss

How can you easily reuse an Ajax method in Vue.js by passing a Vue data array name as an argument?

After dedicating 9 hours to learning Vue.js, I have ventured into using it with JQuery Ajax. My challenge lies in making the last argument work as intended. Passing an array name expected to exist in vue data: {... seems to yield no results. Update: I hav ...

javascriptjqueryvue.js

Implement a click event for the X-Axis label in Angular 2 Highcharts

I'm currently facing a challenge with hand-rolling a solution that involves adding a click listener to an X-Axis label in a column chart using the HighCharts API within an Angular 2+ application. Here is what I have gathered so far: I am utilizing ...

javascriptangularhighchartsangular2-highcharts

Using Selenium WebDriver to handle Angular requests in Java

I am currently developing tests for an angular-based application and I find myself in need of assistance. The specific task at hand involves creating a mechanism that will wait until all pending requests within the application have been processed before pr ...

javascriptjavaangularjsseleniumautomated-tests

Encountering ECONNREFUSED error when making requests to an external API in a NextJS application integrated with Auth

Currently, I have integrated Auth0 authentication into my NextJS application by following their documentation. Now, I am in the process of calling an external ExpressJS application using the guidelines provided here: https://github.com/auth0/nextjs-auth0/b ...

javascripttypescriptnext.jsauth0

Updating a Parent component from a Child component in React (Functional Components)

My functional component RoomManagement initiates the fetchRooms function on the first render, setting state variables with data from a database. I then pass setLoading and fetchRooms to a child component called RoomManagementModal. The issue arises when t ...

javascriptreactjsreact-functional-component

Accessing data returned from JSON in JQuery beyond the code block required

Is there a way to access returned JSON data outside of the JQuery getJSON method? For example: var price = ""; $.getJSON("../JSONDeliveryPrice", null, function (data) { price = eval(data.price); }); console.log(price); Unfortunately, this code does not ...

javascriptjqueryjsongetjson

Error Encountered - Configuring Node.js Deployment on the Heroku Platform

"APPLICATION ERROR - Oops! Looks like something went wrong with the application and we couldn't load your page. Please give it another shot in a little while. If you are the app owner, make sure to review your logs for more information." Hey there - ...

javascriptnode.jsheroku

What functionality does the --use-npm flag serve in the create-next-app command?

When starting a new NextJS project using the CLI, there's an option to use --use-npm when running the command npx create-next-app. If you run the command without any arguments (in interactive mode), this choice isn't provided. In the documentati ...

javascriptnode.jstypescriptnpmnext.js

Guide on attaching an event to every dynamically created element in JavaScript

I'm currently generating 'li' elements dynamically using a loop and running into issues when it comes to assigning events to each generated element. My goal is to assign an onclick event to every li element that is created. Check out the co ...

javascripthtmlcss

Retrieving the chosen option from a dropdown menu using AngularJS

<tr (click)="onRowClick(myDropDownList.value)"> <td> <select #myDropDownList (click)="$event.stopPropagation()" (change)="onChange($event.target.value)"> <option *ngFor="let n of numbers" [value]="n">{{n}}</option> </se ...

javascripthtmlangulartypescriptselect

Guide on implementing delete and update features in a task manager using node.js and Express

Is it possible to implement both the update and delete functionalities on the same page? I'm unsure of how to pass the specific item index that needs to be deleted from list.ejs to app.js. list.ejs: <html> <body> <div class="ma ...

javascriptnode.jsexpressejs

Having trouble with Ng-repeat not functioning properly on arrays of objects?

I have an array of objects that I fetched from the server. The query is working fine, but when I try to use the ng-repeat directive in my HTML view, nothing is being displayed. Why could this be happening? Here is the JavaScript code: $scope.companyList = ...

javascriptarraysangularjsangularjs-ng-repeat

What causes the difference in behavior between using setInterval() with a named function as an argument versus using an anonymous function?

I can't seem to figure out why using the function name in setInterval is causing issues, while passing an anonymous function works perfectly fine. In the example that's not working (it's logging NaN to the console and before the first call, ...

javascripttypescriptsetinterval