The extension's background script fails to load properly until it is manually resaved

When using Firefox, I encounter an issue where a page I have designed loads in a new tab after clicking a browser icon button. The background script runs smoothly the first time, but encounters problems upon reloading the page, clicking the button again with a tab already open, or opening another tab after closing one. To resolve this, I find myself having to resave the script and force the extension to be unloaded/reloaded for it to function correctly.

Update: After further investigation, I have identified that the problem lies within the code below. Whenever the page is refreshed or the browser action button is clicked again, the execution reaches and skips over the xhr.onreadystatechange function, thus failing to reach Main(). It appears that the xhr.onreadystatechange is not changing even after requests/responses have been made.

Update 2: Upon closer inspection, I have observed that the execution of the code only successfully reaches Main() on one out of three passes. All variables maintain their values from the initial run, which seems to be causing disruptions. How can I clear these variables after reloading the page or clicking the browser icon?

function GetData(request)
{
  var xhr = new XMLHttpRequest();
  
  xhr.onreadystatechange = function()
  {
    console.log(xhr.readyState + " : " + xhr.status)
    if (xhr.readyState == 4 && xhr.status == 200)
    {
      re_data = JSON.parse(xhr.responseText);
      Main();
    }
  }
  
  xhr.open("GET", request, true);
  xhr.send();
}

Answer №1

After some investigation, I have identified the problem and found a solution. It appears that once the background script is activated, it remains active for the entire duration of the extension. This means that variables are not automatically reset when needed. Any variables that require resetting must be done so manually. Additionally, when reloading the page, only the webpage itself is refreshed - the code needs to be restarted manually by triggering the appropriate function through a button, link, or other user action.

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

Managing Javascript's async/await behavior when encountering errors

Exploring the benefits of ES6 Async/Await, I found it much more user-friendly to work with async/await compared to Generators and Promises. An example scenario is when calling a promise function (getActiveSession in the code snippet below) from within an ...

Using cURL instead of AJAX for PHP requests

My current situation may seem simple, but it feels like a tough challenge for me right now. I am attempting to scrape a website that utilizes AJAX calls to retrieve data. This website has a form where you can select options and then click the submit butt ...

Guide on how to get json entries

In my current project using the yii framework, I have a JSON input that looks like this: $json='{"userId":1,"questionPaperId":1;"optionId":2}'; When creating functions in yii, I decode the JSON and access the inputs as follows: $obj=CJSON::dec ...

Error due to callback function in FullCalendar selection in Javascript

Currently, I am in the process of integrating fullcalendar into a project that I have been working on. Unfortunately, I have encountered some errors with the select: callback function when attempting to submit an ajax request. Here is what my select: callb ...

Encountering a START_ARRAY token during a spring ajax call

Here is an example of a JSON object: [ { "usernameid": [ "2", "7" ], "phaseid": [ "2", "7" ], "weekstartdate": "2014-11-02" } ] In my controller, I am trying ...

Emulate a true right-click action, going beyond just clicking the mouse button down or up

Utilizing a somewhat outdated jQuery plugin known as contextmenu, I am able to replace the right click context menu on specific elements. You can access the source code for this plugin here. To attach the context menu to an element, you simply do the foll ...

Accessing range slider values in a separate function with Javascript

In my project, I have a range slider that provides minimum and maximum mileage values. I need to access these values in another Javascript function for additional processing. Everything was working fine until I attempted to encapsulate the slider within a ...

Find the nearest point relative to a designated location

In my latest project, I have created a stunning panorama featuring a compass placed right in the middle. The compass is initially pointing towards the top center of the image. Now, I am faced with the challenge of moving the compass as the viewer navigate ...

Generate Azure ARM Template for Creating KeyVault Secrets in Keyvault across Multiple Resource Groups

For my Azure deployment, the Virtual Machine's Username and Password are automatically created and passed as parameters. The resource group where the VM is deployed can be any. My Keyvault resides in a specific resource group, and I need to store the ...

Get certain elements from a dictionary

Here is an excerpt from a "json style" file retrieved from an API: [ { "allSites": { "activeLicenses": 75660, "totalLicenses": 0 }, "sites": [ { "accountId": "56378637863", "accountName": "XX | AC ...

Why is the Php server refusing to accept Json data from the android app?

I have come across questions similar to this on Stack Overflow, however, none of them addressed my specific query. I am attempting to send JSON data from an Android application to a PHP server using the code snippet below. @Override protected Boolean doIn ...

Using Ajax functionality in a boilerplate.js setup

Currently embarking on a complex JavaScript project utilizing BoilerplateJS. I aim to establish a connection in the viewmodel with an external REST API that provides JSON data. However, I find myself uncertain about the best method for execution. Seeking ...

Retrieve the specified columns as per user-defined filters

Being completely new to JavaScript, I have been assigned the task at hand. The technology stack includes node.js, express, mongodb, and mongoose. Imagine that the database/collection(s) consist of 1000 rows and each row has 50 columns. Some columns may h ...

Adjusting the content of a single text box by typing in another

Is it feasible to automatically convert a Nepali date input in one textbox into an English date and display it in another textbox without any page refresh? I have a PHP function that can translate dates between Nepali and English, and I want it to execute ...

Executing the Javascript function specified above upon the page being loaded

I'm fairly new to JavaScript, so please bear with me. I've got a JavaScript function on my page: <script type="text/javascript"> Sys.debug = true; var popup; Sys.require(Sys.components.popup, function () { popup = Sys.c ...

Steps for regularly executing 'npm run build' on the server

My website doesn't require frequent content updates, as users don't always need the latest information. As a result, most pages are generated server-side and served as static pages. There will be occasional database updates that need to be visib ...

After the successful creation of a new user account using createUserWithEmailAndPassword, the collection

I'm having an issue with my signup user page where only half of it is functioning correctly. What works: The createUserWithEmailAndPassword call via firebase firestore runs successfully. What doesn't work: In the promise for that call, I'm ...

What is the process for changing the background color when a button or div is pressed, and reverting the color back when another button or div is

Looking to customize a list of buttons or divs in your project? Check out this sample layout: <button type="button" class="btn" id="btn1">Details1</button> <button type="button" class="btn" id="btn2">Details2</button> <button ty ...

An image's dimensions must be verified before assessing its criteria

In my project, I am facing a challenge with image uploading functionality. The requirement is to check if the uploaded image exceeds the maximum criteria set. If it does, an alert message should be displayed. alert("Height exceeds our maximum criteria. Pl ...

Tips for creating smooth transitions between images in a slideshow

I am looking to create a slideshow that displays images with crossfading while simultaneously highlighting radio buttons below it. I also want the slideshow to pause when the mouse hovers over an image. However, I am experiencing issues with the background ...