Exploring the GitHub Source Code of Extension | OS – AI-Powered Browsing Experience

GitHub Repository: albertocubeddu/extensionOS

🔍 What is Extension | OS?

Extension | OS is an open-source browser extension that seamlessly brings AI (like LLMs) to your web browsing experience. Imagine right-clicking on any selected text and choosing custom AI-powered prompts like “Fix grammar” or “Translate this”—without switching tabs or apps.

The GitHub repository for this extension is not just a release space—it’s a rich technical asset, filled with best practices, modular architecture, and bleeding-edge features like local LLM support via Ollama and support for various models.

🧱 Folder Structure & Code Breakdown

Here’s a breakdown of the core folders and files in the repository and what they do:

📁 Root Files

README.md – Detailed usage guide, installation, Ollama setup, and changelog.
package.json / pnpm-lock.yaml / yarn.lock – Dependency management (supports pnpm, npm, and yarn).
.env.example – Sample environment setup, helpful for setting API keys.
postcss.config.js / tailwind.config.js – Styling setup using Tailwind CSS.

📁 `background/`

This handles background scripts (like OAuth, messaging, etc.). For example:

tsCopyEditchrome.runtime.onInstalled.addListener(() => { ... });

📁 `components/`

UI components used in the popup, options page, and Prompt Factory. Built with React + Tailwind, they use ShadCN UI and plasmo framework under the hood.

Examples include:

PromptSelector.tsx – Dropdown for selecting the prompt or LLM provider.
Toast.tsx – Notification system for user feedback.

📁 `lib/`

Helper libraries and core logic:

llm.ts – Interfaces with different LLM providers like OpenAI, Ollama, VAPI, etc.
storage.ts – Interacts with Chrome’s localStorage for API key storage.

📁 `options/` & `popup.tsx`

Options page UI – Set API keys, configure models.
popup.tsx – UI shown when the extension icon is clicked.

📁 `contents/`

Content scripts that inject the selection menu directly into pages like Reddit, LinkedIn.

Contains DOM handling, highlighting, and context menu code.

🔐 Security & Local Data Storage

No remote data storage – All API keys and configurations are saved in Chrome’s localStorage.
For example, in macOS: swiftCopyEdit/Users/<username>/Library/Application Support/Google/Chrome/Default/Sync Extension Settings/

🧠 Localhost AI Integration (Ollama)

The extension allows local inference using Ollama, making it ideal for developers and privacy advocates.

Example setup:

bashCopyEditollama pull llama3.1
OLLAMA_ORIGINS="chrome-extension://<extension-id>" ollama serve

You can run it via Docker too:

bashCopyEditdocker run -e OLLAMA_ORIGINS="chrome-extension://<extension-id>" ...

🔬 Testing & Automation

Playwright is integrated for end-to-end testing of browser behavior.
Future roadmap includes automated tagging, release flows, and model workflows.

🎨 Prompt Factory – The Star Feature

Within the code, the Prompt Factory is the most powerful innovation:

Lets users create, edit, and apply custom AI prompts.
Code in components/PromptFactory.tsx and lib/prompts.ts allows: tsxCopyEdit{ id: "grammarFix", title: "Fix Grammar", prompt: "Fix the grammar of the following: {{input}}" }

🛠️ Features at a Glance

Feature	Folder/File(s)	Description
Custom Prompt UI	`components/PromptFactory.tsx`	Build, save, and use prompts
LLM Integration	`lib/llm.ts`, `lib/vapi.ts`	Supports OpenAI, Groq, Ollama, etc.
Localhost AI with Ollama	`README.md`, `lib/ollama.ts`	Run models locally
Context Menu Interaction	`contents/index.ts`, `background/index.ts`	Right-click integration
Secure Storage	`lib/storage.ts`	No cloud—keys are stored locally
Automated Testing	`playwright.config.ts`	Setup for browser testing
CSS & UI	`globals.css`, `plasmo-overlay.css`	Tailwind + ShadCN UI
Side Panel Functionality	`sidepanel.tsx`	Optional sidebar behavior

🔁 Contribution & Development

To clone and run locally:

bashCopyEditgit clone https://github.com/albertocubeddu/extensionOS.git
cd extensionOS
pnpm install # or npm / yarn
pnpm dev     # start development mode

To load the extension:

Go to chrome://extensions
Enable Developer Mode
Click “Load Unpacked”
Select the build folder (unpacked zip or dist)

🧩 Technologies Used

React (Plasmo Framework)
Tailwind CSS + ShadCN UI
Playwright for Testing
Chrome Manifest v3
Docker for Ollama
VAPI, OpenAI, Groq APIs
LocalStorage (not cloud) for API keys

📌 Final Thoughts

The GitHub source code of Extension | OS is more than just a tool—it’s a framework for browser-level AI interaction. The way it modularizes LLM integration, prompt workflows, and browser UI demonstrates solid architectural thinking and high usability.

If you’re looking to:

Build a similar AI extension
Learn browser extension development (MV3)
Implement LLM in the frontend securely

👉 Then exploring and contributing to extensionOS is highly recommended!