diff --git a/functional-samples/sample.water_alarm_notification/README.md b/functional-samples/sample.water_alarm_notification/README.md new file mode 100644 index 0000000000..1547c02cfa --- /dev/null +++ b/functional-samples/sample.water_alarm_notification/README.md @@ -0,0 +1,26 @@ +# Drink Water Alarm + +This example demonstrates how to use the [Alarms API](https://developer.chrome.com/docs/extensions/reference/api/alarms) and [Notifications API](https://developer.chrome.com/docs/extensions/reference/api/notifications) to remind users to drink water at set intervals. + +## Overview + +The extension allows users to set a recurring reminder to stay hydrated. Users can choose from preset intervals (1, 15, or 30 minutes) through a popup interface. When the alarm fires, a notification appears prompting the user to drink water. + +## Implementation Notes + +The extension uses several Chrome APIs together: + +- `chrome.alarms` - Creates and manages the reminder timer +- `chrome.notifications` - Displays the hydration reminder when the alarm fires +- `chrome.storage.sync` - Persists the user's selected interval across sessions +- `chrome.action` - Shows an "ON" badge when an alarm is active + +When the notification appears, users can click "Keep it Flowing" to restart the timer with their previously selected interval. + +## Running this extension + +1. Clone this repository. +2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked). +3. Click the extension icon to open the popup. +4. Select a time interval (Sample minute, 15 Minutes, or 30 Minutes). +5. Wait for the notification to appear reminding you to drink water. diff --git a/functional-samples/tutorial.focus-mode/README.md b/functional-samples/tutorial.focus-mode/README.md new file mode 100644 index 0000000000..65ac7f87f1 --- /dev/null +++ b/functional-samples/tutorial.focus-mode/README.md @@ -0,0 +1,30 @@ +# Focus Mode + +This example demonstrates how to use the [Scripting API](https://developer.chrome.com/docs/extensions/reference/api/scripting) to inject and remove CSS on demand, enabling a distraction-free reading experience on Chrome's documentation pages. + +## Overview + +The extension adds a focus mode toggle for Chrome's Extensions and Chrome Web Store documentation. When activated, it hides navigation elements and other distractions, centering the article content for easier reading. + +## Implementation Notes + +The extension uses the following Chrome APIs: + +- `chrome.scripting.insertCSS()` - Injects the focus mode stylesheet when enabled +- `chrome.scripting.removeCSS()` - Removes the stylesheet when disabled +- `chrome.action` - Displays an "ON"/"OFF" badge indicating the current state +- `activeTab` permission - Allows the extension to modify only the current tab + +The focus mode can be toggled by: + +- Clicking the extension icon +- Using the keyboard shortcut (Ctrl+B on Windows/Linux, Command+B on Mac) + +The toggle state is maintained per-tab, allowing different tabs to have different focus mode states. + +## Running this extension + +1. Clone this repository. +2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked). +3. Navigate to https://developer.chrome.com/docs/extensions/ or https://developer.chrome.com/docs/webstore/. +4. Click the extension icon or press Ctrl+B (Command+B on Mac) to toggle focus mode. diff --git a/functional-samples/tutorial.open-api-reference/README.md b/functional-samples/tutorial.open-api-reference/README.md new file mode 100644 index 0000000000..730d4b7327 --- /dev/null +++ b/functional-samples/tutorial.open-api-reference/README.md @@ -0,0 +1,36 @@ +# Open Extension API Reference + +This example demonstrates how to use the [Omnibox API](https://developer.chrome.com/docs/extensions/reference/api/omnibox) to quickly navigate to Chrome extension API reference pages directly from the address bar. + +## Overview + +The extension registers the keyword "api" in Chrome's omnibox. When users type "api" followed by a space, they can search for any Chrome extension API and navigate directly to its documentation page. + +## Implementation Notes + +The extension uses several Chrome APIs: + +- `chrome.omnibox` - Registers the "api" keyword and handles input/selection events +- `chrome.storage.local` - Stores recent search history to provide personalized suggestions +- `chrome.alarms` - Used for periodic tip fetching from an external service +- Content script - Runs on the API reference pages + +When the user types in the omnibox: + +1. `onInputChanged` provides API suggestions based on user input and search history +2. `onInputEntered` opens the selected API's reference page in a new tab +3. The most recent searches (up to 4) are saved for future suggestions + +The service worker is organized into modules: + +- `sw-omnibox.js` - Handles omnibox events and navigation +- `sw-suggestions.js` - Generates API suggestions +- `sw-tips.js` - Fetches extension development tips + +## Running this extension + +1. Clone this repository. +2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked). +3. Type "api" in the address bar and press Space or Tab. +4. Start typing an API name (e.g., "tabs", "storage", "scripting"). +5. Select a suggestion or press Enter to open the API reference page.