This repository is a demo project created for the talk “Unlocking the power of Web Extensions with Vue” by Alba Silvente (@dawntraoz).

Disclaimer: This project is a showcase of Chrome's built-in AI APIs and Web Extension development using Vue and WXT. The built-in AI APIs are now stable in Chrome 127+. This project may include bugs, performance limitations, or experimental features as it continues to evolve.

PrismAI is a browser extension built with Vue 3 and the WXT framework, showcasing how to integrate modern web technologies with built-in browser AI APIs. It enables users to:

• Explore word meanings quickly: When a user selects a word on any web page, PrismAI displays a menu with a description and additional options based on the user's preferences. Using the Prompt API, it can provide deeper insights into the selected text.

• Translate or summarize longer text: For selections longer than a single word, PrismAI leverages integrated AI APIs—such as a Translator & Language Detector and a Summarizer—to translate or generate concise summaries of the selected content.

A quick overview of what PrismAI offers technically.

• Popup (entrypoints/popup/): The main user interface for configuring the extension and viewing a summary of current settings.
• Content Scripts (entrypoints/content/): Injected into web pages to detect selected text, trigger the context menu, and send AI-related requests to the background service.
• Options Page (entrypoints/options/): Provides a dedicated interface for customizing user preferences, similar to the popup settings.
• Background (entrypoints/background/): A service worker that handles communication with Chrome’s built-in AI APIs, responding to messages from the content script.

PrismAI leverages the following built-in browser AI APIs to deliver its smart features:

• The Prompt API: Powers menu actions on selected text when it is a word, generating details like descriptions, usage scenarios, or references using custom prompts, often maintaining context within the same user session.
• Summarizer API: Delivers quick "tl;dr" summaries of selected text.
• Language Detector API & Translator API: Work together for translation. First, the source language of selected content is identified, then it's translated into the user's chosen language (set in the extension's preferences).

# Install dependencies
pnpm install

# Run the project
pnpm dev

To load the extension in Chrome:

1. Open chrome://extensions/ in your Chrome browser.
2. Enable Developer mode (toggle in the top-right corner).
3. Click Load unpacked and select the folder: <YOUR_PROJECT_FOLDER_PATH>/.output/chrome-mv3-dev.

The AI features in PrismAI use Chrome's built-in AI APIs, which are now stable and available in Chrome 127+. No Origin Trials registration or API tokens are required.

• Chrome 127 or later: The built-in AI APIs are available as stable features in Chrome 127+
• AI model availability: Some APIs may require downloading AI models on first use

These APIs work together to detect the source language and translate text:

• Language Detector API: Automatically detects the language of selected text
• Translator API: Translates content to the user's preferred language

Follow the Language Detector API docs and Translator API docs for implementation details.

Provides quick "tl;dr" summaries of longer text selections.

Follow the Summarizer API docs for implementation details.

Powers contextual actions on selected words and text, generating descriptions, usage examples, and other insights.

Follow the Prompt API docs for implementation details.

• VS Code + Vue - Official.

• Web Extension Framework: WXT
• Web Extension Storage: Built-in WXT storage
• Web Extension Messaging: webext-bridge
• Vue 3 with Composition API
• Browser APIs: Chrome Built-in AI APIs (Summarizer, Translator, Language Detector, Prompt) and Selection API

• Official documentation at Chrome for Developers for Chrome Extensions
• Free course at freeCodeCamp.org Build a Chrome Extension – Course for Beginners
• Book “Browser extension development, simplified”
• To keep updated on everything related to extensions visit What's new in Chrome extensions

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