playlist-extension/2025-03-31-4-claude-waiting-for-navigation.md

Me

Here is some code from /home/brwong/projects/experiments/playlist/background.js:

    await browser.tabs.update(tabId, { url: nextVideo.url });

in my firefox extension, after telling a tab to navigate to a new page, how can I wait until the navigation is complete?

CodeCompanion (Anthropic)

Reasoning

The user is asking how to wait for a page navigation to complete in a Firefox extension after using browser.tabs.update() to navigate to a new URL.

In Firefox extensions, there are a few ways to wait for navigation to complete:

1. Use the browser.webNavigation.onCompleted event listener
2. Use the browser.tabs.onUpdated event listener with a filter for the "complete" status
3. Use browser.tabs.executeScript to check if the page is loaded (less reliable)

Let me provide a solution using the browser.webNavigation.onCompleted event, which is specifically designed for this purpose:

async function navigateAndWait(tabId, url) {
  return new Promise((resolve) => {
    const listener = (details) => {
      if (details.tabId === tabId && details.frameId === 0) {
        browser.webNavigation.onCompleted.removeListener(listener);
        resolve();
      }
    };
    
    browser.webNavigation.onCompleted.addListener(listener);
    browser.tabs.update(tabId, { url: url });
  });
}

// Usage
await navigateAndWait(tabId, nextVideo.url);

Alternatively, they could use the browser.tabs.onUpdated event:

async function navigateAndWait(tabId, url) {
  return new Promise((resolve) => {
    const listener = (updatedTabId, changeInfo, tab) => {
      if (updatedTabId === tabId && changeInfo.status === 'complete') {
        browser.tabs.onUpdated.removeListener(listener);
        resolve(tab);
      }
    };
    
    browser.tabs.onUpdated.addListener(listener);
    browser.tabs.update(tabId, { url: url });
  });
}

// Usage
await navigateAndWait(tabId, nextVideo.url);

I think I should provide both options and explain the differences so the user can choose the one that best fits their needs.

Response

To wait for navigation to complete after using browser.tabs.update(), you can use either the webNavigation.onCompleted event or the tabs.onUpdated event. Here are both approaches:

Option 1: Using webNavigation.onCompleted (recommended)

async function navigateAndWait(tabId, url) {
  return new Promise((resolve) => {
    const listener = (details) => {
      if (details.tabId === tabId && details.frameId === 0) {
        browser.webNavigation.onCompleted.removeListener(listener);
        resolve();
      }
    };
    
    browser.webNavigation.onCompleted.addListener(listener);
    browser.tabs.update(tabId, { url });
  });
}

// Replace your current code with:
await navigateAndWait(tabId, nextVideo.url);

Option 2: Using tabs.onUpdated

async function navigateAndWait(tabId, url) {
  return new Promise((resolve) => {
    const listener = (updatedTabId, changeInfo, tab) => {
      if (updatedTabId === tabId && changeInfo.status === 'complete') {
        browser.tabs.onUpdated.removeListener(listener);
        resolve(tab);
      }
    };
    
    browser.tabs.onUpdated.addListener(listener);
    browser.tabs.update(tabId, { url });
  });
}

// Replace your current code with:
await navigateAndWait(tabId, nextVideo.url);

The first option is generally more reliable for determining when the page has fully loaded. Which permissions are declared in your manifest.json?

Me

what permission do I need to add to enable this code?

CodeCompanion (Anthropic)

Reasoning

To use the code I provided, you'll need to add specific permissions to your Firefox extension's manifest.json file. Let's identify the required permissions for each approach:

1. For the first approach using browser.webNavigation.onCompleted:

   • You need the "webNavigation" permission

2. For the second approach using browser.tabs.onUpdated:

   • You need the "tabs" permission

Since you're already using browser.tabs.update(), you likely already have the "tabs" permission. However, for the first approach with webNavigation, you would need to add that permission if it's not already in your manifest.

Let me provide the exact manifest.json permission you need to add for each approach:

Response

You need to add the appropriate permission to your manifest.json file:

For Option 1 (webNavigation approach)

{
  "permissions": [
    "webNavigation"
  ]
}

For Option 2 (tabs approach)

{
  "permissions": [
    "tabs"
  ]
}

Since you're already using browser.tabs.update(), you likely already have the "tabs" permission, but the webNavigation permission would need to be added if you choose the first approach.

If you're adding this to existing permissions, just add the new permission to your current permissions array rather than replacing it entirely.

Would you like me to explain the differences between these two approaches in more detail?

Me