Tutorials

How to Fix Axios HTTP Adapter Error in Chrome Extensions

Learn how to fix the Axios “Adapter http is not available” error in Chrome extensions by replacing Axios with Fetch API and async/await.

Mellowtel

— 2 min read
Share

When developing Chrome extensions, you may encounter the following Axios error:

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

This article shows how to resolve it using the Fetch API and async/await.

The Problem

Chrome extension service workers don’t support XMLHttpRequest, which Axios uses by default. This leads to the error above.

The Solution: Fetch API with Async/Await

Instead of Axios, use the Fetch API—natively supported in service workers—alongside async/await for readability and control.

Implementing Fetch with Async/Await

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

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
  }
}

handleDataFetch();

Benefits of Async/Await Approach

  • Readability: Synchronous-like code flow
  • Error Handling: Use try/catch for async and sync errors
  • Sequential Execution: Easily manage dependent async operations

Best Practices for Async/Await in Chrome Extensions

1. Error Handling

Wrap all fetch calls in try/catch.

2. Avoid Blocking with await

Use Promise.all() for parallel requests.

3. Request Timeouts

const timeout = 5000;

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 Responses

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

const rateLimiter = {
  lastCall: 0,
  minInterval: 1000,

  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 switching to the Fetch API with async/await, you resolve the "Adapter 'http' not available" issue in Chrome Extensions and write cleaner, more maintainable code.

✅ Always test thoroughly
✅ Follow Chrome’s security guidelines
✅ Handle requests and errors carefully

If this helped you fix your extension, consider sharing it with fellow developers. Follow Mellowtel for more Chrome extension insights and tutorials!

Read more