The functionality of setTimeout in Chrome extension is malfunctioning

Greetings everyone, this is my first post here!

I'm currently working on a chrome extension where I am utilizing a recursive setTimeout function. Interestingly, I've noticed that setting the timeout to 13 seconds works fine, but anything beyond 14 seconds does not. Hmm...

Let me share a snippet from my background.js to illustrate:

function start() {

    var timeout = setTimeout( function() { start(); }, 1000*15);
    alert('test');
}

chrome.webNavigation.onCompleted.addListener(function(o) {

    start();

    }, {
      url: [
        {urlContains: 'http://www.example.com/in.php'},
        {urlContains: 'http://www.example.com/out.php'}
      ]
    }
);

Interestingly, reducing the timeout to 1000*13 makes it work smoothly.

Here's a glimpse of my manifest.json file:

{
  "name": "Extension",
  "version": "0.0.7",
  "manifest_version": 2,
  "description": "Keeps proxy session alive",
  "homepage_url": "http://www.example.com",
  "icons": {
    "16": "icons/icon16-on.png",
    "48": "icons/icon48-on.png",
    "128": "icons/icon128-on.png"
  },
  "default_locale": "en",
  "background": {
    "scripts": [
      "src/bg/background.js"
    ],
    "persistent": false
  },
  "browser_action": {
    "default_icon": "icons/icon19.png",
    "default_title": "Example - Off",
    "default_popup": ""
  },
 "permissions": [
    "webNavigation", 
    "*://*/*",
    "https://*/*"
  ]
}

Any thoughts on what could be causing this strangeness? I'm just experimenting in developer mode, by the way.

Appreciate any wisdom you can share!

EDIT

Issue has been resolved:

manifest.json

Added "alarms" to the permissions

background.js

Introduced an event listener for alarms.create:

chrome.alarms.onAlarm.addListener(function(alarm){
    start();
});

Replaced the setTimeout function with the line below:

chrome.alarms.create("Start", {periodInMinutes:1});

Hope this update is helpful to others facing a similar challenge!

Answer №1

It appears that there might be an issue with the automatic suspension of event pages due to inactivity. From my observations, it seems like the onSuspend function is triggered after approximately 10 seconds.

According to https://developer.chrome.com/extensions/event_pages#lifetime, after a brief period of inactivity (a few seconds), the runtime.onSuspend event is sent out. The event page then has a few more seconds to handle this before being forcibly unloaded.

Based on this, you may have around 13 seconds before the page is actually unloaded (allowing for some cleanup time in the onSuspend function). This means that any code initiated after that point will not be executed.

Furthermore, https://developer.chrome.com/extensions/event_pages#transition recommends using the alarms API for event pages instead of relying on the setTimeout function.

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

How to incorporate a JavaScript file into a Handlebars template

I am having trouble receiving calls to my JavaScript file. What could be the issue? Using MVC. Here is the code in view file, file.hbs: <div class="container"> <h2 onClick="test()">Title</h2> {{>list}} </div> <script sr ...

When I attempt to click on the Cancel button, the database row remains undeleted

After a user clicks on the "Cancel" button, I want to reset the source and remove the iframe to prevent the file from being uploaded to the server. This function is currently working as intended. However, I am facing an issue where even after clicking on ...

What is the best way to engage in conversations with several users using socket.io?

Currently, I am in the process of developing a chat application with authentication. The implementation involves socketio for real-time communication and jwt along with cookies for user authentication. The connection to the database has been successfully e ...

What is the best way to incorporate background colors into menu items?

<div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-12 fl logo"> <a href="#"><img src="images/main-logo.png" alt="logo" /> </a> ...

Struggling to retrieve the accurate input value when the browser's return button is clicked?

Having multiple forms created for different conditions, each one submits to a different page. However, when I navigate back from the other page, all my forms display the same values as before. Here's the code snippet: <form action="<?php echo b ...

On page load, refresh the content of the div based on the selected radio button values

My goal is to automatically collect the values of checked radio buttons when the page loads, rather than waiting for a user interaction like clicking a radio button. Below is the JavaScript code I am using: $(function () { updateDivResult(); $(&a ...

A collection of collections

Alright, listen up. I've got a JSON file with an array inside another array. Here's a snippet of the JSON file: { "keys": [ { "game": "Counter-Strike: Global Offensive", "price": "5", "listofkeys" ...

Change the name of the state in Vue mapState

I have a specific situation in my computed where I need to track two different "loading" states. Is there a method to include an alias for the second state using this syntax? computed: { ...mapState('barcodes', ['barcodes', ' ...

Why are static PropTypes used in ReactJS and do they offer any solutions or are they merely a recurring design choice?

While delving into the code base of a web application, I came across some static PropTypes that left me questioning their purpose and necessity. Here is a snippet of the code in question: static propTypes = { fetchCricketFantasyPlayers: PropTypes.fun ...

Leverage the variable from one function in a different function within Three.js using Javascript

After loading an obj file using three.js, I attempted to obtain the 'X' position of its vertices and save it in a variable named 'pos' inside the objloader function within the init() function. My goal was to access this variable's ...

The initialization of a static member in a JS class occurs prior to the loading of the cdn

After declaring this class member, I encountered the issue stating that MenuItem is not defined. It appears that the class initialization occurs before React or Material-UI finishes loading (I am currently loading them from their CDN using straight < ...

Integrating eBay API with Node.js

Hello, I am new to Node.js and I could really use some assistance with exporting console log data to an HTML page. I came across a helpful example on GitHub at this link: https://github.com/benbuckman/nodejs-ebay-api My current issue is that although I h ...

Changing the color of an open Bootstrap 4 accordion panel when the page loads

I am looking to emphasize the panel that the user has opened. If a user clicks the button in the card header, the background turns red, which is working smoothly as demonstrated in the code snippet. In certain scenarios, the first panel is open by default ...

Error: The function pajinate is not defined for jQuery([...])

I'm currently experiencing difficulties with the jQuery Pajinate plugin after migrating to a new host. The script was functioning properly on my previous hosting platform, but now I seem to be encountering some problems. Below is the code snippet: ...

Delete the initial instance of a specific element with JavaScript or Lodash

I am working with an array that looks like this - ["a", "a", "b", "c", "d", "e"] My goal is to filter this array in a way that removes only the first occurrence of each element. Based on the exa ...

Selecting a specific element and attaching a particular class to this element, but directing it towards a different element that shares the same index in a separate node list

I am working on a project where I have two sets of identical images - one is displayed in a gallery format and the other set is hidden until its corresponding gallery image is clicked, creating a lightbox effect. For example: <ul id="gallery"> ...

You do not have the authorization to access this content

I have been working on a Laravel web application to upload images into a data table and allow users to download the uploaded image on click. Initially, everything was working fine until I made changes in the code from return '{!! Html::link('ima ...

Gather every hyperlink and input fields without utilizing jQuery

Is there a way to target all a and form elements without relying on jQuery? My end goal is to achieve the following functionality: document.querySelectorAll('a').forEach(element => { element.addEventListener('click', () => { ...

Utilizing a window.onload function in Microsoft Edge

After trying to run some code post-loading and rendering on the target page, I was recommended to use the Window.load function. This method worked flawlessly in Firefox and Chrome, but unfortunately, I couldn't get it to function in IE. Is there an al ...

The orthographic camera in Three.js offers a unique perspective for rendering

Currently, I am working on a project involving an application that showcases various 3D models. The process involves loading the models, creating meshes, and adding them to the scene as part of the standard procedure. Upon completing the addition of the la ...