tasknotes-browser-extension - GitLite

KO | EN

gitlite — search

#editor #react #nodejs #electron #security #github #bash #graphql #privacy #awesome-list

tasknotes-browser-extension

(★ 50)

Chrome extension for TaskNotes - create tasks directly from Gmail, Outlook, and any webpage with Obsidian integration

File Explorer

ZIP Download

- - build.yml
  - release.yml
- github.js
- gmail.js
- outlook.js
- create-icons.html
- tasknotes-icon-128.png
- tasknotes-icon-128.svg
- tasknotes-icon-16.png
- tasknotes-icon-16.svg
- tasknotes-icon-32.png
- tasknotes-icon-32.svg
- tasknotes-icon-48.png
- tasknotes-icon-48.svg
- tasknotes-simple.svg
- 2025-08-12_12-48-17.png
- 2025-08-12_13-11-31.png
- screenshot_2025-08-12_12-48-17_webstore.png
- screenshot_2025-08-12_13-11-31_webstore.png
- popup.css
- popup.html
- popup.js
- - browser-polyfill.d.ts
  - browser-polyfill.js
- api-client.js
- background.js
- manifest.chrome.json
- manifest.firefox.json
- manifest.safari.json
- task-creation-modal.js
- github.css
- gmail.css
- outlook.css
.gitignore
build-multi.sh
build.sh
create-icons.js
INSTALL.md
manifest.json
package-lock.json
package.json
QUICK_INSTALL.md
README.md
webpack.config.js

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

`npm install`

View Details ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

# Project Badges

image

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

A browser extension that integrates TaskNotes with Gmail and other web pages, allowing you to create tasks directly from your browser.

## Features

- **Gmail Integration**: Add TaskNotes button directly to Gmail interface
- **One-Click Task Creation**: Create tasks from emails with extracted metadata
- **Right-Click Context Menu**: Add tasks from any webpage, selected text, or links
- **Popup Interface**: Full-featured task creation and settings management
- **Connection Status**: Real-time API connection monitoring
- **Customizable Settings**: Configure API port, authentication, default tags

## Prerequisites

1. **TaskNotes Plugin**: Install and configure the TaskNotes plugin for Obsidian
2. **HTTP API Enabled**: Enable the HTTP API in TaskNotes Settings → HTTP API tab
3. **Desktop Only**: The TaskNotes API only works on desktop platforms

## Installation

### From Chrome Web Store (Recommended)

Install from the [Chrome Web Store](https://chromewebstore.google.com/detail/obsidian-tasknotes-web-ex/kcbplgbcleppckifepdciipecjhdmchh)

Note that installing this way will receive updates more slowly while changes are approved in the Chrome Web Store.

### From GitHub releases

1. **Download**: Clone or download the [latest release](https://github.com/callumalpass/tasknotes-browser-extension/releases/latest) zip file
2. **Unzip** the downloaded file
3. Install
   - Open Chrome and go to `chrome://extensions/`
   - Enable "Developer mode" (toggle in top right)
   - Click "Load unpacked"
   - Select the `tasknotes-browser-extension` folder
4. **Configure**: Click the extension icon and configure your API settings in TaskNotes

### Manual Installation (Developer Mode)

1. **Download**: Clone or download this repository
2. **Build**: Run `npm install && npm run build` (optional - pre-built files included)
3. **Install**:
   - Open Chrome and go to `chrome://extensions/`
   - Enable "Developer mode" (toggle in top right)
   - Click "Load unpacked"
   - Select the `tasknotes-browser-extension` folder
4. **Configure**: Click the extension icon and configure your API settings in TaskNotes

## Setup

1. **Enable TaskNotes API**:

- Open Obsidian with TaskNotes plugin installed
   - Go to Settings → TaskNotes → HTTP API tab
   - Enable "Enable HTTP API"
   - Note the port number (default: 8080)
   - Optionally set an authentication token
   - Restart Obsidian

2. **Configure Extension**:

- Click the TaskNotes extension icon in Chrome
   - Enter your API port (should match TaskNotes settings)
   - Enter authentication token if you set one
   - Set default tags and priority
   - Click "Test Connection" to verify setup

## Usage

### Gmail Integration

1. **Open Gmail** in your browser
2. **Open any email**
3. **Look for TaskNotes button** in the toolbar
4. **Click the button** to create a task with email metadata
5. **Task includes**: Subject, sender, email URL, and preview

### Context Menu

1. **Right-click** on any webpage
2. **Select "Add to TaskNotes"** from context menu
3. **Options available**:
   - Add current page
   - Add selected text
   - Add clicked link
   - Add email (on Gmail)

### Extension Popup

1. **Click extension icon** in Chrome toolbar
2. **Create custom tasks** with title, priority, notes
3. **Quick actions**: Add current page, view stats
4. **Configure settings**: API port, auth token, defaults
5. **Monitor connection** status

## API Integration

The extension communicates with your local TaskNotes API:

- **Base URL**: `http://localhost:{PORT}/api`
- **Authentication**: Optional Bearer token
- **Endpoints Used**:
  - `GET /api/health` - Connection testing
  - `POST /api/tasks` - Task creation  
  - `GET /api/stats` - Statistics display

## Troubleshooting

### Extension Not Working

1. **Check TaskNotes API**:
   - Ensure Obsidian is running
   - Verify API is enabled in TaskNotes settings
   - Test with `curl http://localhost:8080/api/health`

2. **Check Extension Settings**:
   - Verify correct port number
   - Check authentication token if using one
   - Test connection in extension popup

3. **Browser Issues**:
   - Refresh Gmail page
   - Disable other extensions temporarily
   - Check browser console for errors

### Gmail Button Not Appearing

1. **Refresh Gmail** page
2. **Check URL**: Must be `https://mail.google.com/*`
3. **Wait for load**: Gmail takes time to fully load
4. **Check console**: Look for JavaScript errors

### Connection Errors

- **"Connection refused"**: TaskNotes API not running or wrong port
- **"Unauthorized"**: Check authentication token
- **"CORS error"**: API should automatically allow cross-origin requests

### Adding New Email Providers

To add support for new email providers:

1. Create content script in `content-scripts/`
2. Add CSS styles in `styles/`
3. Update `manifest.json` with new URL patterns
4. Add provider-specific extraction logic

## Related Projects

- **[TaskNotes Plugin](https://github.com/callumalpass/tasknotes)**: Main Obsidian plugin
- **[TaskNotes Documentation](https://callumalpass.github.io/tasknotes/)**: Full documentation

## License

This project is licensed under the MIT License.