Chrome Extension

Overview

The Olis Chrome Extension provides seamless browser integration, allowing users to access Olis features directly from their browser while browsing the web.

Technology Stack

Manifest V3

Latest Chrome extension API

TypeScript

Type-safe extension development

Webpack

Module bundling and optimization

React

UI components for popup and options

Project Structure

apps/chrome-extension/
├── src/
│   ├── background/        # Service worker
│   ├── content/           # Content scripts
│   ├── popup/             # Extension popup UI
│   ├── options/           # Options page
│   └── shared/            # Shared utilities
├── public/
│   ├── manifest.json      # Extension manifest
│   └── icons/             # Extension icons
└── dist/                  # Build output

Development Setup

Navigate to the extension directory

cd apps/chrome-extension

Install dependencies

pnpm install

Build the extension

pnpm run build

This creates a production build in the dist/ directory.For development with hot reload:

pnpm run watch

Load in Chrome

Open Chrome and navigate to chrome://extensions/
Enable “Developer mode” (toggle in top right)
Click “Load unpacked”
Select the apps/chrome-extension/dist directory

Features

Right-click on selected text to:

Ask Olis about the selection
Search with Olis
Add to knowledge base
Summarize content

// Example: Register context menu
chrome.contextMenus.create({
  id: "ask-olis",
  title: "Ask Olis: \"%s\"",
  contexts: ["selection"]
})

Page Content Extraction

Automatically extract relevant content from web pages:

Article text
Page metadata
Links and references
Code snippets

Search

Quick search interface accessible via browser action

Chat

Mini chat window for quick questions

History

Recent queries and results

Settings

Extension configuration

Manifest Configuration

{
  "manifest_version": 3,
  "name": "Olis",
  "version": "0.1.0",
  "description": "Your AI assistant in the browser",

  "permissions": [
    "activeTab",
    "contextMenus",
    "storage"
  ],

  "host_permissions": [
    "http://localhost:8000/*"
  ],

  "background": {
    "service_worker": "background.js"
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["content.css"]
    }
  ],

  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}

Communication Architecture

Message Passing

// From content script to background
chrome.runtime.sendMessage({
  type: 'ASK_OLIS',
  payload: { query: 'What is this page about?' }
}, (response) => {
  console.log('Response:', response)
})

// In background service worker
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'ASK_OLIS') {
    handleQuery(message.payload).then(sendResponse)
    return true // Async response
  }
})

Storage Management

Use Chrome’s storage API for persistence:

// Save data
chrome.storage.local.set({ apiKey: 'your-key' })

// Retrieve data
chrome.storage.local.get(['apiKey'], (result) => {
  console.log('API Key:', result.apiKey)
})

// Sync across devices
chrome.storage.sync.set({ preferences: {...} })

Building for Production

Build the extension

pnpm run build

Test the build

Load the extension from dist/ directory
Test all features thoroughly
Check console for errors
Verify on different websites

Create a package

cd dist
zip -r olis-extension.zip .

Or use a packaging script:

pnpm run package

Prepare for submission

Create promotional images (1280x800, 640x400)
Write detailed description
Prepare privacy policy
Create demo video (optional)

Publishing to Chrome Web Store

Visit Chrome Web Store Developer Dashboard and pay the $5 registration fee.

Upload your extension

Click “New Item”
Upload the ZIP file
Fill in store listing details
Add screenshots and promotional images

Submit for review

Review can take a few days to a week. You’ll be notified via email.

Best Practices

Performance

Minimize content script impact
Use event-driven architecture
Lazy load resources
Cache API responses

Security

Validate all input
Use HTTPS for API calls
Follow CSP guidelines
Handle sensitive data carefully

UX

Fast, responsive UI
Clear error messages
Intuitive interactions
Keyboard shortcuts

Compatibility

Test on multiple websites
Handle edge cases
Graceful degradation
Cross-browser support

Troubleshooting

Extension Not Loading

Problem: Extension doesn’t appear in ChromeSolution:

Check manifest.json for errors
Verify all files referenced exist
Look for errors in chrome://extensions/
Reload the extension

Content Script Not Injecting

Problem: Content script doesn’t run on pagesSolution:

// Check manifest matches
"content_scripts": [{
  "matches": ["<all_urls>"],  // Or specific patterns
  "js": ["content.js"],
  "run_at": "document_idle"   // Timing matters
}]

API Calls Failing

Problem: Cannot reach API serverSolution:

Check host_permissions in manifest:

"host_permissions": ["http://localhost:8000/*"]

Verify CORS is configured on server
Check network tab in DevTools
Test API endpoint directly

Build Errors

Problem: Webpack build failsSolution:

# Clean and reinstall
rm -rf node_modules dist
pnpm install
pnpm run build

# Check for TypeScript errors
pnpm run type-check

Testing

Manual Testing

Load the extension

Load unpacked extension from dist/ directory

Test on various websites

News articles
Documentation sites
Social media
Web apps

Test all features

Context menu items
Popup functionality
Content extraction
API communication

Check console

Look for errors in:

Extension popup console
Background service worker console
Page console (for content scripts)

Automated Testing

// Example: Jest test for background script
import { handleQuery } from '../background/handlers'

describe('Background handlers', () => {
  test('handleQuery returns response', async () => {
    const response = await handleQuery({ query: 'test' })
    expect(response).toHaveProperty('answer')
  })
})

Get Started

Applications

Development

Features

API Documentation

Endpoints

Overview

Technology Stack

Manifest V3

TypeScript

Webpack

React

Project Structure

Development Setup

Features

Context Menu Integration

Page Content Extraction

Search

Chat

History

Settings

Manifest Configuration

Communication Architecture

Message Passing

Storage Management

Building for Production

Publishing to Chrome Web Store

Best Practices

Performance

Security

UX

Compatibility

Troubleshooting

Testing

Manual Testing

Automated Testing

Next Steps

Desktop Client

API Server

​Overview

​Technology Stack

Manifest V3

TypeScript

Webpack

React

​Project Structure

​Development Setup

​Features

​Context Menu Integration

​Page Content Extraction

​Quick Access Popup

Search

Chat

History

Settings

​Manifest Configuration

​Communication Architecture

​Message Passing

​Storage Management

​Building for Production

​Publishing to Chrome Web Store

​Best Practices

Performance

Security

UX

Compatibility

​Troubleshooting

​Testing

​Manual Testing

​Automated Testing

​Next Steps

Desktop Client

API Server

Overview

Technology Stack

Project Structure

Development Setup

Features

Context Menu Integration

Page Content Extraction

Quick Access Popup

Manifest Configuration

Communication Architecture

Message Passing

Storage Management

Building for Production

Publishing to Chrome Web Store

Best Practices

Troubleshooting

Testing

Manual Testing

Automated Testing

Next Steps