you know 2 bug fixes with ai doesnt make it ai generated?

.gitignore

@@ -26,4 +26,6 @@ dist-ssr
 .wrangler
 assets
 *.env
-*.zip
+*.zip
+temp
+*.tmp

README.md

@@ -1,60 +1,80 @@
 # [ShareClaude](https://shareclaude.pages.dev)
 
-<div align="center">
-
-Chrome Extension to share your [Claude](https://claude.ai) chats with one click.
+Browser extension to share and export your [Claude](https://claude.ai) chats with one click.
 
 [![Visit ShareClaude](https://img.shields.io/badge/Visit-ShareClaude-blue.svg?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNEOTc3NTciIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1zaGFyZS0yIj48Y2lyY2xlIGN4PSIxOCIgY3k9IjUiIHI9IjMiLz48Y2lyY2xlIGN4PSI2IiBjeT0iMTIiIHI9IjMiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjE5IiByPSIzIi8+PGxpbmUgeDE9IjguNTkiIHgyPSIxNS40MiIgeTE9IjEzLjUxIiB5Mj0iMTcuNDkiLz48bGluZSB4MT0iMTUuNDEiIHgyPSI4LjU5IiB5MT0iNi41MSIgeTI9IjEwLjQ5Ii8+PC9zdmc+)](https://shareclaude.pages.dev)
 [![Platform Chrome](https://img.shields.io/badge/Platform-Chrome-yellow?logo=google-chrome&logoColor=yellow)](https://chrome.google.com/webstore/detail/shareclaude/pcpjdbnjhgofgjgegodlnebdnmiddmaa)
+[![Platform Firefox](https://img.shields.io/badge/Platform-Firefox-orange?logo=firefox-browser&logoColor=orange)](https://addons.mozilla.org/en-US/firefox/addon/shareclaude/)
 
-## [Download from Chrome Web Store](https://chromewebstore.google.com/detail/shareclaude/pcpjdbnjhgofgjgegodlnebdnmiddmaa)
-</div>
-
+## [Download from Chrome Web Store](https://chromewebstore.google.com/detail/shareclaude/pcpjdbnjhgofgjgegodlnebdnmiddmaa) OR [Download from Firefox Add-ons Store](https://addons.mozilla.org/en-US/firefox/addon/shareclaude/)
 
 ## Features
 
 - One-click sharing of Claude AI conversations
 - Instant URL generation
-- Support syntax highlighting for code and Artifacts including Mermaid & JSON
+- Supports syntax highlighting for code and artifacts, including Mermaid and JSON
 - Works directly with Claude's web interface
 
 ## How It Works
-When you share a conversation, the extension stores the converastions to ShareClaude's database (not Claude). Each conversation gets a unique URL, similar to an unlisted YouTube video. The URL can be shared with anyone, but it won’t show up in search results on Google.
-Further conversations are served from ShareClaude’s database, not directly from Claude.
+
+When you share a conversation, the extension stores the conversation in ShareClaude's database, not Claude's. Each conversation gets a unique URL, similar to an unlisted YouTube video. The URL can be shared with anyone, but it won't show up in Google search results.
+Shared conversations are served from ShareClaude's database, not directly from Claude.
 
 *Important: While the URL is private and not searchable, anyone with the URL can still view the conversation. Please avoid sharing sensitive or personal information.*
 
+## How to Use
+
+1. Open [Claude](https://claude.ai) in your browser
+2. Start or continue a conversation with Claude
+3. Click the **ShareClaude** button in the top-right corner (next to Claude's native Share button, separated by a divider)
+4. A menu appears with options:
+   - **Share to ShareClaude:** Uploads the conversation and copies the link to your clipboard as an alternative to Claude's native share option
+   - **Export:** Downloads the conversation as HTML, Markdown, plain text, JSON, or Word (.docx)
+
+## Tech Stack
+
+- **Frontend**: React, TailwindCSS
+- **Backend**: Cloudflare Workers
+- **Database**: Cloudflare D1
+
 ## Installation
 
+### Chrome
+
+Install from [Chrome Web Store](https://chromewebstore.google.com/detail/shareclaude/pcpjdbnjhgofgjgegodlnebdnmiddmaa) **(Recommended)**
+
+**OR** for development/debugging:
+
 1. Clone this repository:
+
    ```bash
    git clone https://github.com/rohit1kumar/shareclaude.git
    ```
+
 2. Open Chrome and navigate to `chrome://extensions/`
 3. Enable "Developer mode" in the top right corner
 4. Click "Load unpacked" and select the `extension` folder from the cloned repository
 
-## How to Use
+### Firefox
 
-1. Open [Claude](https://claude.ai) in your browser
-2. Start or continue a conversation with Claude
-3. Click the ![share_button](https://github.com/user-attachments/assets/08baed07-07be-496d-aa40-c232e6022204) share icon in the input box adjacent to the attachments button.
-4. The sharing URL will be automatically copied to your clipboard
-5. Share the URL with anyone you want!
+Install from [Firefox Add-ons Store](https://addons.mozilla.org/en-US/firefox/addon/shareclaude/) **(Recommended)**
 
-## Tech Stack
+**OR** for development/debugging:
 
-- **Frontend**: React, TailwindCSS
-- **Backend**: Cloudflare Workers
-- **Database**: Cloudflare D1
+1. Clone this repository:
 
-## Known Issues
+   ```bash
+   git clone https://github.com/rohit1kumar/shareclaude.git
+   ```
 
-- ~~Extension icon may not appear on the first load. Refreshing the page resolves this issue~~
+2. Open Firefox and navigate to `about:debugging#/runtime/this-firefox`
+3. Click "Load Temporary Add-on..."
+4. Select the `manifest.json` file inside the `extension` folder from the cloned repository
 
 ## Contributing
 
 Contributions are welcome! Feel free to:
+
 - Report bugs
 - Suggest new features
 - Submit pull requests
@@ -64,4 +84,17 @@ Contributions are welcome! Feel free to:
 - [Website](https://shareclaude.pages.dev)
 
 ---
+
+## Star History
+
+<!-- markdownlint-disable MD033 -->
+<a href="https://www.star-history.com/?repos=rohit1kumar%2Fshareclaude&type=date&legend=top-left">
+ <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/image?repos=rohit1kumar/shareclaude&type=date&theme=dark&legend=top-left" />
+    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/image?repos=rohit1kumar/shareclaude&type=date&legend=top-left" />
+    <img alt="Star History Chart" src="https://api.star-history.com/image?repos=rohit1kumar/shareclaude&type=date&legend=top-left" />
+ </picture>
+</a>
+<!-- markdownlint-enable MD033 -->
+
 Made with ☕ for the Claude community

app/functions/api/[[catchall]].js

@@ -1,3 +1,3 @@
-export async function onRequest(context) {
-    return Response.json({ message: "Opps! This route does not exist." }, { status: 404 });
+export async function onRequest() {
+    return Response.json({ message: "Oops! This route does not exist." }, { status: 404 });
 }

app/functions/api/_middleware.js

@@ -1,11 +1,9 @@
-const corsHeaders = {
-    'Access-Control-Allow-Origin': '*',
-    'Access-Control-Allow-Methods': '*',
-    'Access-Control-Allow-Headers': '*',
-    'Access-Control-Max-Age': '86400'
-};
+import { getCorsHeaders } from './utils';
 
 export async function onRequest(context) {
+    const origin = context.request.headers.get('Origin');
+    const corsHeaders = getCorsHeaders(origin);
+
     if (context.request.method === 'OPTIONS') {
         return new Response(null, {
             headers: corsHeaders,
@@ -14,7 +12,11 @@ export async function onRequest(context) {
     }
 
     const response = await context.next();
-    Object.entries(corsHeaders).forEach(([key, value]) => response.headers.set(key, value));
+    Object.entries(corsHeaders).forEach(([key, value]) => {
+        if (value) {
+            response.headers.set(key, value);
+        }
+    });
 
     return response;
 }

app/functions/api/chats/[id].js

@@ -1,19 +1,26 @@
 import { drizzle } from 'drizzle-orm/d1';
 import { eq } from 'drizzle-orm';
 import { chatsSchema } from '../../../database/schema';
+import { getReadableError, getCorsHeaders } from '../utils';
+
+export async function onRequestOptions(context) {
+    const origin = context.request.headers.get('Origin');
+    return new Response(null, { headers: getCorsHeaders(origin) });
+}
 
 export async function onRequestGet(context) {
     const id = context.params.id;
+    const origin = context.request.headers.get('Origin');
+    const corsHeaders = getCorsHeaders(origin);
     try {
         const db = drizzle(context.env.DB);
         const [chat] = await db.select().from(chatsSchema).where(eq(chatsSchema.id, id)).limit(1)
         if (!chat) {
-            return Response.json({ msg: 'chat not found' }, { status: 404 });
+            return Response.json({ msg: 'chat not found' }, { status: 404, headers: corsHeaders });
         }
 
-        return Response.json(chat);
+        return Response.json(chat, { headers: corsHeaders });
     } catch (error) {
-        console.log("Error getting a chat: ", error)
-        return Response.json({ msg: "something went wrong!" }, { status: 500 });
+        return Response.json({ msg: getReadableError(error) }, { status: 500, headers: corsHeaders });
     }
 }

app/functions/api/chats/[id]/raw.js

@@ -0,0 +1,40 @@
+import { drizzle } from 'drizzle-orm/d1';
+import { eq } from 'drizzle-orm';
+import { chatsSchema } from '../../../../database/schema';
+import { getReadableError, getCorsHeaders } from '../../utils';
+
+export async function onRequestGet(context) {
+    const id = context.params.id;
+    const origin = context.request.headers.get('Origin');
+    const corsHeaders = getCorsHeaders(origin);
+    try {
+        const db = drizzle(context.env.DB);
+        const [chat] = await db.select().from(chatsSchema).where(eq(chatsSchema.id, id)).limit(1);
+        if (!chat) {
+            return new Response('Chat not found', {
+                status: 404,
+                headers: {
+                    ...corsHeaders,
+                    'Content-Type': 'text/plain; charset=utf-8'
+                }
+            });
+        }
+
+        const messages = Array.isArray(chat.content) ? chat.content : [];
+        const lines = [`# ${chat.title}`, ''];
+
+        for (const { source, message } of messages) {
+            const role = source === 'user' ? 'You' : 'Claude';
+            lines.push(`## ${role}`, '', message ?? '', '', '---', '');
+        }
+
+        return new Response(lines.join('\n'), {
+            headers: {
+                ...corsHeaders,
+                'Content-Type': 'text/plain; charset=utf-8',
+            },
+        });
+    } catch (error) {
+        return new Response(getReadableError(error), { status: 500, headers: { 'Content-Type': 'text/plain; charset=utf-8' } });
+    }
+}

app/functions/api/chats/__tests__/[id].test.js

@@ -0,0 +1,92 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { onRequestGet } from '../[id].js';
+import * as drizzleD1 from 'drizzle-orm/d1';
+
+vi.mock('drizzle-orm/d1', () => ({
+    drizzle: vi.fn()
+}));
+
+describe('chats/[id].js onRequestGet', () => {
+    let mockContext;
+    let mockDb;
+    let consoleLogSpy;
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+
+        mockDb = {
+            select: vi.fn().mockReturnThis(),
+            from: vi.fn().mockReturnThis(),
+            where: vi.fn().mockReturnThis(),
+            limit: vi.fn()
+        };
+
+        drizzleD1.drizzle.mockReturnValue(mockDb);
+
+        mockContext = {
+            params: { id: 'test-id' },
+            env: { DB: {} },
+            request: {
+                headers: new Headers([['Origin', 'https://claude.ai']])
+            }
+        };
+
+        vi.stubGlobal('Response', {
+            json: vi.fn().mockImplementation((data, init) => ({ data, init }))
+        });
+
+        consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+        consoleLogSpy.mockRestore();
+    });
+
+    it('returns 200 with chat data when chat is found', async () => {
+        const mockChat = { id: 'test-id', title: 'Test Chat' };
+        mockDb.limit.mockResolvedValue([mockChat]);
+
+        const response = await onRequestGet(mockContext);
+
+        expect(global.Response.json).toHaveBeenCalledWith(
+            mockChat,
+            expect.objectContaining({
+                headers: expect.any(Object)
+            })
+        );
+        expect(response.data).toEqual(mockChat);
+    });
+
+    it('returns 404 when chat is not found', async () => {
+        mockDb.limit.mockResolvedValue([]); // returns an empty array
+
+        const response = await onRequestGet(mockContext);
+
+        expect(global.Response.json).toHaveBeenCalledWith(
+            { msg: 'chat not found' },
+            expect.objectContaining({
+                status: 404,
+                headers: expect.any(Object)
+            })
+        );
+        expect(response.init.status).toBe(404);
+    });
+
+    it('returns 500 when database throws an error', async () => {
+        const error = new Error('Database error');
+        mockDb.limit.mockRejectedValue(error);
+
+        const response = await onRequestGet(mockContext);
+
+        expect(consoleLogSpy).toHaveBeenCalledWith("Error getting a chat: ", error);
+
+        expect(global.Response.json).toHaveBeenCalledWith(
+            { msg: 'Something went wrong!' },
+            expect.objectContaining({
+                status: 500,
+                headers: expect.any(Object)
+            })
+        );
+        expect(response.init.status).toBe(500);
+    });
+});

app/functions/api/chats/index.js

@@ -9,15 +9,37 @@ export async function onRequestPost(context) {
     const db = drizzle(context.env.DB);
     try {
         const { title, content } = await context.request.json();
-        if (!title.trim()) {
-            return Response.json({ msg: 'title is required' }, { status: 400 });
+        if (!title || typeof title !== 'string' || !title.trim() || title.length > 512) {
+            return Response.json({ msg: 'valid title (max 512 chars) is required' }, { status: 400 });
         }
-        const [newChat] = await db.insert(chatsSchema).values({ title, content }).returning()
+
+        if (!Array.isArray(content)) {
+            return Response.json({ msg: 'content must be an array' }, { status: 400 });
+        }
+
+        const sanitizedContent = [];
+        for (const item of content) {
+            if (typeof item !== 'object' || item === null || Array.isArray(item)) {
+                return Response.json({ msg: 'content items must be objects' }, { status: 400 });
+            }
+            if (typeof item.source !== 'string' || !['user', 'claude'].includes(item.source)) {
+                return Response.json({ msg: 'content item source must be "user" or "claude"' }, { status: 400 });
+            }
+            if (typeof item.message !== 'string') {
+                return Response.json({ msg: 'content item message must be a string' }, { status: 400 });
+            }
+            sanitizedContent.push({
+                source: item.source,
+                message: item.message
+            });
+        }
+
+        const [newChat] = await db.insert(chatsSchema).values({ title, content: sanitizedContent }).returning()
         return Response.json({
             id: newChat.id,
         }, { status: 201 });
     } catch (error) {
-        console.log("Error creating chat: ", error)
+        console.error("Error creating chat:", error);
         return Response.json({ msg: "something went wrong!" }, { status: 500 });
     }
 }