mirror of
https://github.com/Dvorinka/Trackeep.git
synced 2026-06-03 20:12:58 +00:00
feat: major feature updates and cleanup
- Add Redis architecture implementation - Update browser extension functionality - Clean up deprecated files and documentation - Enhance backend handlers for auth, messages, search - Add new configuration options and settings - Update Docker and deployment configurations
This commit is contained in:
Tomas Dvorak
@@ -1,288 +0,0 @@
|
||||
# Trackeep Saver Browser Extension
|
||||
|
||||
This folder contains a WebExtension (Manifest v3) that lets you:
|
||||
|
||||
- **Save the current page or video** as a **Trackeep bookmark**.
|
||||
- **Upload a local file** directly to Trackeep.
|
||||
- **Right‑click** any page, link, selection, image, or video and choose **“Save to Trackeep”** from the context menu.
|
||||
|
||||
It is designed to work in **Chrome**, **Microsoft Edge**, and **Firefox** (Manifest v3 where available).
|
||||
|
||||
---
|
||||
|
||||
## Folder structure
|
||||
|
||||
- `manifest.json` – WebExtension manifest (v3) with background service worker and context menu.
|
||||
- `popup.html` / `popup.js` – Popup UI and logic to save bookmarks and upload files.
|
||||
- `options.html` / `options.js` – Options page to configure API URL and auth token.
|
||||
- `background.js` – Service worker that creates and handles the context menu.
|
||||
- `icons/` – Placeholder icon files (copied from the repo favicon).
|
||||
- `README.md` – This documentation.
|
||||
|
||||
> Note: For store publishing you will likely want custom icon PNG files. See the publishing section.
|
||||
|
||||
---
|
||||
|
||||
## What the extension does
|
||||
|
||||
### Popup (toolbar icon)
|
||||
|
||||
- Reads the **active tab’s title and URL** and lets you save it as a Trackeep bookmark.
|
||||
- Lets you add an optional **description**, **tags** (comma-separated), and mark a bookmark as **public**.
|
||||
- Lets you pick a local **file** and upload it to Trackeep with an optional description.
|
||||
|
||||
### Right‑click context menu
|
||||
|
||||
- Right‑click any page, link, selection, image, or video and choose **“Save to Trackeep”**.
|
||||
- The popup opens with:
|
||||
- URL pre‑filled (link URL, image/video source, or current page URL).
|
||||
- Title pre‑filled (tab title).
|
||||
- Description pre‑filled with the selected text (if any).
|
||||
- Works even if you right‑click a link on another site; the popup will open with that link’s details.
|
||||
|
||||
### Auto‑detect Trackeep domain
|
||||
|
||||
- When you open the popup or options page on a Trackeep domain (e.g. `https://app.trackeep.example`), the extension automatically:
|
||||
- Pre‑fills the **API base URL** to `https://app.trackeep.example/api/v1`.
|
||||
- Falls back to `http://localhost:8080/api/v1` if nothing is set and you’re not on a Trackeep domain.
|
||||
- This reduces manual setup for most users.
|
||||
|
||||
---
|
||||
|
||||
## Configuration (Options page)
|
||||
|
||||
1. **Open the extension options**
|
||||
- After loading the extension (see below), right-click its icon → **Options**.
|
||||
- Or click **Open Options** in the popup.
|
||||
|
||||
2. **Set the API base URL**
|
||||
- Usually auto‑detected if you’re on a Trackeep domain.
|
||||
- Example for local dev:
|
||||
- `http://localhost:8080/api/v1`
|
||||
- Example for production:
|
||||
- `https://your-trackeep-domain.example.com/api/v1`
|
||||
|
||||
3. **Get your Trackeep auth token**
|
||||
- Log into Trackeep in your browser.
|
||||
- Open **DevTools → Application → Local Storage**.
|
||||
- Select your Trackeep origin (e.g. `http://localhost:5173` or your production domain).
|
||||
- Find the key `trackeep_token` and copy its **value**.
|
||||
- Paste this value into the **Auth token** field in the options page.
|
||||
|
||||
4. **Save settings**
|
||||
- Click **Save settings**.
|
||||
- The popup will now use these values to call the API.
|
||||
|
||||
> Keep your auth token private. Treat it like a password.
|
||||
|
||||
---
|
||||
|
||||
## Loading the extension during development
|
||||
|
||||
### Chrome (and Brave, Vivaldi, etc.)
|
||||
|
||||
1. Open `chrome://extensions/`.
|
||||
2. Enable **Developer mode** (top-right toggle).
|
||||
3. Click **Load unpacked**.
|
||||
4. Select the `browser-extension` folder from this repository.
|
||||
5. The extension should appear with the name **Trackeep Saver**.
|
||||
|
||||
### Microsoft Edge
|
||||
|
||||
1. Open `edge://extensions/`.
|
||||
2. Enable **Developer mode**.
|
||||
3. Click **Load unpacked**.
|
||||
4. Select the `browser-extension` folder.
|
||||
|
||||
### Firefox (Manifest v3)
|
||||
|
||||
Firefox support for Manifest v3 is still evolving, but this extension uses only basic APIs:
|
||||
|
||||
1. Open `about:debugging#/runtime/this-firefox`.
|
||||
2. Click **Load Temporary Add-on…**.
|
||||
3. Select the `manifest.json` file inside the `browser-extension` folder.
|
||||
4. The extension will be installed temporarily (until you restart Firefox).
|
||||
|
||||
If you hit MV3-specific issues in Firefox, you can either:
|
||||
|
||||
- Switch to a Firefox version with MV3 enabled, or
|
||||
- Port this to a MV2 manifest (same JS/HTML, different `manifest.json`).
|
||||
|
||||
---
|
||||
|
||||
## Using the extension
|
||||
|
||||
### Popup (toolbar icon)
|
||||
|
||||
1. Make sure you configured **API base URL** and **auth token** in the options.
|
||||
2. Navigate to any page or video (e.g. a YouTube video, article, docs page).
|
||||
3. Click the **Trackeep Saver** icon in the toolbar.
|
||||
4. In the popup:
|
||||
- Adjust **Title**, **URL**, **Description**, and **Tags** as needed.
|
||||
- Optionally tick **Public**.
|
||||
- Click **Save bookmark** to create a Trackeep bookmark.
|
||||
5. To upload a file:
|
||||
- Use the **Upload file to Trackeep** section.
|
||||
- Pick a file, optionally add a description, then click **Upload file**.
|
||||
|
||||
### Context menu (right‑click)
|
||||
|
||||
1. Right‑click any page, link, selection, image, or video.
|
||||
2. Choose **“Save to Trackeep”**.
|
||||
3. The popup opens with the relevant data pre‑filled.
|
||||
4. Edit as desired and click **Save bookmark**.
|
||||
|
||||
If anything fails, an error message from the Trackeep API is shown in the popup.
|
||||
|
||||
---
|
||||
|
||||
## CORS and backend configuration
|
||||
|
||||
The backend uses a CORS middleware that primarily targets browser frontends.
|
||||
Because this is a browser extension, requests are made from an extension context and usually do **not** require the same CORS headers as a regular web page.
|
||||
|
||||
If you run into network errors:
|
||||
|
||||
- Make sure your Trackeep backend is reachable at the URL you configured.
|
||||
- Check the browser extension console (in `chrome://extensions` → **Inspect views** → **Service worker / popup**).
|
||||
- If needed, relax or adjust the `CORS_ALLOWED_ORIGINS` env variable on the backend to include your frontend origin for normal web use. The extension itself generally should not require changes.
|
||||
|
||||
---
|
||||
|
||||
## Publishing to browser stores
|
||||
|
||||
The high-level process is similar across Chrome, Edge, and Firefox:
|
||||
|
||||
### 1. Prepare assets
|
||||
|
||||
- Make sure `manifest.json`, `popup.*`, `options.*`, and `background.js` are all present and working.
|
||||
- Add icon PNG files (required for store publishing):
|
||||
- The `icons/` folder contains placeholder files copied from the repo favicon.
|
||||
- For production, replace them with custom icons at sizes 16, 32, 48, and 128 pixels.
|
||||
- Update `manifest.json` with an `icons` section (already present).
|
||||
|
||||
### 2. Chrome Web Store (Chrome and most Chromium browsers)
|
||||
|
||||
1. Go to the **Chrome Web Store Developer Dashboard**.
|
||||
2. Create a new item.
|
||||
3. Zip the **contents of `browser-extension/`** (do not zip the parent folder twice).
|
||||
4. Upload the ZIP.
|
||||
5. Fill out listing details (name, description, screenshots, categories, privacy policy).
|
||||
6. Submit for review.
|
||||
|
||||
Once published, Chrome, Brave, and other Chromium-based browsers can install it from the store.
|
||||
|
||||
### 3. Microsoft Edge Add-ons
|
||||
|
||||
1. Go to the **Microsoft Edge Add-ons** developer dashboard.
|
||||
2. You can often upload the same ZIP you used for Chrome.
|
||||
3. Fill in the listing information and submit.
|
||||
|
||||
Edge is also Chromium-based, so Manifest v3 and the `chrome.*` APIs are supported.
|
||||
|
||||
### 4. Firefox Add-ons (AMO)
|
||||
|
||||
1. Go to **https://addons.mozilla.org/developers/**.
|
||||
2. Create a new add-on and upload the ZIP built from `browser-extension/`.
|
||||
3. If Firefox flags MV3-specific issues, follow its guidance – usually this involves:
|
||||
- Ensuring the manifest is valid for the current Firefox MV3 implementation.
|
||||
- Optionally adding `browser_specific_settings` in `manifest.json` with a Firefox-specific `gecko` ID.
|
||||
|
||||
Example snippet you may add for Firefox (Chrome will ignore this block):
|
||||
|
||||
```json
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
"id": "trackeep-saver@example.com",
|
||||
"strict_min_version": "120.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Use your own ID and version constraints as recommended by Mozilla.
|
||||
|
||||
---
|
||||
|
||||
## How to publish to extension stores
|
||||
|
||||
### Quick checklist before you publish
|
||||
|
||||
- [ ] Test the extension locally in Chrome/Edge/Firefox.
|
||||
- [ ] Ensure the API URL and auth token work with your Trackeep backend.
|
||||
- [ ] Replace placeholder icons with production assets (optional; `trackeepfavi_bg.png` is already used).
|
||||
- [ ] Write a short description and prepare screenshots for the store listings.
|
||||
- [ ] Decide on a publisher name and privacy policy URL (required by most stores).
|
||||
|
||||
### Step‑by‑step publishing
|
||||
|
||||
#### Chrome Web Store (and Chromium browsers)
|
||||
|
||||
1. **Prepare a ZIP**
|
||||
- Zip the **contents of `browser-extension/`** (not the folder itself).
|
||||
- Ensure `manifest.json`, `popup.*`, `options.*`, `background.js`, and `icons/` are included.
|
||||
|
||||
2. **Developer Dashboard**
|
||||
- Go to the [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard).
|
||||
- Click **Add new item**.
|
||||
- Upload the ZIP.
|
||||
|
||||
3. **Listing details**
|
||||
- **Name**: Trackeep Saver
|
||||
- **Description**: Save pages, videos, and files to your Trackeep account.
|
||||
- **Category**: Productivity
|
||||
- **Screenshots**: 1280x800 or 640x400 PNGs.
|
||||
- **Icon**: 128x128 PNG (already in `icons/icon128.png`).
|
||||
- **Privacy policy**: Required; you can host a simple page on GitHub Pages or your site.
|
||||
|
||||
4. **Permissions review**
|
||||
- The manifest requests `storage`, `tabs`, `activeTab`, `contextMenus`, and `<all_urls>` host permissions.
|
||||
- Be prepared to explain why each is needed (bookmarking, uploading files, right‑click menu).
|
||||
|
||||
5. **Submit**
|
||||
- Review and submit. Google will review for compliance and security.
|
||||
|
||||
#### Microsoft Edge Add-ons
|
||||
|
||||
1. Go to the [Microsoft Edge Add-ons Developer Dashboard](https://partner.microsoft.com/dashboard/microsoftedge).
|
||||
2. Upload the same ZIP you used for Chrome.
|
||||
3. Fill out the listing (similar to Chrome).
|
||||
4. Submit. Edge’s review is usually fast.
|
||||
|
||||
#### Firefox Add-ons (AMO)
|
||||
|
||||
1. Go to the [Firefox Add-on Developer Hub](https://addons.mozilla.org/developers/).
|
||||
2. Click **Submit a New Add‑on** and upload the ZIP.
|
||||
3. Firefox may ask for a `browser_specific_settings.gecko.id` in `manifest.json`. If you want a fixed ID, add:
|
||||
```json
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
"id": "trackeep-saver@example.com",
|
||||
"strict_min_version": "120.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
Replace `example.com` with your own domain.
|
||||
4. Provide listing details and privacy policy.
|
||||
5. Submit. Mozilla’s review focuses on privacy and security.
|
||||
|
||||
---
|
||||
|
||||
## What you can do next
|
||||
|
||||
- **Test thoroughly**:
|
||||
- Save bookmarks from different sites (articles, YouTube videos, GitHub repos).
|
||||
- Upload various file types (PDFs, images, docs).
|
||||
- Try the right‑click context menu on links, images, and selected text.
|
||||
- **Improve UX**:
|
||||
- Auto‑tag YouTube videos as `video`.
|
||||
- Add a keyboard shortcut to quick‑save the current page.
|
||||
- Sync the auth token automatically from the Trackeep web app.
|
||||
- **Prepare for stores**:
|
||||
- Write a concise privacy policy and host it publicly.
|
||||
- Take clean screenshots of the popup and options page.
|
||||
- Consider a custom icon set if you want a distinct brand look.
|
||||
- **Maintain**:
|
||||
- Keep the extension compatible with Trackeep API changes.
|
||||
- Update the manifest version when you release updates.
|
||||
|
||||
For now, the extension is fully functional for bookmarking pages/videos and uploading files to Trackeep, with a convenient right‑click menu and smart domain auto‑detection.
|
||||
@@ -1,33 +0,0 @@
|
||||
/* global chrome */
|
||||
|
||||
// Create context menu when extension is installed
|
||||
chrome.runtime.onInstalled.addListener(() => {
|
||||
chrome.contextMenus.create({
|
||||
id: 'save-to-trackeep',
|
||||
title: 'Save to Trackeep',
|
||||
contexts: ['page', 'link', 'selection', 'image', 'video']
|
||||
});
|
||||
});
|
||||
|
||||
// Handle context menu click
|
||||
chrome.contextMenus.onClicked.addListener(async (info, tab) => {
|
||||
if (info.menuItemId !== 'save-to-trackeep') return;
|
||||
|
||||
// Open popup with pre-filled data based on context
|
||||
const url = info.linkUrl || info.srcUrl || tab?.url || '';
|
||||
const title = tab?.title || '';
|
||||
const selection = info.selectionText || '';
|
||||
|
||||
// Store temporary data for popup to read
|
||||
chrome.storage.local.set({
|
||||
contextMenuData: {
|
||||
url,
|
||||
title,
|
||||
selection,
|
||||
timestamp: Date.now()
|
||||
}
|
||||
}, () => {
|
||||
// Open the popup (or focus it if already open)
|
||||
chrome.action.openPopup();
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 769 B |
Binary file not shown.
|
Before Width: | Height: | Size: 181 B |
Binary file not shown.
|
Before Width: | Height: | Size: 275 B |
Binary file not shown.
|
Before Width: | Height: | Size: 346 B |
@@ -1,29 +0,0 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "Trackeep Saver",
|
||||
"version": "0.1.0",
|
||||
"description": "Save the current page or a file to your Trackeep account as a bookmark or upload.",
|
||||
"action": {
|
||||
"default_popup": "popup.html",
|
||||
"default_title": "Save to Trackeep"
|
||||
},
|
||||
"options_page": "options.html",
|
||||
"background": {
|
||||
"service_worker": "background.js"
|
||||
},
|
||||
"permissions": [
|
||||
"storage",
|
||||
"tabs",
|
||||
"activeTab",
|
||||
"contextMenus"
|
||||
],
|
||||
"host_permissions": [
|
||||
"<all_urls>"
|
||||
],
|
||||
"icons": {
|
||||
"16": "icons/icon16.png",
|
||||
"32": "icons/icon32.png",
|
||||
"48": "icons/icon48.png",
|
||||
"128": "icons/icon128.png"
|
||||
}
|
||||
}
|
||||
@@ -1,531 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-kb-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Trackeep Saver – Options</title>
|
||||
<style>
|
||||
/* Modern Inter Font */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
/* Modern CSS Variables - Proton Pass Inspired */
|
||||
:root {
|
||||
--bg-primary: #0f0f0f;
|
||||
--bg-secondary: #1a1a1a;
|
||||
--bg-tertiary: #262626;
|
||||
--bg-hover: #2a2a2a;
|
||||
--bg-active: #333333;
|
||||
--border-primary: #2a2a2a;
|
||||
--border-secondary: #333333;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a3a3a3;
|
||||
--text-tertiary: #737373;
|
||||
--accent-primary: #3b82f6;
|
||||
--accent-hover: #2563eb;
|
||||
--success: #10b981;
|
||||
--warning: #f59e0b;
|
||||
--error: #ef4444;
|
||||
--gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
--gradient-secondary: linear-gradient(135deg, #1a1a1a 0%, #262626 100%);
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background: var(--gradient-secondary);
|
||||
padding: 32px 20px 20px;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--gradient-primary);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--gradient-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
|
||||
transform: rotate(45deg);
|
||||
animation: shimmer 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
|
||||
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
|
||||
}
|
||||
|
||||
.title-section {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.container {
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 20px;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.section {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
border: 1px solid var(--border-primary);
|
||||
margin-bottom: 24px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.section:hover {
|
||||
border-color: var(--border-secondary);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--gradient-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Form Elements */
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="url"],
|
||||
input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-primary);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 400;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="password"]:focus {
|
||||
border-color: var(--accent-primary);
|
||||
background: var(--bg-hover);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Instructions */
|
||||
.instructions {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border-primary);
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.instructions-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 8px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.instructions-list {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
padding-left: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.instructions-list li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.instructions-list li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 14px 24px;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: 'Inter', sans-serif;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
outline: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Status Messages */
|
||||
.status-message {
|
||||
padding: 16px 20px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.status-message.success {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: var(--success);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.status-message.error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--error);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.status-message.info {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: var(--accent-primary);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
/* Code styling */
|
||||
code {
|
||||
background: var(--bg-tertiary);
|
||||
padding: 3px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
/* Icon System */
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.icon-xl {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/* Icon animations */
|
||||
.icon-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.icon-pulse {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.8; transform: scale(1.05); }
|
||||
}
|
||||
|
||||
/* Enhanced button icons */
|
||||
.btn .icon {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.btn:hover .icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.btn:active .icon {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Section icon enhancements */
|
||||
.section-icon {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.section:hover .section-icon {
|
||||
transform: scale(1.05) rotate(5deg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 24px 16px 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<div class="logo-container">
|
||||
<div class="logo">T</div>
|
||||
<div class="title-section">
|
||||
<h1 class="title">Trackeep Saver</h1>
|
||||
<p class="subtitle">Configure your extension settings</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="container">
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon">
|
||||
<svg class="icon-xl" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M12 1v6m0 6v6m4.22-13.22l4.24 4.24M1.54 1.54l4.24 4.24M1 12h6m6 0h6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="section-title">API Configuration</h2>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="apiBaseUrl">Trackeep API Base URL</label>
|
||||
<input
|
||||
id="apiBaseUrl"
|
||||
type="url"
|
||||
placeholder="https://your-domain.example.com/api/v1 or http://localhost:8080/api/v1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="authToken">Authentication Token (JWT)</label>
|
||||
<input
|
||||
id="authToken"
|
||||
type="password"
|
||||
placeholder="Paste your Trackeep authentication token here"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="instructions">
|
||||
<div class="instructions-title">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14,2 14,8 20,8"/>
|
||||
<line x1="16" y1="13" x2="8" y2="13"/>
|
||||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||||
<polyline points="10,9 9,9 8,9"/>
|
||||
</svg>
|
||||
<span>How to get your authentication token:</span>
|
||||
</div>
|
||||
<ol class="instructions-list">
|
||||
<li>Log into your Trackeep account in your browser</li>
|
||||
<li>Open Developer Tools (F12) → Application → Local Storage</li>
|
||||
<li>Find key <code>trackeep_token</code> and copy its value</li>
|
||||
<li>Paste token in field above</li>
|
||||
<li><strong>Never share this token publicly</strong> - it provides full access to your account</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" id="saveBtn" style="margin-top: 24px;">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
||||
<polyline points="17,21 17,13 7,13 7,21"/>
|
||||
<polyline points="7,3 7,8 15,8"/>
|
||||
</svg>
|
||||
<span>Save Settings</span>
|
||||
</button>
|
||||
|
||||
<div id="statusMessage" class="status-message" style="display: none;"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="options.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,136 +0,0 @@
|
||||
/* global chrome */
|
||||
|
||||
const apiBaseUrlInput = document.getElementById('apiBaseUrl');
|
||||
const authTokenInput = document.getElementById('authToken');
|
||||
const saveBtn = document.getElementById('saveBtn');
|
||||
const statusMessageEl = document.getElementById('statusMessage');
|
||||
|
||||
function showMessage(message, type = 'info', duration = 5000) {
|
||||
statusMessageEl.textContent = message;
|
||||
statusMessageEl.className = `status-message ${type}`;
|
||||
statusMessageEl.style.display = 'flex';
|
||||
|
||||
if (duration > 0) {
|
||||
setTimeout(() => {
|
||||
statusMessageEl.style.display = 'none';
|
||||
}, duration);
|
||||
}
|
||||
}
|
||||
|
||||
function hideMessage() {
|
||||
statusMessageEl.style.display = 'none';
|
||||
}
|
||||
|
||||
function setButtonLoading(button, loading = true) {
|
||||
if (loading) {
|
||||
button.disabled = true;
|
||||
const originalContent = button.innerHTML;
|
||||
button.dataset.originalContent = originalContent;
|
||||
button.innerHTML = `
|
||||
<svg class="icon icon-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 12a9 9 0 1 1-6.219-8.56"/>
|
||||
</svg>
|
||||
<span>Saving...</span>
|
||||
`;
|
||||
} else {
|
||||
button.disabled = false;
|
||||
if (button.dataset.originalContent) {
|
||||
button.innerHTML = button.dataset.originalContent;
|
||||
delete button.dataset.originalContent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function detectAndPrefillApiBaseUrl(callback) {
|
||||
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
||||
const tab = tabs && tabs[0];
|
||||
if (!tab || !tab.url) {
|
||||
if (callback) callback();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const url = new URL(tab.url);
|
||||
const isTrackeepDomain = url.hostname.includes('trackeep') || url.hostname === 'localhost';
|
||||
if (isTrackeepDomain && (url.protocol === 'https:' || url.protocol === 'http:')) {
|
||||
const candidate = `${url.origin}/api/v1`;
|
||||
chrome.storage.sync.get(['trackeepApiBaseUrl'], (items) => {
|
||||
if (!items.trackeepApiBaseUrl) {
|
||||
apiBaseUrlInput.value = candidate;
|
||||
}
|
||||
if (callback) callback();
|
||||
});
|
||||
} else {
|
||||
// Fallback to localhost if nothing set
|
||||
chrome.storage.sync.get(['trackeepApiBaseUrl'], (items) => {
|
||||
if (!items.trackeepApiBaseUrl) {
|
||||
apiBaseUrlInput.value = 'http://localhost:8080/api/v1';
|
||||
}
|
||||
if (callback) callback();
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
if (callback) callback();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadSettings() {
|
||||
chrome.storage.sync.get(['trackeepApiBaseUrl', 'trackeepAuthToken'], (items) => {
|
||||
if (items.trackeepApiBaseUrl) {
|
||||
apiBaseUrlInput.value = items.trackeepApiBaseUrl;
|
||||
}
|
||||
if (items.trackeepAuthToken) {
|
||||
authTokenInput.value = items.trackeepAuthToken;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function saveSettings() {
|
||||
const apiBaseUrl = apiBaseUrlInput.value.trim();
|
||||
const authToken = authTokenInput.value.trim();
|
||||
|
||||
if (!apiBaseUrl) {
|
||||
showMessage('API base URL is required.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!authToken) {
|
||||
showMessage('Authentication token is required.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
setButtonLoading(saveBtn, true);
|
||||
hideMessage();
|
||||
|
||||
chrome.storage.sync.set(
|
||||
{
|
||||
trackeepApiBaseUrl: apiBaseUrl,
|
||||
trackeepAuthToken: authToken
|
||||
},
|
||||
() => {
|
||||
setButtonLoading(saveBtn, false);
|
||||
if (chrome.runtime.lastError) {
|
||||
showMessage(`Failed to save: ${chrome.runtime.lastError.message}`, 'error');
|
||||
} else {
|
||||
showMessage(`
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20,6 9,17 4,12"/>
|
||||
</svg>
|
||||
Settings saved successfully! You can now use the extension to save bookmarks and files.
|
||||
`, 'success');
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Initialize everything when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
detectAndPrefillApiBaseUrl(() => {
|
||||
loadSettings();
|
||||
saveBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
saveSettings();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,880 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-kb-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Trackeep Saver</title>
|
||||
<style>
|
||||
/* Modern Inter Font */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
/* Modern CSS Variables - Proton Pass Inspired */
|
||||
:root {
|
||||
--bg-primary: #0f0f0f;
|
||||
--bg-secondary: #1a1a1a;
|
||||
--bg-tertiary: #262626;
|
||||
--bg-hover: #2a2a2a;
|
||||
--bg-active: #333333;
|
||||
--border-primary: #2a2a2a;
|
||||
--border-secondary: #333333;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a3a3a3;
|
||||
--text-tertiary: #737373;
|
||||
--accent-primary: #3b82f6;
|
||||
--accent-hover: #2563eb;
|
||||
--success: #10b981;
|
||||
--warning: #f59e0b;
|
||||
--error: #ef4444;
|
||||
--gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
--gradient-secondary: linear-gradient(135deg, #1a1a1a 0%, #262626 100%);
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: 400px;
|
||||
max-width: 440px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
color-scheme: dark;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background: var(--gradient-secondary);
|
||||
padding: 20px 20px 16px;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: var(--gradient-primary);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Enhanced logo animation */
|
||||
.logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--gradient-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
box-shadow: var(--shadow-md);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.05) rotate(5deg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.logo::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
|
||||
transform: rotate(45deg);
|
||||
animation: shimmer 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
|
||||
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
|
||||
}
|
||||
|
||||
/* Enhanced options button */
|
||||
.options-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-primary);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.options-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: var(--accent-primary);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.options-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--accent-primary);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.options-btn:hover::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Status Bar */
|
||||
.status-bar {
|
||||
padding: 8px 20px;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
min-height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-tertiary);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.status-indicator.connected {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.status-indicator.error {
|
||||
background: var(--error);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 20px;
|
||||
background: var(--bg-secondary);
|
||||
padding: 4px;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-secondary);
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Tab Content */
|
||||
.tab-content {
|
||||
display: none;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Form Sections */
|
||||
.form-section {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px;
|
||||
border: 1px solid var(--border-primary);
|
||||
margin-bottom: 16px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-section:hover {
|
||||
border-color: var(--border-secondary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--gradient-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Form Elements */
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.form-group:focus-within label {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="url"],
|
||||
input[type="file"],
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-primary);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 400;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type="text"]:hover,
|
||||
input[type="url"]:hover,
|
||||
textarea:hover {
|
||||
border-color: var(--border-secondary);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="url"]:focus,
|
||||
textarea:focus {
|
||||
border-color: var(--accent-primary);
|
||||
background: var(--bg-hover);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
input[type="file"]:hover {
|
||||
border-color: var(--accent-primary);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* Input field icons */
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-tertiary);
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.form-group:focus-within .input-icon {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.checkbox-group:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-secondary);
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
accent-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 12px 20px;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-family: 'Inter', sans-serif;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
outline: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-secondary);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Enhanced status bar animations */
|
||||
.status-bar {
|
||||
padding: 8px 20px;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
min-height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.status-bar:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
/* Enhanced tab animations */
|
||||
.tab {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--accent-primary);
|
||||
transition: all 0.3s ease;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.tab:hover::after {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-secondary);
|
||||
}
|
||||
|
||||
.tab.active::after {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
/* Status Messages */
|
||||
.status-message {
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.status-message.success {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: var(--success);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.status-message.error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--error);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.status-message.info {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: var(--accent-primary);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
/* Icon System */
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.icon-xl {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/* Icon animations */
|
||||
.icon-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.icon-pulse {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.8; transform: scale(1.05); }
|
||||
}
|
||||
|
||||
/* Enhanced button icons */
|
||||
.btn .icon {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.btn:hover .icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.btn:active .icon {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Tab icon enhancements */
|
||||
.tab .icon {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab:hover .icon {
|
||||
transform: translateY(-1px) scale(1.1);
|
||||
}
|
||||
|
||||
.tab.active .icon {
|
||||
color: var(--accent-primary);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Section icon enhancements */
|
||||
.section-icon {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-section:hover .section-icon {
|
||||
transform: scale(1.05);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* Status indicator enhancements */
|
||||
.status-indicator {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.status-indicator.connected {
|
||||
box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
|
||||
}
|
||||
|
||||
.status-indicator.error {
|
||||
box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 420px) {
|
||||
body {
|
||||
min-width: 360px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<div class="logo-container">
|
||||
<div class="logo">T</div>
|
||||
<h1 class="title">Trackeep</h1>
|
||||
</div>
|
||||
<button class="options-btn" id="openOptions" title="Settings">
|
||||
<svg class="icon icon-lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M12 1v6m0 6v6m4.22-13.22l4.24 4.24M1.54 1.54l4.24 4.24M1 12h6m6 0h6"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<div class="status-indicator" id="statusIndicator"></div>
|
||||
<div class="status-text" id="statusText">Checking configuration...</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="content">
|
||||
<!-- Tabs -->
|
||||
<div class="tabs">
|
||||
<button class="tab active" data-tab="bookmark">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<span>Bookmark</span>
|
||||
</button>
|
||||
<button class="tab" data-tab="file">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14,2 14,8 20,8"/>
|
||||
</svg>
|
||||
<span>File</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Bookmark Tab -->
|
||||
<div class="tab-content active" id="bookmark-tab">
|
||||
<div class="form-section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon">
|
||||
<svg class="icon-xl" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="section-title">Save Current Page</h2>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bookmarkTitle">Title</label>
|
||||
<input id="bookmarkTitle" type="text" placeholder="Page title will be auto-filled" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bookmarkUrl">URL</label>
|
||||
<input id="bookmarkUrl" type="url" placeholder="https://example.com" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bookmarkDescription">Description</label>
|
||||
<textarea id="bookmarkDescription" placeholder="Why is this page important? Add notes..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bookmarkTags">Tags</label>
|
||||
<input id="bookmarkTags" type="text" placeholder="reading, development, tutorial" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="checkbox-group">
|
||||
<input id="bookmarkPublic" type="checkbox" />
|
||||
<label for="bookmarkPublic" class="checkbox-label">Make this bookmark public</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<div></div>
|
||||
<button class="btn btn-primary" id="saveBookmarkBtn">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
||||
<polyline points="17,21 17,13 7,13 7,21"/>
|
||||
<polyline points="7,3 7,8 15,8"/>
|
||||
</svg>
|
||||
<span>Save Bookmark</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File Tab -->
|
||||
<div class="tab-content" id="file-tab">
|
||||
<div class="form-section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon">
|
||||
<svg class="icon-xl" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="17,8 12,3 7,8"/>
|
||||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="section-title">Upload File</h2>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="fileInput">Choose File</label>
|
||||
<input id="fileInput" type="file" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="fileDescription">Description</label>
|
||||
<textarea id="fileDescription" placeholder="Describe this file..."></textarea>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary btn-block" id="uploadFileBtn">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="17,8 12,3 7,8"/>
|
||||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||||
</svg>
|
||||
<span>Upload File</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Message -->
|
||||
<div id="statusMessage" class="status-message" style="display: none;"></div>
|
||||
</main>
|
||||
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,382 +0,0 @@
|
||||
/* global chrome */
|
||||
|
||||
// DOM Elements
|
||||
const statusIndicatorEl = document.getElementById('statusIndicator');
|
||||
const statusTextEl = document.getElementById('statusText');
|
||||
const statusMessageEl = document.getElementById('statusMessage');
|
||||
const openOptionsBtn = document.getElementById('openOptions');
|
||||
|
||||
// Tab elements
|
||||
const tabBtns = document.querySelectorAll('.tab');
|
||||
const tabContents = document.querySelectorAll('.tab-content');
|
||||
|
||||
// Bookmark elements
|
||||
const bookmarkTitleInput = document.getElementById('bookmarkTitle');
|
||||
const bookmarkUrlInput = document.getElementById('bookmarkUrl');
|
||||
const bookmarkDescriptionInput = document.getElementById('bookmarkDescription');
|
||||
const bookmarkTagsInput = document.getElementById('bookmarkTags');
|
||||
const bookmarkPublicInput = document.getElementById('bookmarkPublic');
|
||||
const saveBookmarkBtn = document.getElementById('saveBookmarkBtn');
|
||||
|
||||
// File elements
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const fileDescriptionInput = document.getElementById('fileDescription');
|
||||
const uploadFileBtn = document.getElementById('uploadFileBtn');
|
||||
|
||||
let trackeepConfig = {
|
||||
apiBaseUrl: '',
|
||||
authToken: ''
|
||||
};
|
||||
|
||||
// Tab switching functionality
|
||||
function initTabs() {
|
||||
tabBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const targetTab = btn.dataset.tab;
|
||||
|
||||
// Update button states
|
||||
tabBtns.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
// Update content visibility
|
||||
tabContents.forEach(content => {
|
||||
content.classList.remove('active');
|
||||
if (content.id === `${targetTab}-tab`) {
|
||||
content.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Status management
|
||||
function updateStatus(text, type = 'info') {
|
||||
statusTextEl.textContent = text;
|
||||
statusIndicatorEl.className = 'status-indicator';
|
||||
|
||||
if (type === 'success') {
|
||||
statusIndicatorEl.classList.add('connected');
|
||||
} else if (type === 'error') {
|
||||
statusIndicatorEl.classList.add('error');
|
||||
}
|
||||
}
|
||||
|
||||
function showMessage(message, type = 'info', duration = 5000) {
|
||||
statusMessageEl.textContent = message;
|
||||
statusMessageEl.className = `status-message ${type}`;
|
||||
statusMessageEl.style.display = 'flex';
|
||||
|
||||
// Auto-hide after duration
|
||||
if (duration > 0) {
|
||||
setTimeout(() => {
|
||||
statusMessageEl.style.display = 'none';
|
||||
}, duration);
|
||||
}
|
||||
}
|
||||
|
||||
function hideMessage() {
|
||||
statusMessageEl.style.display = 'none';
|
||||
}
|
||||
|
||||
// Loading states
|
||||
function setButtonLoading(button, loading = true) {
|
||||
if (loading) {
|
||||
button.disabled = true;
|
||||
const originalContent = button.innerHTML;
|
||||
button.dataset.originalContent = originalContent;
|
||||
button.innerHTML = `
|
||||
<svg class="icon icon-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 12a9 9 0 1 1-6.219-8.56"/>
|
||||
</svg>
|
||||
<span>Processing...</span>
|
||||
`;
|
||||
} else {
|
||||
button.disabled = false;
|
||||
if (button.dataset.originalContent) {
|
||||
button.innerHTML = button.dataset.originalContent;
|
||||
delete button.dataset.originalContent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function disableForms(disabled) {
|
||||
const elements = [
|
||||
bookmarkTitleInput, bookmarkUrlInput, bookmarkDescriptionInput,
|
||||
bookmarkTagsInput, bookmarkPublicInput, saveBookmarkBtn,
|
||||
fileInput, fileDescriptionInput, uploadFileBtn
|
||||
];
|
||||
|
||||
elements.forEach(el => {
|
||||
if (el) el.disabled = disabled;
|
||||
});
|
||||
}
|
||||
|
||||
function loadConfig(callback) {
|
||||
chrome.storage.sync.get(['trackeepApiBaseUrl', 'trackeepAuthToken'], (items) => {
|
||||
const apiBaseUrl = (items.trackeepApiBaseUrl || '').trim();
|
||||
const authToken = (items.trackeepAuthToken || '').trim();
|
||||
|
||||
trackeepConfig = { apiBaseUrl, authToken };
|
||||
|
||||
if (!apiBaseUrl || !authToken) {
|
||||
updateStatus('Configuration required', 'error');
|
||||
showMessage('Configure API URL and token in Options to enable saving.', 'error');
|
||||
disableForms(true);
|
||||
} else {
|
||||
updateStatus(`Connected to ${apiBaseUrl}`, 'success');
|
||||
hideMessage();
|
||||
disableForms(false);
|
||||
}
|
||||
|
||||
if (typeof callback === 'function') {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function detectTrackeepDomain(callback) {
|
||||
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
||||
const tab = tabs && tabs[0];
|
||||
if (!tab || !tab.url) {
|
||||
if (callback) callback();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const url = new URL(tab.url);
|
||||
const isTrackeepDomain = url.hostname.includes('trackeep') || url.hostname === 'localhost';
|
||||
if (isTrackeepDomain && url.protocol === 'https:') {
|
||||
const candidate = `${url.origin}/api/v1`;
|
||||
chrome.storage.sync.get(['trackeepApiBaseUrl'], (items) => {
|
||||
if (!items.trackeepApiBaseUrl) {
|
||||
chrome.storage.sync.set({ trackeepApiBaseUrl: candidate }, () => {
|
||||
console.log('Auto-detected Trackeep API URL:', candidate);
|
||||
if (callback) callback();
|
||||
});
|
||||
} else {
|
||||
if (callback) callback();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (callback) callback();
|
||||
}
|
||||
} catch (e) {
|
||||
if (callback) callback();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initActiveTab() {
|
||||
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
||||
const tab = tabs && tabs[0];
|
||||
if (!tab) return;
|
||||
|
||||
chrome.storage.local.get(['contextMenuData'], (items) => {
|
||||
const ctx = items.contextMenuData;
|
||||
if (ctx && ctx.timestamp && Date.now() - ctx.timestamp < 5000) {
|
||||
if (ctx.url && !bookmarkUrlInput.value) {
|
||||
bookmarkUrlInput.value = ctx.url;
|
||||
}
|
||||
if (ctx.title && !bookmarkTitleInput.value) {
|
||||
bookmarkTitleInput.value = ctx.title;
|
||||
}
|
||||
if (ctx.selection && !bookmarkDescriptionInput.value) {
|
||||
bookmarkDescriptionInput.value = ctx.selection;
|
||||
}
|
||||
chrome.storage.local.remove(['contextMenuData']);
|
||||
} else {
|
||||
if (tab.title && !bookmarkTitleInput.value) {
|
||||
bookmarkTitleInput.value = tab.title;
|
||||
}
|
||||
if (tab.url && !bookmarkUrlInput.value) {
|
||||
bookmarkUrlInput.value = tab.url;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function saveBookmark(event) {
|
||||
event.preventDefault();
|
||||
hideMessage();
|
||||
|
||||
const { apiBaseUrl, authToken } = trackeepConfig;
|
||||
if (!apiBaseUrl || !authToken) {
|
||||
showMessage('Missing API URL or auth token. Open options first.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const url = bookmarkUrlInput.value.trim();
|
||||
if (!url) {
|
||||
showMessage('URL is required.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const title = bookmarkTitleInput.value.trim() || url;
|
||||
const description = bookmarkDescriptionInput.value.trim();
|
||||
const tagsRaw = bookmarkTagsInput.value.trim();
|
||||
const isPublic = !!bookmarkPublicInput.checked;
|
||||
|
||||
const tags = tagsRaw
|
||||
? tagsRaw.split(',').map((t) => t.trim()).filter(Boolean)
|
||||
: [];
|
||||
|
||||
const payload = {
|
||||
title,
|
||||
url,
|
||||
description,
|
||||
tags,
|
||||
is_public: isPublic
|
||||
};
|
||||
|
||||
setButtonLoading(saveBookmarkBtn, true);
|
||||
showMessage('Saving bookmark...', 'info', 0);
|
||||
|
||||
try {
|
||||
const base = apiBaseUrl.replace(/\/$/, '');
|
||||
const response = await fetch(`${base}/bookmarks`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
let errorMessage = `Failed to save bookmark (status ${response.status})`;
|
||||
try {
|
||||
const data = await response.json();
|
||||
if (data && data.error) {
|
||||
errorMessage = data.error;
|
||||
}
|
||||
} catch (_) {
|
||||
// ignore JSON parse errors
|
||||
}
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
showMessage(`
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20,6 9,17 4,12"/>
|
||||
</svg>
|
||||
Bookmark saved successfully!
|
||||
`, 'success');
|
||||
|
||||
// Clear form after successful save
|
||||
setTimeout(() => {
|
||||
bookmarkDescriptionInput.value = '';
|
||||
bookmarkTagsInput.value = '';
|
||||
bookmarkPublicInput.checked = false;
|
||||
}, 2000);
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error saving bookmark', err);
|
||||
showMessage(err && err.message ? err.message : 'Failed to save bookmark.', 'error');
|
||||
} finally {
|
||||
setButtonLoading(saveBookmarkBtn, false);
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadFile(event) {
|
||||
event.preventDefault();
|
||||
hideMessage();
|
||||
|
||||
const { apiBaseUrl, authToken } = trackeepConfig;
|
||||
if (!apiBaseUrl || !authToken) {
|
||||
showMessage('Missing API URL or auth token. Open options first.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const file = fileInput.files && fileInput.files[0];
|
||||
if (!file) {
|
||||
showMessage('Please choose a file to upload.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const description = fileDescriptionInput.value.trim();
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file, file.name);
|
||||
if (description) {
|
||||
formData.append('description', description);
|
||||
}
|
||||
|
||||
setButtonLoading(uploadFileBtn, true);
|
||||
showMessage('Uploading file...', 'info', 0);
|
||||
|
||||
try {
|
||||
const base = apiBaseUrl.replace(/\/$/, '');
|
||||
const response = await fetch(`${base}/files/upload`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
},
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
let errorMessage = `Failed to upload file (status ${response.status})`;
|
||||
try {
|
||||
const data = await response.json();
|
||||
if (data && data.error) {
|
||||
errorMessage = data.error;
|
||||
}
|
||||
} catch (_) {
|
||||
// ignore JSON parse errors
|
||||
}
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
showMessage(`
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20,6 9,17 4,12"/>
|
||||
</svg>
|
||||
File uploaded successfully!
|
||||
`, 'success');
|
||||
|
||||
// Clear form after successful upload
|
||||
setTimeout(() => {
|
||||
fileInput.value = '';
|
||||
fileDescriptionInput.value = '';
|
||||
}, 2000);
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error uploading file', err);
|
||||
showMessage(err && err.message ? err.message : 'Failed to upload file.', 'error');
|
||||
} finally {
|
||||
setButtonLoading(uploadFileBtn, false);
|
||||
}
|
||||
}
|
||||
|
||||
function openOptions() {
|
||||
if (chrome.runtime.openOptionsPage) {
|
||||
chrome.runtime.openOptionsPage();
|
||||
} else {
|
||||
window.open(chrome.runtime.getURL('options.html'));
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize everything when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialize tabs
|
||||
initTabs();
|
||||
|
||||
// Event listeners
|
||||
openOptionsBtn.addEventListener('click', openOptions);
|
||||
saveBookmarkBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
saveBookmark(e);
|
||||
});
|
||||
uploadFileBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
uploadFile(e);
|
||||
});
|
||||
|
||||
// Initialize configuration and active tab
|
||||
detectTrackeepDomain(() => {
|
||||
loadConfig(() => {
|
||||
initActiveTab();
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user