+
+
+
+
+ `;
+
+ composeModal.querySelector('.compose-close')?.addEventListener('click', () => {
+ composeModal?.remove();
+ composeModal = null;
+ });
+
+ composeModal.querySelector('.btn-cancel')?.addEventListener('click', () => {
+ composeModal?.remove();
+ composeModal = null;
+ });
+
+ const textarea = composeModal.querySelector(
+ '.inline-compose-textarea'
+ ) as HTMLTextAreaElement;
+ const submitBtn = composeModal.querySelector('.btn-submit') as HTMLButtonElement;
+
+ submitBtn.addEventListener('click', async () => {
+ const text = textarea?.value.trim();
+ if (!text) return;
+
+ submitBtn.disabled = true;
+ submitBtn.textContent = 'Posting...';
+
+ try {
+ await sendMessage('createAnnotation', {
+ url: window.location.href,
+ title: document.title,
+ text,
+ selector: { type: 'TextQuoteSelector', exact: quoteText },
+ });
+
+ showToast('Annotation created!', 'success');
+ composeModal?.remove();
+ composeModal = null;
+
+ setTimeout(() => fetchAnnotations(), 500);
+ } catch (error) {
+ console.error('Failed to create annotation:', error);
+ showToast('Failed to create annotation', 'error');
+ submitBtn.disabled = false;
+ submitBtn.textContent = 'Post';
+ }
+ });
+
+ container.appendChild(composeModal);
+ setTimeout(() => textarea?.focus(), 100);
+ }
+ browser.runtime.onMessage.addListener((message: any) => {
+ if (message.type === 'SHOW_INLINE_ANNOTATE' && message.data?.selector?.exact) {
+ showComposeModal(message.data.selector.exact);
+ }
+ if (message.type === 'REFRESH_ANNOTATIONS') {
+ fetchAnnotations();
+ }
+ if (message.type === 'SCROLL_TO_TEXT' && message.text) {
+ scrollToText(message.text);
+ }
+ if (message.type === 'GET_SELECTION') {
+ const selection = window.getSelection();
+ const text = selection?.toString().trim() || '';
+ return Promise.resolve({ text });
+ }
+ });
+
+ function scrollToText(text: string) {
+ if (!text || text.length < 10) return;
+
+ const searchText = text.slice(0, 150);
+ const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null);
+
+ let node: Text | null;
+ while ((node = walker.nextNode() as Text | null)) {
+ const content = node.textContent || '';
+ const index = content.indexOf(searchText.slice(0, 50));
+ if (index !== -1) {
+ const range = document.createRange();
+ range.setStart(node, index);
+ range.setEnd(node, Math.min(index + searchText.length, content.length));
+
+ const rect = range.getBoundingClientRect();
+ const scrollY = window.scrollY + rect.top - window.innerHeight / 3;
+
+ window.scrollTo({ top: scrollY, behavior: 'smooth' });
+
+ const highlight = document.createElement('mark');
+ highlight.style.cssText =
+ 'background: #6366f1; color: white; padding: 2px 0; border-radius: 2px; transition: background 0.5s;';
+ range.surroundContents(highlight);
+
+ setTimeout(() => {
+ highlight.style.background = 'transparent';
+ highlight.style.color = 'inherit';
+ setTimeout(() => {
+ const parent = highlight.parentNode;
+ if (parent) {
+ parent.replaceChild(
+ document.createTextNode(highlight.textContent || ''),
+ highlight
+ );
+ parent.normalize();
+ }
+ }, 500);
+ }, 1500);
+
+ return;
+ }
+ }
+ }
+
+ function showToast(message: string, type: 'success' | 'error' = 'success') {
+ if (!shadowRoot) return;
+
+ const container = shadowRoot.getElementById('margin-overlay-container');
+ if (!container) return;
+
+ container.querySelectorAll('.margin-toast').forEach((el) => el.remove());
+
+ const toast = document.createElement('div');
+ toast.className = `margin-toast ${type === 'success' ? 'toast-success' : ''}`;
+ toast.innerHTML = `
+
${type === 'success' ? Icons.check : Icons.close}
+
${message}
+ `;
+
+ container.appendChild(toast);
+
+ setTimeout(() => {
+ toast.classList.add('toast-out');
+ setTimeout(() => toast.remove(), 200);
+ }, 2500);
+ }
+
+ async function fetchAnnotations(retryCount = 0) {
+ if (!overlayEnabled) {
+ sendMessage('updateBadge', { count: 0 });
+ return;
+ }
+
+ try {
+ const _citedUrls = Array.from(document.querySelectorAll('[cite]'))
+ .map((el) => el.getAttribute('cite'))
+ .filter((url): url is string => !!url && url.startsWith('http'));
+
+ const annotations = await sendMessage('getAnnotations', { url: window.location.href });
+
+ sendMessage('updateBadge', { count: annotations?.length || 0 });
+
+ if (annotations) {
+ sendMessage('cacheAnnotations', { url: window.location.href, annotations });
+ }
+
+ if (annotations && annotations.length > 0) {
+ renderBadges(annotations);
+ } else if (retryCount < 3) {
+ setTimeout(() => fetchAnnotations(retryCount + 1), 1000 * (retryCount + 1));
+ }
+ } catch (error) {
+ console.error('Failed to fetch annotations:', error);
+ if (retryCount < 3) {
+ setTimeout(() => fetchAnnotations(retryCount + 1), 1000 * (retryCount + 1));
+ }
+ }
+ }
+
+ function renderBadges(annotations: Annotation[]) {
+ if (!shadowRoot) return;
+
+ activeItems = [];
+ const rangesByColor: Record
= {};
+
+ if (!cachedMatcher) {
+ cachedMatcher = new DOMTextMatcher();
+ }
+ const matcher = cachedMatcher;
+
+ annotations.forEach((item) => {
+ const selector = item.target?.selector || item.selector;
+ if (!selector?.exact) return;
+
+ const range = matcher.findRange(selector.exact);
+ if (range) {
+ activeItems.push({ range, item });
+
+ const isHighlight = (item as any).type === 'Highlight';
+ const defaultColor = isHighlight ? '#f59e0b' : '#6366f1';
+ const color = item.color || defaultColor;
+ if (!rangesByColor[color]) rangesByColor[color] = [];
+ rangesByColor[color].push(range);
+ }
+ });
+
+ if (typeof CSS !== 'undefined' && CSS.highlights) {
+ CSS.highlights.clear();
+ for (const [color, ranges] of Object.entries(rangesByColor)) {
+ const highlight = new Highlight(...ranges);
+ const safeColor = color.replace(/[^a-zA-Z0-9]/g, '');
+ const name = `margin-hl-${safeColor}`;
+ CSS.highlights.set(name, highlight);
+ injectHighlightStyle(name, color);
+ }
+ }
+ }
+
+ function injectHighlightStyle(name: string, color: string) {
+ if (injectedStyles.has(name)) return;
+ const style = document.createElement('style');
+ style.textContent = `
+ ::highlight(${name}) {
+ text-decoration: underline;
+ text-decoration-color: ${color};
+ text-decoration-thickness: 2px;
+ text-underline-offset: 2px;
+ cursor: pointer;
+ }
+ `;
+ document.head.appendChild(style);
+ injectedStyles.add(name);
+ }
+
+ function handleMouseMove(e: MouseEvent) {
+ if (!overlayEnabled || !overlayHost) return;
+
+ const x = e.clientX;
+ const y = e.clientY;
+
+ const foundItems: Array<{ range: Range; item: Annotation; rect: DOMRect }> = [];
+ let firstRange: Range | null = null;
+
+ for (const { range, item } of activeItems) {
+ const rects = range.getClientRects();
+ for (const rect of rects) {
+ if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+ let container: Node | null = range.commonAncestorContainer;
+ if (container.nodeType === Node.TEXT_NODE) {
+ container = container.parentNode;
+ }
+
+ if (
+ container &&
+ ((e.target as Node).contains(container) || container.contains(e.target as Node))
+ ) {
+ if (!firstRange) firstRange = range;
+ if (!foundItems.some((f) => f.item === item)) {
+ foundItems.push({ range, item, rect });
+ }
+ }
+ break;
+ }
+ }
+ }
+
+ if (foundItems.length > 0 && shadowRoot) {
+ document.body.style.cursor = 'pointer';
+
+ if (!hoverIndicator) {
+ const container = shadowRoot.getElementById('margin-overlay-container');
+ if (container) {
+ hoverIndicator = document.createElement('div');
+ hoverIndicator.className = 'margin-hover-indicator';
+ container.appendChild(hoverIndicator);
+ }
+ }
+
+ if (hoverIndicator && firstRange) {
+ const authorsMap = new Map();
+ foundItems.forEach(({ item }) => {
+ const author = item.author || item.creator || {};
+ const id = author.did || author.handle || 'unknown';
+ if (!authorsMap.has(id)) {
+ authorsMap.set(id, author);
+ }
+ });
+
+ const uniqueAuthors = Array.from(authorsMap.values());
+ const maxShow = 3;
+ const displayAuthors = uniqueAuthors.slice(0, maxShow);
+ const overflow = uniqueAuthors.length - maxShow;
+
+ let html = displayAuthors
+ .map((author, i) => {
+ const avatar = author.avatar;
+ const handle = author.handle || 'U';
+ const marginLeft = i === 0 ? '0' : '-8px';
+
+ if (avatar) {
+ return `
`;
+ } else {
+ return `${handle[0]?.toUpperCase() || 'U'}
`;
+ }
+ })
+ .join('');
+
+ if (overflow > 0) {
+ html += `+${overflow}
`;
+ }
+
+ hoverIndicator.innerHTML = html;
+
+ const firstRect = firstRange.getClientRects()[0];
+ const totalWidth =
+ Math.min(uniqueAuthors.length, maxShow + (overflow > 0 ? 1 : 0)) * 18 + 8;
+ const leftPos = firstRect.left - totalWidth;
+ const topPos = firstRect.top + firstRect.height / 2 - 12;
+
+ hoverIndicator.style.left = `${leftPos}px`;
+ hoverIndicator.style.top = `${topPos}px`;
+ hoverIndicator.classList.add('visible');
+ }
+ } else {
+ document.body.style.cursor = '';
+ if (hoverIndicator) {
+ hoverIndicator.classList.remove('visible');
+ }
+ }
+ }
+
+ function handleDocumentClick(e: MouseEvent) {
+ if (!overlayEnabled || !overlayHost) return;
+
+ const x = e.clientX;
+ const y = e.clientY;
+
+ if (popoverEl) {
+ const rect = popoverEl.getBoundingClientRect();
+ if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+ return;
+ }
+ }
+
+ if (composeModal) {
+ const rect = composeModal.getBoundingClientRect();
+ if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+ return;
+ }
+ composeModal.remove();
+ composeModal = null;
+ }
+
+ const clickedItems: Annotation[] = [];
+ for (const { range, item } of activeItems) {
+ const rects = range.getClientRects();
+ for (const rect of rects) {
+ if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+ let container: Node | null = range.commonAncestorContainer;
+ if (container.nodeType === Node.TEXT_NODE) {
+ container = container.parentNode;
+ }
+
+ if (
+ container &&
+ ((e.target as Node).contains(container) || container.contains(e.target as Node))
+ ) {
+ if (!clickedItems.includes(item)) {
+ clickedItems.push(item);
+ }
+ }
+ break;
+ }
+ }
+ }
+
+ if (clickedItems.length > 0) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ if (popoverEl) {
+ const currentIds = popoverEl.dataset.itemIds;
+ const newIds = clickedItems
+ .map((i) => i.uri || i.id)
+ .sort()
+ .join(',');
+ if (currentIds === newIds) {
+ popoverEl.remove();
+ popoverEl = null;
+ return;
+ }
+ }
+
+ const firstItem = clickedItems[0];
+ const match = activeItems.find((x) => x.item === firstItem);
+ if (match) {
+ const rects = match.range.getClientRects();
+ if (rects.length > 0) {
+ const rect = rects[0];
+ const top = rect.top + window.scrollY;
+ const left = rect.left + window.scrollX;
+ showPopover(clickedItems, top, left);
+ }
+ }
+ } else {
+ if (popoverEl) {
+ popoverEl.remove();
+ popoverEl = null;
+ }
+ }
+ }
+
+ function showPopover(items: Annotation[], top: number, left: number) {
+ if (!shadowRoot) return;
+ if (popoverEl) popoverEl.remove();
+
+ const container = shadowRoot.getElementById('margin-overlay-container');
+ if (!container) return;
+
+ popoverEl = document.createElement('div');
+ popoverEl.className = 'margin-popover';
+
+ const ids = items
+ .map((i) => i.uri || i.id)
+ .sort()
+ .join(',');
+ popoverEl.dataset.itemIds = ids;
+
+ const popWidth = 320;
+ const screenWidth = window.innerWidth;
+ let finalLeft = left;
+ if (left + popWidth > screenWidth) finalLeft = screenWidth - popWidth - 20;
+ if (finalLeft < 10) finalLeft = 10;
+
+ popoverEl.style.top = `${top + 24}px`;
+ popoverEl.style.left = `${finalLeft}px`;
+
+ const count = items.length;
+ const title = count === 1 ? 'Annotation' : `Annotations`;
+
+ const contentHtml = items
+ .map((item) => {
+ const author = item.author || item.creator || {};
+ const handle = author.handle || 'User';
+ const avatar = author.avatar;
+ const text = item.body?.value || item.text || '';
+ const id = item.id || item.uri;
+ const isHighlight = (item as any).type === 'Highlight';
+ const createdAt = item.createdAt ? formatRelativeTime(item.createdAt) : '';
+
+ let avatarHtml = ``;
+ if (avatar) {
+ avatarHtml = ``;
+ }
+
+ let bodyHtml = '';
+ if (isHighlight && !text) {
+ bodyHtml = `${Icons.highlightMarker} Highlighted
`;
+ } else {
+ bodyHtml = ``;
+ }
+
+ return `
+
+ `;
+ })
+ .join('');
+
+ popoverEl.innerHTML = `
+
+
+ ${contentHtml}
+
+ `;
+
+ popoverEl.querySelector('.popover-close')?.addEventListener('click', (e) => {
+ e.stopPropagation();
+ popoverEl?.remove();
+ popoverEl = null;
+ });
+
+ popoverEl.querySelectorAll('.btn-reply').forEach((btn) => {
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ const id = (btn as HTMLElement).getAttribute('data-id');
+ if (id) {
+ window.open(`${APP_URL}/annotation/${encodeURIComponent(id)}`, '_blank');
+ }
+ });
+ });
+
+ popoverEl.querySelectorAll('.btn-share').forEach((btn) => {
+ btn.addEventListener('click', async (e) => {
+ e.stopPropagation();
+ const id = (btn as HTMLElement).getAttribute('data-id');
+ const text = (btn as HTMLElement).getAttribute('data-text');
+ const url = `${APP_URL}/annotation/${encodeURIComponent(id || '')}`;
+ const shareText = text ? `${text}\n${url}` : url;
+
+ try {
+ await navigator.clipboard.writeText(shareText);
+ const originalHtml = btn.innerHTML;
+ btn.innerHTML = `${Icons.check} Copied!`;
+ setTimeout(() => (btn.innerHTML = originalHtml), 2000);
+ } catch (err) {
+ console.error('Failed to copy', err);
+ }
+ });
+ });
+
+ container.appendChild(popoverEl);
+ }
+
+ function formatRelativeTime(dateStr: string): string {
+ const date = new Date(dateStr);
+ const now = new Date();
+ const diffMs = now.getTime() - date.getTime();
+ const diffMins = Math.floor(diffMs / 60000);
+ const diffHours = Math.floor(diffMs / 3600000);
+ const diffDays = Math.floor(diffMs / 86400000);
+
+ if (diffMins < 1) return 'just now';
+ if (diffMins < 60) return `${diffMins}m`;
+ if (diffHours < 24) return `${diffHours}h`;
+ if (diffDays < 7) return `${diffDays}d`;
+ return date.toLocaleDateString();
+ }
+
+ function escapeHtml(text: string): string {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
+ let lastUrl = window.location.href;
+ function checkUrlChange() {
+ if (window.location.href !== lastUrl) {
+ lastUrl = window.location.href;
+ onUrlChange();
+ }
+ }
+
+ function onUrlChange() {
+ if (typeof CSS !== 'undefined' && CSS.highlights) {
+ CSS.highlights.clear();
+ }
+ activeItems = [];
+ sendMessage('updateBadge', { count: 0 });
+ if (overlayEnabled) {
+ fetchAnnotations();
+ }
+ }
+
+ window.addEventListener('popstate', onUrlChange);
+
+ const originalPushState = history.pushState;
+ const originalReplaceState = history.replaceState;
+
+ history.pushState = function (...args) {
+ originalPushState.apply(this, args);
+ checkUrlChange();
+ };
+
+ history.replaceState = function (...args) {
+ originalReplaceState.apply(this, args);
+ checkUrlChange();
+ };
+
+ setInterval(checkUrlChange, 1000);
+
+ window.addEventListener('load', () => {
+ setTimeout(() => fetchAnnotations(), 500);
+ });
+ },
+});
diff --git a/extension/src/entrypoints/popup/index.html b/extension/src/entrypoints/popup/index.html
new file mode 100644
index 0000000..fae92b6
--- /dev/null
+++ b/extension/src/entrypoints/popup/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Margin
+
+
+
+
+
+
diff --git a/extension/src/entrypoints/popup/main.tsx b/extension/src/entrypoints/popup/main.tsx
new file mode 100644
index 0000000..1cd0d70
--- /dev/null
+++ b/extension/src/entrypoints/popup/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from '@/components/popup/App';
+import '@/assets/styles.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+);
diff --git a/extension/src/entrypoints/sidepanel/index.html b/extension/src/entrypoints/sidepanel/index.html
new file mode 100644
index 0000000..cfd9609
--- /dev/null
+++ b/extension/src/entrypoints/sidepanel/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+ Margin
+
+
+
+
+
+
+
diff --git a/extension/src/entrypoints/sidepanel/main.tsx b/extension/src/entrypoints/sidepanel/main.tsx
new file mode 100644
index 0000000..b2f0cb5
--- /dev/null
+++ b/extension/src/entrypoints/sidepanel/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from '@/components/sidepanel/App';
+import '@/assets/styles.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+);
diff --git a/extension/src/utils/api.ts b/extension/src/utils/api.ts
new file mode 100644
index 0000000..c790ee3
--- /dev/null
+++ b/extension/src/utils/api.ts
@@ -0,0 +1,304 @@
+import type { MarginSession, TextSelector } from './types';
+import { apiUrlItem } from './storage';
+
+async function getApiUrl(): Promise {
+ return await apiUrlItem.getValue();
+}
+
+async function getSessionCookie(): Promise {
+ try {
+ const apiUrl = await getApiUrl();
+ const cookie = await browser.cookies.get({
+ url: apiUrl,
+ name: 'margin_session',
+ });
+ return cookie?.value || null;
+ } catch (error) {
+ console.error('Get cookie error:', error);
+ return null;
+ }
+}
+
+export async function checkSession(): Promise {
+ try {
+ const apiUrl = await getApiUrl();
+ const cookie = await getSessionCookie();
+
+ if (!cookie) {
+ return { authenticated: false };
+ }
+
+ const res = await fetch(`${apiUrl}/auth/session`, {
+ headers: {
+ 'X-Session-Token': cookie,
+ },
+ });
+
+ if (!res.ok) {
+ return { authenticated: false };
+ }
+
+ const sessionData = await res.json();
+
+ if (!sessionData.did || !sessionData.handle) {
+ return { authenticated: false };
+ }
+
+ return {
+ authenticated: true,
+ did: sessionData.did,
+ handle: sessionData.handle,
+ accessJwt: sessionData.accessJwt,
+ refreshJwt: sessionData.refreshJwt,
+ };
+ } catch (error) {
+ console.error('Session check error:', error);
+ return { authenticated: false };
+ }
+}
+
+async function apiRequest(path: string, options: RequestInit = {}): Promise {
+ const apiUrl = await getApiUrl();
+ const cookie = await getSessionCookie();
+
+ const headers: Record = {
+ 'Content-Type': 'application/json',
+ ...(options.headers as Record),
+ };
+
+ if (cookie) {
+ headers['X-Session-Token'] = cookie;
+ }
+
+ const apiPath = path.startsWith('/api') ? path : `/api${path}`;
+
+ const response = await fetch(`${apiUrl}${apiPath}`, {
+ ...options,
+ headers,
+ credentials: 'include',
+ });
+
+ return response;
+}
+
+export async function getAnnotations(url: string, citedUrls: string[] = []) {
+ try {
+ const apiUrl = await getApiUrl();
+ const uniqueUrls = [...new Set([url, ...citedUrls])];
+
+ const fetchPromises = uniqueUrls.map(async (u) => {
+ try {
+ const res = await fetch(`${apiUrl}/api/targets?source=${encodeURIComponent(u)}`);
+ if (!res.ok) return { annotations: [], highlights: [], bookmarks: [] };
+ return await res.json();
+ } catch {
+ return { annotations: [], highlights: [], bookmarks: [] };
+ }
+ });
+
+ const results = await Promise.all(fetchPromises);
+ const allItems: any[] = [];
+ const seenIds = new Set();
+
+ results.forEach((data) => {
+ const items = [
+ ...(data.annotations || []),
+ ...(data.highlights || []),
+ ...(data.bookmarks || []),
+ ];
+ items.forEach((item: any) => {
+ const id = item.uri || item.id;
+ if (id && !seenIds.has(id)) {
+ seenIds.add(id);
+ allItems.push(item);
+ }
+ });
+ });
+
+ return allItems;
+ } catch (error) {
+ console.error('Get annotations error:', error);
+ return [];
+ }
+}
+
+export async function createAnnotation(data: {
+ url: string;
+ text: string;
+ title?: string;
+ selector?: TextSelector;
+}) {
+ try {
+ const res = await apiRequest('/annotations', {
+ method: 'POST',
+ body: JSON.stringify({
+ target: {
+ source: data.url,
+ selector: data.selector,
+ },
+ body: { type: 'TextualBody', value: data.text, format: 'text/plain' },
+ motivation: 'commenting',
+ title: data.title,
+ }),
+ });
+
+ if (!res.ok) {
+ const error = await res.text();
+ return { success: false, error };
+ }
+
+ return { success: true, data: await res.json() };
+ } catch (error) {
+ return { success: false, error: String(error) };
+ }
+}
+
+export async function createBookmark(data: { url: string; title?: string }) {
+ try {
+ const res = await apiRequest('/bookmarks', {
+ method: 'POST',
+ body: JSON.stringify({ url: data.url, title: data.title }),
+ });
+
+ if (!res.ok) {
+ const error = await res.text();
+ return { success: false, error };
+ }
+
+ return { success: true, data: await res.json() };
+ } catch (error) {
+ return { success: false, error: String(error) };
+ }
+}
+
+export async function createHighlight(data: {
+ url: string;
+ title?: string;
+ selector: TextSelector;
+ color?: string;
+}) {
+ try {
+ const res = await apiRequest('/highlights', {
+ method: 'POST',
+ body: JSON.stringify({
+ url: data.url,
+ title: data.title,
+ selector: data.selector,
+ color: data.color,
+ }),
+ });
+
+ if (!res.ok) {
+ const error = await res.text();
+ return { success: false, error };
+ }
+
+ return { success: true, data: await res.json() };
+ } catch (error) {
+ return { success: false, error: String(error) };
+ }
+}
+
+export async function getUserBookmarks(did: string) {
+ try {
+ const res = await apiRequest(`/users/${did}/bookmarks`);
+ if (!res.ok) return [];
+ const data = await res.json();
+ return data.items || data || [];
+ } catch (error) {
+ console.error('Get bookmarks error:', error);
+ return [];
+ }
+}
+
+export async function getUserHighlights(did: string) {
+ try {
+ const res = await apiRequest(`/users/${did}/highlights`);
+ if (!res.ok) return [];
+ const data = await res.json();
+ return data.items || data || [];
+ } catch (error) {
+ console.error('Get highlights error:', error);
+ return [];
+ }
+}
+
+export async function getUserCollections(did: string) {
+ try {
+ const res = await apiRequest(`/collections?author=${encodeURIComponent(did)}`);
+ if (!res.ok) return [];
+ const data = await res.json();
+ return data.items || data || [];
+ } catch (error) {
+ console.error('Get collections error:', error);
+ return [];
+ }
+}
+
+export async function addToCollection(collectionUri: string, annotationUri: string) {
+ try {
+ const res = await apiRequest(`/collections/${encodeURIComponent(collectionUri)}/items`, {
+ method: 'POST',
+ body: JSON.stringify({ annotationUri, position: 0 }),
+ });
+
+ if (!res.ok) {
+ const error = await res.text();
+ return { success: false, error };
+ }
+
+ return { success: true };
+ } catch (error) {
+ return { success: false, error: String(error) };
+ }
+}
+
+export async function getItemCollections(annotationUri: string): Promise {
+ try {
+ const res = await apiRequest(
+ `/collections/containing?uri=${encodeURIComponent(annotationUri)}`
+ );
+ if (!res.ok) return [];
+ const data = await res.json();
+ return Array.isArray(data) ? data : [];
+ } catch (error) {
+ console.error('Get item collections error:', error);
+ return [];
+ }
+}
+
+export async function getReplies(uri: string) {
+ try {
+ const res = await apiRequest(`/annotations/${encodeURIComponent(uri)}/replies`);
+ if (!res.ok) return [];
+ const data = await res.json();
+ return data.items || data || [];
+ } catch (error) {
+ console.error('Get replies error:', error);
+ return [];
+ }
+}
+
+export async function createReply(data: {
+ parentUri: string;
+ parentCid: string;
+ rootUri: string;
+ rootCid: string;
+ text: string;
+}) {
+ try {
+ const res = await apiRequest('/replies', {
+ method: 'POST',
+ body: JSON.stringify(data),
+ });
+
+ if (!res.ok) {
+ const error = await res.text();
+ return { success: false, error };
+ }
+
+ return { success: true };
+ } catch (error) {
+ return { success: false, error: String(error) };
+ }
+}
diff --git a/extension/src/utils/messaging.ts b/extension/src/utils/messaging.ts
new file mode 100644
index 0000000..7f3b41e
--- /dev/null
+++ b/extension/src/utils/messaging.ts
@@ -0,0 +1,61 @@
+import { defineExtensionMessaging } from '@webext-core/messaging';
+import type {
+ MarginSession,
+ Annotation,
+ Bookmark,
+ Highlight,
+ Collection,
+ TextSelector,
+} from './types';
+
+interface ProtocolMap {
+ checkSession(): MarginSession;
+
+ getAnnotations(data: { url: string }): Annotation[];
+ createAnnotation(data: { url: string; text: string; title?: string; selector?: TextSelector }): {
+ success: boolean;
+ data?: Annotation;
+ error?: string;
+ };
+
+ createBookmark(data: { url: string; title?: string }): {
+ success: boolean;
+ data?: Bookmark;
+ error?: string;
+ };
+ getUserBookmarks(data: { did: string }): Bookmark[];
+
+ createHighlight(data: { url: string; title?: string; selector: TextSelector; color?: string }): {
+ success: boolean;
+ data?: Highlight;
+ error?: string;
+ };
+ getUserHighlights(data: { did: string }): Highlight[];
+
+ getUserCollections(data: { did: string }): Collection[];
+ addToCollection(data: { collectionUri: string; annotationUri: string }): {
+ success: boolean;
+ error?: string;
+ };
+ getItemCollections(data: { annotationUri: string }): string[];
+
+ getReplies(data: { uri: string }): Annotation[];
+ createReply(data: {
+ parentUri: string;
+ parentCid: string;
+ rootUri: string;
+ rootCid: string;
+ text: string;
+ }): { success: boolean; error?: string };
+
+ getOverlayEnabled(): boolean;
+
+ openAppUrl(data: { path: string }): void;
+
+ updateBadge(data: { count: number; tabId?: number }): void;
+
+ cacheAnnotations(data: { url: string; annotations: Annotation[] }): void;
+ getCachedAnnotations(data: { url: string }): Annotation[] | null;
+}
+
+export const { sendMessage, onMessage } = defineExtensionMessaging();
diff --git a/extension/src/utils/overlay-styles.ts b/extension/src/utils/overlay-styles.ts
new file mode 100644
index 0000000..ec6fbe6
--- /dev/null
+++ b/extension/src/utils/overlay-styles.ts
@@ -0,0 +1,576 @@
+export const overlayStyles = /* css */ `
+:host {
+ all: initial;
+ --bg-primary: #0a0a0d;
+ --bg-secondary: #121216;
+ --bg-tertiary: #1a1a1f;
+ --bg-card: #0f0f13;
+ --bg-elevated: #18181d;
+ --bg-hover: #1e1e24;
+
+ --text-primary: #eaeaee;
+ --text-secondary: #b7b6c5;
+ --text-tertiary: #6e6d7a;
+ --border: rgba(183, 182, 197, 0.12);
+
+ --accent: #957a86;
+ --accent-hover: #a98d98;
+ --accent-subtle: rgba(149, 122, 134, 0.15);
+
+ --highlight-yellow: #fbbf24;
+ --highlight-green: #34d399;
+ --highlight-blue: #60a5fa;
+ --highlight-pink: #f472b6;
+ --highlight-purple: #a78bfa;
+}
+
+:host(.light) {
+ --bg-primary: #f8f8fa;
+ --bg-secondary: #ffffff;
+ --bg-tertiary: #f0f0f4;
+ --bg-card: #ffffff;
+ --bg-elevated: #ffffff;
+ --bg-hover: #eeeef2;
+
+ --text-primary: #18171c;
+ --text-secondary: #5c495a;
+ --text-tertiary: #8a8494;
+ --border: rgba(92, 73, 90, 0.12);
+
+ --accent: #7a5f6d;
+ --accent-hover: #664e5b;
+ --accent-subtle: rgba(149, 122, 134, 0.12);
+}
+
+.margin-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+
+.margin-selection-toolbar {
+ position: fixed;
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ padding: 4px;
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 10px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255,255,255,0.05);
+ z-index: 2147483647;
+ pointer-events: auto;
+ font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
+ opacity: 0;
+ transform: translateY(8px) scale(0.95);
+ animation: toolbar-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+@keyframes toolbar-in {
+ to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.toolbar-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ padding: 8px 12px;
+ background: transparent;
+ border: none;
+ border-radius: 6px;
+ color: var(--text-primary);
+ font-size: 12px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.15s ease;
+ white-space: nowrap;
+}
+
+.toolbar-btn:hover {
+ background: var(--bg-hover);
+}
+
+.toolbar-btn:active {
+ transform: scale(0.96);
+}
+
+.toolbar-btn svg {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+}
+
+.toolbar-btn.highlight-btn {
+ color: var(--highlight-yellow);
+}
+
+.toolbar-btn.highlight-btn:hover {
+ background: rgba(251, 191, 36, 0.15);
+}
+
+.toolbar-divider {
+ width: 1px;
+ height: 20px;
+ background: var(--border);
+ margin: 0 2px;
+}
+
+.color-picker {
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ margin-top: 6px;
+ display: flex;
+ gap: 6px;
+ padding: 8px;
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 10px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+ animation: toolbar-in 0.15s ease forwards;
+}
+
+.color-dot {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ border: 2px solid transparent;
+ cursor: pointer;
+ transition: all 0.15s ease;
+}
+
+.color-dot:hover {
+ transform: scale(1.15);
+ border-color: var(--text-primary);
+}
+
+.margin-popover {
+ position: absolute;
+ width: 320px;
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 14px;
+ padding: 0;
+ box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,255,0.05);
+ display: flex;
+ flex-direction: column;
+ pointer-events: auto;
+ z-index: 2147483647;
+ font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
+ color: var(--text-primary);
+ opacity: 0;
+ transform: translateY(-8px) scale(0.96);
+ animation: popover-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+ max-height: 450px;
+ overflow: hidden;
+}
+
+@keyframes popover-in {
+ to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.popover-header {
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--border);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: var(--bg-primary);
+ border-radius: 14px 14px 0 0;
+}
+
+.popover-title {
+ font-weight: 600;
+ font-size: 13px;
+ color: var(--text-primary);
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.popover-count {
+ font-size: 11px;
+ color: var(--text-tertiary);
+ background: var(--bg-tertiary);
+ padding: 2px 8px;
+ border-radius: 10px;
+}
+
+.popover-close {
+ background: none;
+ border: none;
+ color: var(--text-tertiary);
+ cursor: pointer;
+ padding: 4px;
+ border-radius: 6px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.15s;
+}
+
+.popover-close:hover {
+ background: var(--bg-hover);
+ color: var(--text-primary);
+}
+
+.popover-close svg {
+ width: 16px;
+ height: 16px;
+}
+
+.popover-scroll-area {
+ overflow-y: auto;
+ max-height: 350px;
+ overscroll-behavior: contain;
+ scrollbar-width: thin;
+ scrollbar-color: var(--bg-tertiary) transparent;
+}
+
+.popover-scroll-area::-webkit-scrollbar {
+ width: 6px;
+}
+
+.popover-scroll-area::-webkit-scrollbar-track {
+ background: transparent;
+ margin: 4px 0;
+}
+
+.popover-scroll-area::-webkit-scrollbar-thumb {
+ background: var(--bg-tertiary);
+ border-radius: 3px;
+}
+
+.popover-scroll-area::-webkit-scrollbar-thumb:hover {
+ background: var(--text-tertiary);
+}
+
+.comment-item {
+ padding: 14px 16px;
+ border-bottom: 1px solid var(--border);
+ transition: background 0.15s;
+}
+
+.comment-item:hover {
+ background: var(--bg-hover);
+}
+
+.comment-item:last-child {
+ border-bottom: none;
+}
+
+.comment-header {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 8px;
+}
+
+.comment-avatar {
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 11px;
+ font-weight: 600;
+ color: white;
+ flex-shrink: 0;
+}
+
+.comment-meta {
+ flex: 1;
+ min-width: 0;
+}
+
+.comment-handle {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.comment-time {
+ font-size: 11px;
+ color: var(--text-tertiary);
+}
+
+.comment-text {
+ font-size: 13px;
+ line-height: 1.55;
+ color: var(--text-primary);
+}
+
+.highlight-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 11px;
+ color: var(--text-tertiary);
+ background: var(--bg-tertiary);
+ padding: 4px 10px;
+ border-radius: 12px;
+ font-weight: 500;
+}
+
+.highlight-badge svg {
+ width: 12px;
+ height: 12px;
+}
+
+.comment-actions {
+ display: flex;
+ gap: 4px;
+ margin-top: 10px;
+ padding-top: 10px;
+ border-top: 1px solid var(--border);
+}
+
+.comment-action-btn {
+ background: none;
+ border: none;
+ padding: 6px 10px;
+ color: var(--text-tertiary);
+ font-size: 12px;
+ font-weight: 500;
+ cursor: pointer;
+ border-radius: 6px;
+ transition: all 0.15s;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+}
+
+.comment-action-btn svg {
+ width: 14px;
+ height: 14px;
+}
+
+.comment-action-btn:hover {
+ background: var(--bg-tertiary);
+ color: var(--text-primary);
+}
+
+.inline-compose-modal {
+ position: fixed;
+ width: 380px;
+ max-width: calc(100vw - 32px);
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 0;
+ box-sizing: border-box;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.05);
+ z-index: 2147483647;
+ pointer-events: auto;
+ font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
+ color: var(--text-primary);
+ animation: modal-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+ overflow: hidden;
+}
+
+@keyframes modal-in {
+ from { opacity: 0; transform: scale(0.95) translateY(10px); }
+ to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.inline-compose-modal * {
+ box-sizing: border-box;
+}
+
+.compose-header {
+ padding: 14px 16px;
+ border-bottom: 1px solid var(--border);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: var(--bg-primary);
+}
+
+.compose-title {
+ font-weight: 600;
+ font-size: 14px;
+ color: var(--text-primary);
+}
+
+.compose-close {
+ background: none;
+ border: none;
+ color: var(--text-tertiary);
+ cursor: pointer;
+ padding: 4px;
+ border-radius: 6px;
+ display: flex;
+ transition: all 0.15s;
+}
+
+.compose-close:hover {
+ background: var(--bg-hover);
+ color: var(--text-primary);
+}
+
+.compose-body {
+ padding: 16px;
+}
+
+.inline-compose-quote {
+ padding: 12px 14px;
+ background: var(--accent-subtle);
+ border-left: 3px solid var(--accent);
+ border-radius: 0 8px 8px 0;
+ font-size: 13px;
+ color: var(--text-secondary);
+ font-style: italic;
+ margin-bottom: 14px;
+ max-height: 80px;
+ overflow: hidden;
+ word-break: break-word;
+ line-height: 1.5;
+}
+
+.inline-compose-textarea {
+ width: 100%;
+ min-height: 100px;
+ padding: 12px 14px;
+ background: var(--bg-elevated);
+ border: 1px solid var(--border);
+ border-radius: 10px;
+ color: var(--text-primary);
+ font-family: inherit;
+ font-size: 14px;
+ line-height: 1.5;
+ resize: none;
+ box-sizing: border-box;
+ transition: border-color 0.15s;
+}
+
+.inline-compose-textarea::placeholder {
+ color: var(--text-tertiary);
+}
+
+.inline-compose-textarea:focus {
+ outline: none;
+ border-color: var(--accent);
+}
+
+.compose-footer {
+ padding: 12px 16px;
+ border-top: 1px solid var(--border);
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+ background: var(--bg-primary);
+}
+
+.btn-cancel {
+ padding: 9px 18px;
+ background: transparent;
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ color: var(--text-secondary);
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.15s;
+}
+
+.btn-cancel:hover {
+ background: var(--bg-hover);
+ color: var(--text-primary);
+ border-color: var(--border);
+}
+
+.btn-submit {
+ padding: 9px 20px;
+ background: var(--accent);
+ border: none;
+ border-radius: 8px;
+ color: white;
+ font-size: 13px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.15s;
+}
+
+.btn-submit:hover {
+ background: var(--accent-hover);
+ transform: translateY(-1px);
+}
+
+.btn-submit:active {
+ transform: translateY(0);
+}
+
+.btn-submit:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ transform: none;
+}
+
+.margin-hover-indicator {
+ position: fixed;
+ display: flex;
+ align-items: center;
+ pointer-events: none;
+ z-index: 2147483647;
+ opacity: 0;
+ transition: opacity 0.2s ease, transform 0.2s ease;
+ transform: scale(0.8) translateX(4px);
+}
+
+.margin-hover-indicator.visible {
+ opacity: 1;
+ transform: scale(1) translateX(0);
+}
+
+.margin-toast {
+ position: fixed;
+ bottom: 24px;
+ left: 50%;
+ transform: translateX(-50%) translateY(20px);
+ padding: 12px 20px;
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 10px;
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+ font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--text-primary);
+ z-index: 2147483647;
+ pointer-events: auto;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ opacity: 0;
+ animation: toast-in 0.3s ease forwards;
+}
+
+@keyframes toast-in {
+ to { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+.margin-toast.toast-out {
+ animation: toast-out 0.2s ease forwards;
+}
+
+@keyframes toast-out {
+ to { opacity: 0; transform: translateX(-50%) translateY(10px); }
+}
+
+.toast-icon {
+ width: 18px;
+ height: 18px;
+ color: var(--accent);
+}
+
+.toast-success .toast-icon {
+ color: #34d399;
+}
+`;
diff --git a/extension/src/utils/storage.ts b/extension/src/utils/storage.ts
new file mode 100644
index 0000000..e1c2dc9
--- /dev/null
+++ b/extension/src/utils/storage.ts
@@ -0,0 +1,11 @@
+export const apiUrlItem = storage.defineItem('local:apiUrl', {
+ fallback: 'https://margin.at',
+});
+
+export const overlayEnabledItem = storage.defineItem('local:overlayEnabled', {
+ fallback: true,
+});
+
+export const themeItem = storage.defineItem<'light' | 'dark' | 'system'>('local:theme', {
+ fallback: 'system',
+});
diff --git a/extension/src/utils/text-matcher.ts b/extension/src/utils/text-matcher.ts
new file mode 100644
index 0000000..f72b7a2
--- /dev/null
+++ b/extension/src/utils/text-matcher.ts
@@ -0,0 +1,183 @@
+interface TextNodeIndex {
+ start: number;
+ node: Text;
+ length: number;
+}
+
+interface TextPoint {
+ node: Text;
+ offset: number;
+}
+
+export class DOMTextMatcher {
+ private textNodes: Text[] = [];
+ private corpus = '';
+ private indices: TextNodeIndex[] = [];
+ private built = false;
+
+ constructor() {}
+
+ private ensureBuilt(): void {
+ if (!this.built) {
+ this.buildMap();
+ this.built = true;
+ }
+ }
+
+ private buildMap(): void {
+ const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
+ acceptNode: (node: Text) => {
+ if (!node.parentNode) return NodeFilter.FILTER_REJECT;
+ const parent = node.parentNode as Element;
+ const tag = parent.tagName;
+ if (['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT'].includes(tag)) {
+ return NodeFilter.FILTER_REJECT;
+ }
+ if (!node.textContent?.trim()) return NodeFilter.FILTER_SKIP;
+ const htmlParent = parent as HTMLElement;
+ if (
+ htmlParent.style &&
+ (htmlParent.style.display === 'none' || htmlParent.style.visibility === 'hidden')
+ ) {
+ return NodeFilter.FILTER_REJECT;
+ }
+ return NodeFilter.FILTER_ACCEPT;
+ },
+ });
+
+ let currentNode: Text | null;
+ let index = 0;
+ const parts: string[] = [];
+
+ while ((currentNode = walker.nextNode() as Text | null)) {
+ const text = currentNode.textContent || '';
+ this.textNodes.push(currentNode);
+ parts.push(text);
+ this.indices.push({
+ start: index,
+ node: currentNode,
+ length: text.length,
+ });
+ index += text.length;
+ }
+
+ this.corpus = parts.join('');
+ }
+
+ findRange(searchText: string): Range | null {
+ if (!searchText) return null;
+
+ this.ensureBuilt();
+
+ let matchIndex = this.corpus.indexOf(searchText);
+
+ if (matchIndex === -1) {
+ const normalizedSearch = searchText.replace(/\s+/g, ' ').trim();
+ matchIndex = this.corpus.indexOf(normalizedSearch);
+
+ if (matchIndex === -1) {
+ const fuzzyMatch = this.fuzzyFindInCorpus(searchText);
+ if (fuzzyMatch) {
+ const start = this.mapIndexToPoint(fuzzyMatch.start);
+ const end = this.mapIndexToPoint(fuzzyMatch.end);
+ if (start && end) {
+ const range = document.createRange();
+ range.setStart(start.node, start.offset);
+ range.setEnd(end.node, end.offset);
+ return range;
+ }
+ }
+ return null;
+ }
+ }
+
+ const start = this.mapIndexToPoint(matchIndex);
+ const end = this.mapIndexToPoint(matchIndex + searchText.length);
+
+ if (start && end) {
+ const range = document.createRange();
+ range.setStart(start.node, start.offset);
+ range.setEnd(end.node, end.offset);
+ return range;
+ }
+ return null;
+ }
+
+ private fuzzyFindInCorpus(searchText: string): { start: number; end: number } | null {
+ const searchWords = searchText
+ .trim()
+ .split(/\s+/)
+ .filter((w) => w.length > 0);
+ if (searchWords.length === 0) return null;
+
+ const corpusLower = this.corpus.toLowerCase();
+ const firstWord = searchWords[0].toLowerCase();
+ let searchStart = 0;
+
+ while (searchStart < corpusLower.length) {
+ const wordStart = corpusLower.indexOf(firstWord, searchStart);
+ if (wordStart === -1) break;
+
+ let corpusPos = wordStart;
+ let matched = true;
+ let lastMatchEnd = wordStart;
+
+ for (const word of searchWords) {
+ const wordLower = word.toLowerCase();
+ while (corpusPos < corpusLower.length && /\s/.test(this.corpus[corpusPos])) {
+ corpusPos++;
+ }
+ const corpusSlice = corpusLower.slice(corpusPos, corpusPos + wordLower.length);
+ if (corpusSlice !== wordLower) {
+ matched = false;
+ break;
+ }
+ corpusPos += wordLower.length;
+ lastMatchEnd = corpusPos;
+ }
+
+ if (matched) {
+ return { start: wordStart, end: lastMatchEnd };
+ }
+ searchStart = wordStart + 1;
+ }
+
+ return null;
+ }
+
+ private mapIndexToPoint(corpusIndex: number): TextPoint | null {
+ for (const info of this.indices) {
+ if (corpusIndex >= info.start && corpusIndex < info.start + info.length) {
+ return { node: info.node, offset: corpusIndex - info.start };
+ }
+ }
+ if (this.indices.length > 0) {
+ const last = this.indices[this.indices.length - 1];
+ if (corpusIndex === last.start + last.length) {
+ return { node: last.node, offset: last.length };
+ }
+ }
+ return null;
+ }
+}
+
+export function findCanonicalUrl(range: Range): string | null {
+ let node: Node | null = range.commonAncestorContainer;
+ if (node.nodeType === Node.TEXT_NODE) {
+ node = node.parentNode;
+ }
+
+ while (node && node !== document.body) {
+ const element = node as Element;
+ if (
+ (element.tagName === 'BLOCKQUOTE' || element.tagName === 'Q') &&
+ element.hasAttribute('cite')
+ ) {
+ if (element.contains(range.commonAncestorContainer)) {
+ return element.getAttribute('cite');
+ }
+ }
+ node = node.parentNode;
+ }
+ return null;
+}
diff --git a/extension/src/utils/types.ts b/extension/src/utils/types.ts
new file mode 100644
index 0000000..3bcc3dc
--- /dev/null
+++ b/extension/src/utils/types.ts
@@ -0,0 +1,76 @@
+export interface MarginSession {
+ authenticated: boolean;
+ did?: string;
+ handle?: string;
+ accessJwt?: string;
+ refreshJwt?: string;
+}
+
+export interface TextSelector {
+ type?: string;
+ exact: string;
+ prefix?: string;
+ suffix?: string;
+}
+
+export interface Annotation {
+ uri?: string;
+ id?: string;
+ cid?: string;
+ type?: 'Annotation' | 'Bookmark' | 'Highlight';
+ body?: { value: string };
+ text?: string;
+ target?: {
+ source?: string;
+ selector?: TextSelector;
+ };
+ selector?: TextSelector;
+ color?: string;
+ created?: string;
+ createdAt?: string;
+ creator?: Author;
+ author?: Author;
+}
+
+export interface Author {
+ did?: string;
+ handle?: string;
+ displayName?: string;
+ avatar?: string;
+}
+
+export interface Bookmark {
+ uri?: string;
+ id?: string;
+ source?: string;
+ url?: string;
+ title?: string;
+ description?: string;
+ image?: string;
+ createdAt?: string;
+}
+
+export interface Highlight {
+ uri?: string;
+ id?: string;
+ target?: {
+ source?: string;
+ selector?: TextSelector;
+ };
+ color?: string;
+ title?: string;
+ createdAt?: string;
+}
+
+export interface Collection {
+ uri?: string;
+ id?: string;
+ name: string;
+ description?: string;
+ icon?: string;
+ createdAt?: string;
+ itemCount?: number;
+}
+
+export const DEFAULT_API_URL = 'https://margin.at';
+export const APP_URL = 'https://margin.at';
diff --git a/extension/tailwind.config.js b/extension/tailwind.config.js
new file mode 100644
index 0000000..e6ee84a
--- /dev/null
+++ b/extension/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
+ theme: {
+ extend: {
+ fontFamily: {
+ sans: ['IBM Plex Sans', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+ },
+ },
+ },
+ plugins: [],
+};
diff --git a/extension/tsconfig.json b/extension/tsconfig.json
new file mode 100644
index 0000000..6007f8c
--- /dev/null
+++ b/extension/tsconfig.json
@@ -0,0 +1,16 @@
+{
+ "extends": "./.wxt/tsconfig.json",
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "jsxImportSource": "react",
+ "moduleResolution": "bundler",
+ "strict": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["src/**/*", ".wxt/wxt.d.ts"]
+}
diff --git a/extension/wxt.config.ts b/extension/wxt.config.ts
new file mode 100644
index 0000000..202eb07
--- /dev/null
+++ b/extension/wxt.config.ts
@@ -0,0 +1,87 @@
+import { defineConfig } from 'wxt';
+import { cp } from 'fs/promises';
+import { existsSync } from 'fs';
+import { resolve } from 'path';
+
+export default defineConfig({
+ srcDir: 'src',
+ modules: ['@wxt-dev/module-react'],
+ manifestVersion: 3,
+ hooks: {
+ 'build:done': async (wxt) => {
+ const publicDir = resolve(__dirname, 'public');
+ const outDir = wxt.config.outDir;
+
+ if (existsSync(publicDir)) {
+ await cp(publicDir, outDir, { recursive: true });
+ }
+ },
+ },
+ manifest: ({ browser }) => {
+ const basePermissions = ['storage', 'activeTab', 'tabs', 'cookies', 'contextMenus'];
+ const chromePermissions = [...basePermissions, 'sidePanel'];
+
+ return {
+ name: 'Margin',
+ description: 'Annotate and highlight any webpage, with your notes saved to the decentralized AT Protocol.',
+ permissions: browser === 'firefox' ? basePermissions : chromePermissions,
+ host_permissions: ['https://margin.at/*', '*://*/*'],
+ icons: {
+ 16: '/icons/icon-16.png',
+ 32: '/icons/icon-32.png',
+ 48: '/icons/icon-48.png',
+ 128: '/icons/icon-128.png',
+ },
+ commands: {
+ 'open-sidebar': {
+ suggested_key: {
+ default: 'Alt+M',
+ mac: 'Alt+M',
+ },
+ description: 'Open Margin sidebar',
+ },
+ 'annotate-selection': {
+ suggested_key: {
+ default: 'Alt+A',
+ mac: 'Alt+A',
+ },
+ description: 'Annotate selected text',
+ },
+ 'highlight-selection': {
+ suggested_key: {
+ default: 'Alt+H',
+ mac: 'Alt+H',
+ },
+ description: 'Highlight selected text',
+ },
+ 'bookmark-page': {
+ suggested_key: {
+ default: 'Alt+B',
+ mac: 'Alt+B',
+ },
+ description: 'Bookmark current page',
+ },
+ },
+ action: {
+ default_title: 'Margin',
+ default_popup: 'popup.html',
+ default_icon: {
+ 16: '/icons/icon-16.png',
+ 32: '/icons/icon-32.png',
+ 48: '/icons/icon-48.png',
+ 128: '/icons/icon-128.png',
+ },
+ },
+ ...(browser === 'chrome' ? {
+ side_panel: {
+ default_path: 'sidepanel.html',
+ },
+ } : {
+ sidebar_action: {
+ default_title: 'Margin',
+ default_panel: 'sidepanel.html',
+ },
+ }),
+ };
+ },
+});
- 
+ );
+ }
+
+ if (icon.startsWith('icon:')) {
+ const iconName = icon.replace('icon:', '');
+ const IconComponent = ICON_MAP[iconName];
+ if (IconComponent) {
+ return 
+