Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions functional-samples/sample.water_alarm_notification/README.md
Original file line number Diff line number Diff line change
@@ -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.
30 changes: 30 additions & 0 deletions functional-samples/tutorial.focus-mode/README.md
Original file line number Diff line number Diff line change
@@ -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.
36 changes: 36 additions & 0 deletions functional-samples/tutorial.open-api-reference/README.md
Original file line number Diff line number Diff line change
@@ -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.