mirror of
https://github.com/GoogleChrome/chrome-extensions-samples.git
synced 2026-03-26 13:19:49 +07:00
26
functional-samples/sample.water_alarm_notification/README.md
Normal file
26
functional-samples/sample.water_alarm_notification/README.md
Normal file
@@ -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
functional-samples/tutorial.focus-mode/README.md
Normal file
30
functional-samples/tutorial.focus-mode/README.md
Normal file
@@ -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
functional-samples/tutorial.open-api-reference/README.md
Normal file
36
functional-samples/tutorial.open-api-reference/README.md
Normal file
@@ -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.
|
||||
Reference in New Issue
Block a user