Issue with Chrome Extension: New popup Window Only Opens When DevTools is Active

Question

The extension allows users to modify a recipe, shows a loading window, and then opens a new window with the modified recipe. However, the new window only opens when Chrome DevTools is active; otherwise, it doesn't appear.

This is code for the loading.js file:

document.addEventListener('DOMContentLoaded', () => {
 console.log('Loading script loaded successfully.');

// Function to check for the modified recipe
 function checkForModifiedRecipe() {
   chrome.storage.local.get(['recipeReady', 'modifiedRecipe', 'imagePath'], (result) => {
  if (result.recipeReady && result.modifiedRecipe && result.imagePath) {
    console.log('Modified recipe found in storage:', result.modifiedRecipe);

    // Remove the recipeReady flag
    chrome.storage.local.remove('recipeReady', () => {
      console.log('RecipeReady flag removed from storage');

      // Close the loading window
      chrome.windows.getCurrent((window) => {
        console.log('Current window:', window);
        chrome.windows.remove(window.id, () => {
          console.log('Loading window closed, opening new window');
          // Open the new window with the recipe
          openRecipeWindow();
        });
      });
    });
  } else {
    console.log('Recipe not ready yet, polling again...');
  }
});
}

function openRecipeWindow() {
  chrome.windows.create({
    url: chrome.runtime.getURL("recipe.html"),
    type: "popup",
    width: 500,
    height: 600
  }, (newWindow) => {
    if (chrome.runtime.lastError) {
      console.error('Error creating new window:', 
chrome.runtime.lastError);
    } else {
      console.log('New window opened:', newWindow);
    }
  });
}

// Poll for the modified recipe every second
setInterval(checkForModifiedRecipe, 1000);
});

We tried using Chrome's alarms API to delay the window opening. ensuring all processes were complete, but this didn't fix the issue. The window still only opened with DevTools active.

Further investigation suggested the issue might be related to how the script executes depending on whether DevTools is open. To resolve this, we: Ensured event listeners were correctly set up. Added error handling for silent failures. Used chrome.windows.create for a more reliable window-opening. Logged errors with chrome.runtime.lastError to capture issues without needing DevTools. We expected that when the new recipe is ready, the loading window will close, and a new window with the modified recipe will open.