Resolving "Uncaught (in promise) Error: Error: Adapter 'http' is not available in the build"

When developing Chrome extensions, you may encounter the "Uncaught (in promise) Error: Error: Adapter 'http' is not available in the build” error when using Axios. This article explores how to solve this issue using the Fetch API with an async/await approach.

The Problem

Chrome extension service workers don't support XMLHttpRequest, which Axios relies on. This leads to the error:

Uncaught (in promise) Error: Error: Adapter 'http' is not available in the build

The Solution: Fetch API with Async/Await

Instead of using Axios, we'll use the Fetch API, which is natively supported in service workers. We'll implement this using async/await for cleaner, more readable code.

Implementing Fetch with Async/Await

Here's a detailed example of how to use Fetch with async/await in your Chrome extension:

async function fetchData(url, token) {
  try {
    const response = await fetch(url, {
      method: "GET",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${token}`,
        "Cookie": token  // If needed
      }
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Fetch error:", error);
    throw error;
  }
}

Using the Async Function

To use this function in your service worker or other parts of your extension, you can do:

async function handleDataFetch() {
  try {
    const data = await fetchData("https://api.example.com/data", "your-auth-token");
    console.log("Data received:", data);
    // Process your data here
  } catch (error) {
    console.error("Error fetching data:", error);
    // Handle errors appropriately
  }
}

// Call the function
handleDataFetch();

Benefits of Async/Await Approach

1. Readability: The code flows more like synchronous code, making it easier to understand.

2. Error Handling: Try/catch blocks can handle both synchronous and asynchronous errors.

3. Sequential Execution: Easily handle multiple asynchronous operations in sequence.

Best Practices for Async/Await in Chrome Extensions

1. Error Handling: Always use try/catch blocks to handle potential errors.

2. Avoid Blocking: Remember that await still blocks execution in the current function. Use Promise.all() for concurrent operations.

3. Request Timeouts: Implement request timeouts to prevent hanging:

    const timeout = 5000; // 5 seconds
   
    const fetchWithTimeout = async (url, options, timeout) => {
      const controller = new AbortController();
      const id = setTimeout(() => controller.abort(), timeout);
   
      try {
        const response = await fetch(url, {
          ...options,
          signal: controller.signal
        });
        clearTimeout(id);
        return response;
      } catch (error) {
        clearTimeout(id);
        if (error.name === 'AbortError') {
          throw new Error('Request timed out');
        }
        throw error;
      }
    };
   

4. Caching: Implement caching to improve performance:

    const cache = new Map();
   
    async function fetchWithCache(url, token) {
      if (cache.has(url)) {
        return cache.get(url);
      }
   
      const data = await fetchData(url, token);
      cache.set(url, data);
      return data;
    }
   

5. Rate Limiting: Implement a simple rate limiter:

    const rateLimiter = {
      lastCall: 0,
      minInterval: 1000, // minimum 1 second between calls
   
      async limit(fn) {
        const now = Date.now();
        if (now - this.lastCall < this.minInterval) {
          await new Promise(resolve => setTimeout(resolve, this.minInterval - (now - this.lastCall)));
        }
        this.lastCall = Date.now();
        return fn();
      }
    };
   
    // Usage
    await rateLimiter.limit(() => fetchData(url, token));
   

Conclusion

By adopting the Fetch API with async/await in your Chrome extension, you not only resolve the "Adapter 'http' not available" error but also create more maintainable and efficient code. This approach aligns with modern JavaScript practices and provides a solid foundation for handling asynchronous operations in your extension.

Remember to always test your extension thoroughly, especially when making network requests, to ensure it behaves correctly under various conditions. Keep your code modular and follow Chrome's best practices and security guidelines for extension development.