Ollama Browser extension

A Browser extension that allows you to interact with Ollama's AI models directly from your browser. Built with Plasmo and TypeScript, this extension provides a seamless interface for sending prompts to locally running Ollama models and displaying their responses.

Table of Contents

• Overview
• Features
• Prerequisites
• Installation
  • Setting Up Ollama
  • Setting Up the Extension
• Development
  • Project Structure
  • Available Commands
• Usage
• Why Plasmo
• Cross-Browser Compatibility
• Deployment
  • Building for Production
  • Publishing to Chrome Web Store
• Troubleshooting
• Contributing
• License

Overview

Ollama Chrome Assistant is a browser extension that bridges the gap between your browser and locally running Ollama AI models. It provides a simple interface to send prompts to Ollama and display the responses, all without leaving your browser.

Features

• Clean, intuitive user interface
• Direct integration with locally running Ollama models
• Support for various Ollama models (Llama, Mistral, etc.)
• Real-time streaming responses
• Lightweight and fast performance

Prerequisites

• Node.js (v14 or higher)
• npm, yarn, or pnpm
• Ollama installed on your machine
• Google Chrome browser

Installation

Setting Up Ollama

1. Download and install Ollama from the official website.
2. Pull a model of your choice:

ollama pull llama3

3. IMPORTANT: Ollama requires explicit permission to accept requests from Chrome extensions. Start Ollama with the following command:

OLLAMA_ORIGINS=chrome-extension://* ollama serve

Note: On macOS, you may need to set this environment variable permanently: bash > launchctl setenv OLLAMA_ORIGINS "chrome-extension://*" > Then restart the Ollama application.

Setting Up the Extension

1. Clone this repository:

git clone https://github.com/yourusername/ollama-chrome-assistant.git
cd ollama-chrome-assistant

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

4. Load the extension in Chrome:
   • Navigate to chrome://extensions/
   • Enable "Developer mode" (toggle in the top right)
   • Click "Load unpacked" and select the build/chrome-mv3-dev directory from your project

Development

Project Structure

ollama-chrome-assistant/
├── package.json
├── tsconfig.json
├── .gitignore
├── src/
│   ├── popup/
│   │   ├── index.tsx             # Main popup UI
│   │   └── style.css             # Popup UI's designs
│   ├── background.ts             # Background script for API calls
│   ├── components/
│   │   ├── InputForm.tsx         # Input form component
│   │   ├── ResponseDisplay.tsx   # Component to display Ollama's response
│   │   └── LoadingIndicator.tsx  # Loading state component
│   ├── hooks/
│   │   └── useOllama.ts          # Custom hook for Ollama API
│   ├── utils/
│   │   └── api.ts                # API utility functions
│   └── assets/
│       └── icon.png              # Extension icon
└── assets/
    └── icon.png                  # Extension icon (copied to build)

Available Commands

• npm run dev - Start the development server with hot reloading
• npm run build - Build the extension for production
• npm run package - Package the extension for distribution

Usage

1. Click on the extension icon in your Chrome toolbar
2. Enter your prompt in the text area
3. Click "Generate Response" or press Enter
4. View the response from Ollama

Why Plasmo

Plasmo is an excellent choice for developing browser extensions for several compelling reasons:

Streamlined Development Experience

Plasmo significantly reduces the complexity of browser extension development by providing:

• Zero-config TypeScript support: Write type-safe code without the hassle of complex configuration files.
• Declarative Development: Just write a file, export a component, and Plasmo handles the bundling and mounting automatically.
• File-based Routing: Similar to Next.js, Plasmo uses an intuitive file-based routing system for extension components.

Enhanced Developer Productivity

Plasmo includes features that make development faster and more efficient:

• Live Reloading & HMR: See your changes instantly with framework-native hot module replacement, eliminating the need to manually refresh your extension.
• Built-in Storage and Messaging Libraries: Simplifies state management and communication between different parts of your extension.
• Environment Variable Support: Built-in support for .env files makes configuration management straightforward.

React-First Approach

For React developers, Plasmo offers a familiar and comfortable development experience:

• First-class React Support: Seamless integration with the React ecosystem.
• Component-Based Architecture: Build your extension using reusable, modular components.
• Style Leakage Prevention: Automatically creates a shadow DOM to prevent styles from leaking between your extension and web pages.

Modern Development Stack

Plasmo embraces modern web development practices:

• TypeScript Integration: Comprehensive TypeScript support for better code quality and developer experience.
• Built-in Authentication: Simplified OAuth and authentication flows, which are often complex in extension development.
• Modern JavaScript Features: Full support for the latest JavaScript features and syntax.

Cross-Browser Compatibility

While this extension is initially built for Chrome, Plasmo makes it straightforward to target multiple browsers with minimal changes. Here's how to adapt this extension for other browsers:

Firefox Compatibility

To make your extension work in Firefox:

1. Update the manifest.json: Firefox uses a slightly different manifest format. Plasmo can handle this automatically with the right configuration:

// plasmo.config.ts
import { type PlasmoConfig } from "plasmo"

export const config: PlasmoConfig = {
  browsers: ["chrome", "firefox"]
}

2. API Namespace Considerations: Firefox uses the browser.* namespace instead of Chrome's chrome.* namespace. The WebExtension browser API Polyfill can help bridge this gap:

npm install webextension-polyfill
# or
yarn add webextension-polyfill

Then import it in your background scripts and content scripts:

import browser from "webextension-polyfill"

3. Asynchronous API Handling: Firefox uses Promises for asynchronous APIs, while Chrome traditionally uses callbacks. The polyfill mentioned above helps normalize this behavior.

Microsoft Edge Compatibility

Since Edge is now Chromium-based, most Chrome extensions work with minimal changes:

1. Update the Plasmo config:

// plasmo.config.ts
import { type PlasmoConfig } from "plasmo"

export const config: PlasmoConfig = {
  browsers: ["chrome", "firefox", "edge"]
}

2. Edge-specific Manifest Keys: Some manifest keys may be specific to Edge. Plasmo can handle these differences automatically.

Safari Compatibility

Safari support requires additional considerations:

1. Safari Web Extension Converter: After building your extension, you can use Apple's Safari Web Extension Converter to convert it for Safari.
2. Safari-specific APIs: Safari may have different API implementations or limitations. Test thoroughly after conversion.

Building for Multiple Browsers

To build your extension for multiple browsers at once:

plasmo build --target=chrome,firefox,edge

This will generate separate builds for each browser in the build directory.

Deployment

Building for Production

To create a production build of your extension:

npm run build
# or
yarn build
# or
pnpm build

This will generate a production-ready build in the build/chrome-mv3-prod directory.

Publishing to Chrome Web Store

1. Create a ZIP file of your production build:

npm run package
# or
yarn package
# or
pnpm package

2. Create a developer account on the Chrome Web Store Developer Dashboard
3. Pay the one-time developer registration fee (if you haven't already)
4. Click "New Item" and upload your ZIP file
5. Fill out the required information:
   • Description
   • Screenshots
   • Icon
   • Category
   • Privacy policy
6. Submit your extension for review

The review process typically takes a few business days. Once approved, your extension will be published to the Chrome Web Store.

Troubleshooting

Common Issues

• 403 Forbidden Error: Make sure Ollama is running with the correct CORS settings:

OLLAMA_ORIGINS=chrome-extension://* ollama serve

• Connection Refused: Ensure Ollama is running and accessible at http://localhost:11434
• Model Not Found: Make sure you've pulled the model you're trying to use:

ollama pull llama3

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with Plasmo Framework and Ollama.