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.

• 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

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.

• 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

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

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.

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

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)

• 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

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

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

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.

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.

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.

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.

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:

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.

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

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.

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.

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.

• 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

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

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

Built with Plasmo Framework and Ollama.