How to Solve CORS Issues When Calling Ollama API from a Chrome Extension

🔐 How to Solve CORS Issues When Calling Ollama API from a Chrome Extension

Integrating a local Ollama API with a Chrome Extension can be tricky due to CORS restrictions. This guide walks you through resolving those issues and enabling successful communication between your extension and the Ollama backend.

🚫 The Challenge: 403 Forbidden Error

When calling the Ollama API from a Chrome Extension, you might encounter the dreaded:

403 Forbidden

This happens because of CORS (Cross-Origin Resource Sharing) limitations, which block requests from unauthorized origins like chrome-extension://.

🔧 Solution: Configuring Ollama and Chrome Extension

To overcome CORS issues, you'll need to:

Configure Ollama to allow Chrome Extension origins
Set the correct permissions in your extension’s manifest.json

✅ 1. Configure Ollama to Allow Chrome Extension Origins

Start your Ollama server with an environment variable that explicitly allows Chrome Extension requests:

OLLAMA_ORIGINS=chrome-extension://* ollama serve

This whitelists all Chrome Extension origins and enables them to make API calls to your local Ollama server.

✅ 2. Update Your Chrome Extension's Manifest File

Edit your manifest.json to grant the right permissions:

{
  "permissions": [
    "tabs",
    "activeTab",
    "http://localhost/*",
    "scripting"
  ],
  "host_permissions": ["http://localhost/*"]
}

This ensures your extension can make requests to your Ollama server running on localhost.

💻 Implementing the API Call

Now that permissions and origins are configured, implement the API call in your popup or background script:

function generateCodeSuggestionFromOllama(prompt) {
  const apiUrl = "http://localhost:11434/api/generate"
  const body = {
    model: "codellama",
    prompt: prompt,
    stream: false
  }

  fetch(apiUrl, {
    method: "POST",
    body: JSON.stringify(body)
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error("Network response was not ok")
      }
      return response.text()
    })
    .then((data) => {
      const jsonData = JSON.parse(data)
      const response = jsonData.response
      document.getElementById("codeSuggestion").innerHTML = response
    })
    .catch((error) => console.error("Error:", error))
}

This function sends the prompt to Ollama, parses the response, and updates the DOM.

📘 Conclusion

By following these steps, you can successfully connect your Chrome Extension to the Ollama API and avoid CORS-related headaches.

🔐 Security Note

Be cautious when allowing cross-origin requests. Always whitelist only the sources you trust.

If this guide helped you fix your 403 CORS issues, consider sharing it with fellow developers. For more extension tips and AI integrations, follow the Mellowtel Team!

How to Solve CORS Issues When Calling Ollama API from a Chrome Extension