web-highlighter

KO | EN

gitlite — search

#hacktoberfest #react #typescript #go #golang #deep-learning #linux #docker #macos #java #cli #kubernetes #awesome-list #pytorch

web-highlighter

(★ 15)

No description available.

web-highlighter Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Web Highlighter

**A lightweight, privacy-first Chrome extension to highlight text on any website.**

Select text → pick a color → done. Highlights stay on the page when you come back.  
Everything is stored on your device. Optional Google Drive sync if you want the same marks on another browser.

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://raw.githubusercontent.com/phucnguyengt/web-highlighter/main/LICENSE)
[![Manifest](https://img.shields.io/badge/Manifest-V3-green.svg)](https://raw.githubusercontent.com/phucnguyengt/web-highlighter/main/manifest.json)
[![Chrome](https://img.shields.io/badge/Chrome-Extension-4285F4.svg)](https://raw.githubusercontent.com/phucnguyengt/web-highlighter/main/)

> **Repo:** [github.com/phucnguyengt/web-highlighter](https://github.com/phucnguyengt/web-highlighter)

---

## Screenshots

UI mockups rendered from this repo’s real styles (popup, content tooltip, dashboard).

<img src="docs/feature-dashboard.png" alt="Dashboard — My Highlights" width="860" />
 
 Dashboard (options page)

---

## Why Web Highlighter?

Most highlighters are heavy, track usage, or force a cloud account. This one is the opposite:

| | |
|---|---|
| **Private by default** | Data lives in `chrome.storage.local` — no analytics, no ads |
| **Fast & simple** | No build tools, no accounts required to use |
| **Actually useful** | Colors, search, rename page groups, backup JSON, optional Drive sync |
| **Works everywhere** | Runs on essentially any `http` / `https` page |

---

## Features

- **Highlight on any page** — select text, choose a color from the floating palette  
- **6 colors** — yellow, green, blue, pink, purple, peach  
- **Two visual styles** — Soft (pastel) or Vibrant (neon), switch in Preferences  
- **Persistent marks** — restored when you revisit the same URL  
- **Popup panel** — list highlights by page, search, scroll-to on current page  
- **Rename groups** — double-click or pencil icon to give pages a short title  
- **Export / Import** — full backup or per-page export as JSON  
- **Dashboard** — options page with overview + settings  
- **Optional Google Drive sync** — merges local + remote into Drive **appDataFolder** only

---

## Install

### Option A — Load from source (recommended for now)

1. Clone or download this repository:

```bash
git clone https://github.com/phucnguyengt/web-highlighter.git
cd web-highlighter
```

2. Open Chrome and go to: `chrome://extensions`
3. Turn on **Developer mode** (top-right)
4. Click **Load unpacked**
5. Select the `web-highlighter` folder (the one that contains `manifest.json`)
6. Pin the extension from the puzzle icon toolbar

### Option B — ZIP

1. **Code → Download ZIP** on GitHub  
2. Extract the folder  
3. Same steps 2–6 as above

> Full step-by-step guide: **[TUTORIAL.md](TUTORIAL.md)**

---

## Quick start

1. Open any article or doc in Chrome  
2. **Select** a sentence with the mouse  
3. Click a **color swatch** in the small floating bar  
4. Click the extension icon → see your highlight under **Current Page**  
5. Click a highlight to **scroll** back to it on the page  
6. Click a highlight on the page → confirm to **delete**

---

## Project structure

```
web-highlighter/
├── manifest.json           # Chrome MV3 manifest
├── background/
│   └── background.js       # Google Drive sync (service worker)
├── content/
│   ├── content.js          # Selection UI + apply/restore highlights
│   └── content.css
├── popup/
│   ├── popup.html          # Extension popup
│   └── popup.js
├── options/
│   ├── options.html        # Dashboard / Preferences
│   ├── options.js
│   └── options.css
├── icons/
│   └── icon.png            # Extension toolbar icon
├── docs/                   # README screenshots (from real UI styles)
│   ├── hero-banner.png
│   ├── feature-palette.png
│   ├── feature-popup.png
│   ├── feature-dashboard.png
│   ├── icon.png
│   └── mockups/            # HTML sources used to render screenshots
├── README.md
├── TUTORIAL.md
├── SECURITY.md
└── LICENSE
```

---

## How it works (short)

1. **Content script** watches selection (`mouseup`), shows a color tooltip, wraps text in ``. 
2. Each highlight is saved with: text, color, URL, XPath offsets, and a rough Y position. 
3. On load (and SPA URL changes), highlights for the current URL are reapplied (XPath first, text search fallback). 
4. **Popup / options** read the same `chrome.storage.local` keys (`lite_highlights`, `lite_titles`, `lite_prefs`). 
5. **Drive sync** (optional) uses `chrome.identity.getAuthToken` + Drive API `appDataFolder` to merge lists by highlight `id`.

---

## Optional: Google Drive sync

Sync is **opt-in**. You only need it if you want the same highlights on another Chrome profile/machine.

### Scope used

```
https://www.googleapis.com/auth/drive.appdata
```

Only the extension’s private app data folder — **not** your whole Drive.

### Using the included OAuth client

`manifest.json` already has an OAuth `client_id` (this is **public by design** for Chrome extensions; it is not a password).

In [Google Cloud Console](https://console.cloud.google.com/):

1. Enable **Google Drive API**
2. Open your OAuth 2.0 Client → type **Chrome extension**
3. Set **Item ID** = your extension ID from `chrome://extensions`
4. In the extension → open **Dashboard / Preferences** → **Sync with Drive**

### Forks: use your own client ID

1. Create a Google Cloud project + enable Drive API  
2. Create OAuth client (Chrome extension) with your extension ID  
3. Replace in `manifest.json`:

```json
"oauth2": {
  "client_id": "YOUR_CLIENT_ID.apps.googleusercontent.com",
  "scopes": [
    "https://www.googleapis.com/auth/drive.appdata"
  ]
}
```

4. Reload the extension

**Never commit** files like `client_secret_*.apps.googleusercontent.com.json` — they are blocked by `.gitignore`.

---

## Privacy

| What | Where it goes |
|------|----------------|
| Highlight text & URLs | Local browser storage only (by default) |
| Optional sync file | Google Drive **appDataFolder** (private to the app) |
| Telemetry / ads | **None** |

---

## Permissions

| Permission | Reason |
|------------|--------|
| `storage` | Save highlights, titles, preferences |
| `identity` | Sign in for optional Drive sync |
| `contextMenus` | Reserved for context-menu actions |
| host `<all_urls>` | Inject highlighter on web pages |

---

## Development

- **Manifest V3** — no bundler required  
- Edit a file → on `chrome://extensions` click **Reload** on the card  
- Open popup DevTools: right-click popup → Inspect  
- Content script logs: page DevTools → Console

### Regenerating screenshots

Mockups live in `docs/mockups/` and use the same CSS as the extension. To re-capture:

```bash
# example (Chrome headless)
google-chrome --headless=new --window-size=1280,720 \
  --screenshot=docs/hero-banner.png file://$PWD/docs/mockups/hero.html
```

---

## Roadmap ideas

- [ ] Chrome Web Store package  
- [ ] Firefox support  
- [ ] Notes / tags on highlights  
- [ ] Keyboard shortcuts

Contributions and issues are welcome.

---

## License

---

## Links

- **Tutorial:** [TUTORIAL.md](TUTORIAL.md)  
- **Security:** [SECURITY.md](SECURITY.md)  
- **Issues:** [github.com/phucnguyengt/web-highlighter/issues](https://github.com/phucnguyengt/web-highlighter/issues)

web-highlighter

web-highlighter Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

web-highlighter

web-highlighter Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README