Skip to content

Commit 95f5602

Browse files
DavidNiessenDavidNiessen
authored
Merge pull request #3 from AlecFritsch/feature/popup-ui-and-settings
feat: add popup UI, settings system, and multiple copy formats
2 parents c57fc45 + 28eec52 commit 95f5602

18 files changed

Lines changed: 3642 additions & 28 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
## [0.0.3] - Unreleased
6+
7+
### Added
8+
- 🎨 **Popup UI** with modern, clean design
9+
- 📝 **Multiple copy formats**: Plain, Markdown, HTML
10+
- ⚙️ **Settings system** with Chrome storage sync
11+
- 💾 **User preferences**: Default format, auto-close popup
12+
- 🖱️ **Quick access** via extension icon
13+
- Toast notification system for user feedback
14+
- Comprehensive error handling for all operations
15+
- Validation for restricted URLs (chrome://, edge://, etc.)
16+
- TypeScript type safety improvements
17+
18+
### Changed
19+
- Refactored copy logic into separate module
20+
- Improved error messages and user feedback
21+
- Better handling of edge cases (no active tab, missing URL, etc.)
22+
- Updated notification and storage permissions in manifest
23+
- Added action (popup) configuration to manifest
24+
25+
### Fixed
26+
- Type safety issues with `any` types
27+
- Missing error handling in async operations
28+
- Proper TypeScript types for Chrome API
29+
30+
## [0.0.2] - Previous Release
31+
32+
### Added
33+
- Basic URL copying functionality
34+
- Keyboard shortcuts for all platforms
35+
- Chrome extension manifest v3 support

‎CONTRIBUTING.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# Contributing to cpyurl
2+
3+
## Development Setup
4+
5+
### Prerequisites
6+
- Node.js v22 or higher
7+
- npm or pnpm package manager
8+
9+
### Installation
10+
11+
1. Clone the repository
12+
```bash
13+
git clone https://github.com/DavidNiessen/cpyurl.git
14+
cd cpyurl
15+
```
16+
17+
2. Install dependencies
18+
```bash
19+
npm install
20+
# or
21+
pnpm install
22+
```
23+
24+
3. Build the extension
25+
```bash
26+
npm run build
27+
# or
28+
pnpm build
29+
```
30+
31+
4. Load the extension in Chrome
32+
- Navigate to `chrome://extensions/`
33+
- Enable "Developer mode"
34+
- Click "Load unpacked"
35+
- Select the `dist` folder
36+
37+
## Project Structure
38+
39+
```
40+
cpyurl/
41+
├── src/
42+
│ ├── background/ # Background service worker
43+
│ ├── notification/ # Notification system
44+
│ └── index.ts # Core URL copying logic
45+
├── static/
46+
│ ├── assets/ # Icons and images
47+
│ └── manifest.json # Chrome extension manifest
48+
└── dist/ # Build output (generated)
49+
```
50+
51+
## Code Quality
52+
53+
- TypeScript strict mode is enabled
54+
- All async operations have proper error handling
55+
- Chrome API types are used throughout
56+
57+
## Building for Release
58+
59+
```bash
60+
npm run build:bundle
61+
# or
62+
pnpm build:bundle
63+
```
64+
65+
This creates a `cpyurl.zip` file in the `dist` folder ready for distribution.

‎FEATURES.md‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
# cpyurl Features Overview
2+
3+
## 🎯 What does cpyurl do?
4+
5+
cpyurl is a Chrome extension that makes copying URLs super easy and flexible. Instead of manually selecting and copying URLs from the address bar, you can:
6+
7+
- Press a keyboard shortcut to instantly copy
8+
- Choose different formats (Plain, Markdown, HTML)
9+
- Get visual feedback when copying
10+
- Customize your preferences
11+
12+
## 🚀 Main Features
13+
14+
### 1. Keyboard Shortcut Copy
15+
16+
**How it works:**
17+
- Press `Alt+C` (Windows/Linux) or `MacCtrl+C` (macOS)
18+
- Current tab URL is instantly copied to clipboard
19+
- Uses your default format setting
20+
21+
**Use case:**
22+
You're browsing documentation and want to quickly share the link in Slack → Press Alt+C → Paste in Slack. Done!
23+
24+
---
25+
26+
### 2. Popup Interface
27+
28+
**How it works:**
29+
- Click the extension icon in Chrome toolbar
30+
- See the current URL displayed
31+
- Choose which format to copy
32+
33+
**What you see:**
34+
```
35+
┌─────────────────────────────────┐
36+
│ cpyurl │
37+
│ Copy URL to clipboard │
38+
├─────────────────────────────────┤
39+
│ Current URL: │
40+
│ https://github.com/... │
41+
│ │
42+
│ [📋 Copy Plain] │
43+
│ [📝 Copy Markdown] │
44+
│ [🔗 Copy HTML] │
45+
│ │
46+
│ Settings │
47+
│ Default Format: [Plain ▼] │
48+
│ ☐ Auto-close popup after copy │
49+
└─────────────────────────────────┘
50+
```
51+
52+
---
53+
54+
### 3. Multiple Copy Formats
55+
56+
#### Plain Format
57+
```
58+
https://github.com/DavidNiessen/cpyurl
59+
```
60+
**Best for:** Sharing raw URLs, pasting in address bar
61+
62+
#### Markdown Format
63+
```
64+
[cpyurl](https://github.com/DavidNiessen/cpyurl)
65+
```
66+
**Best for:** GitHub README, Notion, Obsidian, Markdown documents
67+
68+
#### HTML Format
69+
```html
70+
<a href="https://github.com/DavidNiessen/cpyurl">cpyurl</a>
71+
```
72+
**Best for:** HTML emails, web development, blog posts
73+
74+
---
75+
76+
### 4. Visual Feedback
77+
78+
#### Toast Notifications
79+
- Appear in bottom-right corner
80+
- Show success/error messages
81+
- Auto-dismiss after 3 seconds
82+
83+
**Examples:**
84+
- ✅ "URL copied to clipboard!"
85+
- ⚠️ "Cannot copy URL from restricted pages..."
86+
- ❌ "Failed to copy URL. Please try again."
87+
88+
#### Icon Badge
89+
- Shows ✓ (green) on success
90+
- Shows ✗ (red) on error
91+
- Disappears after 2 seconds
92+
93+
---
94+
95+
### 5. Settings & Customization
96+
97+
#### Default Format
98+
Choose which format is used when you press the keyboard shortcut:
99+
- Plain (default)
100+
- Markdown
101+
- HTML
102+
103+
#### Auto-Close Popup
104+
When enabled, popup automatically closes after copying (useful for quick workflows)
105+
106+
#### Settings Sync
107+
Settings are saved to Chrome sync storage, so they work across all your devices!
108+
109+
---
110+
111+
### 6. Error Handling
112+
113+
#### Restricted Pages
114+
Chrome doesn't allow extensions to access certain pages:
115+
- `chrome://` pages (extensions, settings, etc.)
116+
- `edge://` pages
117+
- `about:` pages
118+
- `view-source:` pages
119+
120+
**What happens:**
121+
- Warning notification appears
122+
- Red X badge shows on icon
123+
- No crash or silent failure
124+
125+
#### No Active Tab
126+
If somehow there's no active tab:
127+
- Error notification: "No active tab found"
128+
- Graceful handling, no crash
129+
130+
---
131+
132+
## 💡 Real-World Use Cases
133+
134+
### For Developers
135+
```
136+
Scenario: Sharing code documentation
137+
1. Find useful docs page
138+
2. Press Alt+C
139+
3. Paste in team chat
140+
Format: Markdown for GitHub/Slack
141+
```
142+
143+
### For Content Creators
144+
```
145+
Scenario: Adding references to blog post
146+
1. Research articles
147+
2. Click extension → Copy HTML
148+
3. Paste directly into HTML editor
149+
Format: HTML with proper anchor tags
150+
```
151+
152+
### For Students/Researchers
153+
```
154+
Scenario: Building bibliography
155+
1. Find research paper
156+
2. Copy as Markdown
157+
3. Add to Notion/Obsidian notes
158+
Format: Markdown for note-taking apps
159+
```
160+
161+
### For Quick Sharing
162+
```
163+
Scenario: Sharing funny article with friend
164+
1. Press Alt+C while reading
165+
2. Paste in WhatsApp/Email
166+
Format: Plain URL
167+
```
168+
169+
---
170+
171+
## 🎨 Design Philosophy
172+
173+
- **Fast:** Keyboard shortcut for instant copying
174+
- **Flexible:** Multiple formats for different use cases
175+
- **Friendly:** Clear feedback, no confusion
176+
- **Safe:** Handles errors gracefully
177+
- **Simple:** No complex configuration needed
178+
179+
---
180+
181+
## 🔒 Privacy & Permissions
182+
183+
### Required Permissions:
184+
- **tabs**: To get current tab URL
185+
- **activeTab**: To access active tab info
186+
- **scripting**: To execute clipboard copy
187+
- **clipboardWrite**: To write to clipboard
188+
- **notifications**: To show toast messages
189+
- **storage**: To save your settings
190+
191+
### What we DON'T do:
192+
- ❌ No tracking
193+
- ❌ No analytics
194+
- ❌ No data collection
195+
- ❌ No external servers
196+
- ❌ No URL history stored
197+
198+
Everything happens locally in your browser!

‎README.md‎

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,54 @@
22

33
### Simple Chrome extension that allows you to copy the current tab url into your clipboard
44

5-
## -- THIS EXTENSION IS WORK IN PROGRESS --
6-
TODO
7-
- implement toast notification
5+
## Features
6+
- 📋 Copy current tab URL with keyboard shortcut
7+
- 🎨 Multiple copy formats: Plain, Markdown, HTML
8+
- ⚙️ Customizable settings (default format, auto-close popup)
9+
- 🔔 Toast notifications for success/error feedback
10+
- 🛡️ Error handling for restricted pages (chrome://, edge://, etc.)
11+
- 🖱️ Popup UI for quick access and format selection
12+
- 💾 Settings sync across devices
13+
- 🌐 Works across all platforms (Windows, macOS, Linux, ChromeOS)
14+
15+
## Usage
16+
17+
### Quick Start
18+
1. **Install the extension** (see Installation below)
19+
2. **Pin the extension** to your toolbar (click puzzle icon → pin cpyurl)
20+
3. **Try it out:**
21+
- Press `Alt+C` to copy current URL
22+
- Or click the extension icon for more options
23+
24+
### Keyboard Shortcut
25+
Press the keyboard shortcut (default: Alt+C on Windows/Linux, MacCtrl+C on macOS) to copy the current tab URL using your default format.
26+
27+
### Popup Interface
28+
Click the extension icon to open the popup where you can:
29+
- View the current tab URL
30+
- Copy in different formats (Plain, Markdown, HTML)
31+
- Configure settings (default format, auto-close behavior)
32+
33+
### Copy Formats
34+
- **Plain**: `https://example.com`
35+
- **Markdown**: `[Page Title](https://example.com)`
36+
- **HTML**: `<a href="https://example.com">Page Title</a>`
37+
38+
## Testing
39+
40+
See [TESTING.md](TESTING.md) for detailed testing instructions.
41+
42+
**Quick Test:**
43+
1. Build: `npm run build`
44+
2. Load in Chrome: `chrome://extensions/` → Load unpacked → select `dist` folder
45+
3. Test: Press `Alt+C` on any webpage
46+
47+
## Documentation
48+
49+
- [FEATURES.md](FEATURES.md) - Detailed feature overview and use cases
50+
- [TESTING.md](TESTING.md) - Complete testing guide
51+
- [CONTRIBUTING.md](CONTRIBUTING.md) - Development setup and guidelines
52+
- [CHANGELOG.md](CHANGELOG.md) - Version history
853

954
#### Installation
1055
1. Navigate to the [latest release](https://github.com/DavidNiessen/cpyurl/releases)

0 commit comments

Comments
 (0)