Re:Mark - Chrome Extension (Vite + React + TypeScript)

A modern Chrome extension built with Vite, React, and TypeScript that extracts web pages as clean Markdown files and provides AI-powered SEO analysis using GPT and Gemini models.

🚀 Features

• Markdown Extraction: Convert any web page to clean, structured Markdown using Turndown
• Save Functionality: Save extracted Markdown files with metadata
• AI-Powered SEO Analysis: Analyze content using OpenAI GPT or Google Gemini
• SEO Scoring: Get a comprehensive SEO score (0-100) for your content
• Improvement Suggestions: Receive detailed before/after recommendations
• Modern Stack: Built with Vite, React, TypeScript, and Tailwind CSS
• Modern UI: Clean, spacious design with Material Design icons
• Type Safety: Full TypeScript coverage with proper type definitions

📦 Tech Stack

• Vite - Fast build tool and dev server
• React 19 - UI framework
• TypeScript - Type safety
• Tailwind CSS v4 - Utility-first CSS framework
• Material Symbols - Google Material Icons
• Turndown - HTML to Markdown converter
• @google/generative-ai - Official Google Gemini SDK
• CRXJS - Vite plugin for Chrome extensions

🛠️ Development

Prerequisites

• Node.js 20.19.0+ or 22.12.0+
• npm or yarn

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Package for Chrome Web Store deployment
npm run package

Loading the Extension

1. Build the extension: npm run build
2. Open Chrome and navigate to chrome://extensions/
3. Enable "Developer mode" (toggle in top right)
4. Click "Load unpacked"
5. Select the dist folder from the project root

📁 Project Structure

remark-extension/
├── src/
│   ├── components/         # React components
│   │   ├── ExtractTab.tsx  # Markdown extraction UI
│   │   ├── AnalyzeTab.tsx  # SEO analysis UI
│   │   └── SEOResults.tsx  # SEO results display
│   ├── content/           # Content script
│   │   └── content.ts      # Injected into web pages
│   ├── background/         # Background service worker
│   │   └── background.ts   # Handles downloads
│   ├── utils/              # Utility functions
│   │   ├── markdown-converter.ts  # HTML to Markdown
│   │   └── seo-analyzer.ts        # AI SEO analysis
│   ├── types/              # TypeScript type definitions
│   │   ├── extract.ts
│   │   ├── seo.ts
│   │   └── index.ts
│   ├── App.tsx             # Main app component
│   ├── main.tsx            # React entry point
│   ├── index.html          # HTML entry point
│   ├── index.css           # Tailwind CSS styles
│   └── manifest.json       # Extension manifest
├── public/
│   └── icons/              # Extension icons (16, 48, 128)
├── dist/                   # Build output (generated)
├── vite.config.ts          # Vite configuration
├── tailwind.config.js      # Tailwind configuration
├── package.json
└── manifest.json           # Root manifest (used by build)

🎨 Styling

This project uses Tailwind CSS v4 for styling with a modern, Mac-app inspired design:

• Clean, spacious interface
• Professional typography hierarchy
• Material Design icons (Google Material Symbols)
• Smooth animations and transitions
• Custom color palette with primary purple/violet theme

The configuration is in tailwind.config.js and src/index.css.

🔑 API Keys

OpenAI

• Get your API key from: https://platform.openai.com/api-keys
• Supported models: GPT-4o, GPT-4 Turbo, GPT-3.5 Turbo

Google Gemini

• Get your API key from: https://makersuite.google.com/app/apikey
• Supported models: Gemini 2.5 Pro, Gemini 2.5 Flash

Note: API keys are stored locally in your browser and never shared.

📝 Usage

Getting Started

1. Install the Extension

   • Install from Chrome Web Store

2. Pin the Extension (Recommended)

   • Click the puzzle icon in Chrome toolbar
   • Find "Re:Mark" and click the pin icon
   • This makes the extension easily accessible

Extracting Markdown from Web Pages

Step-by-Step Guide:

1. Navigate to any web page you want to extract

   • Works on most websites (news articles, blog posts, documentation, etc.)
   • Does not work on Chrome internal pages (chrome://, chrome-extension://)

2. Open the Extension

   • Click the Re:Mark icon in your Chrome toolbar
   • The extension popup will open

3. Extract Content

   • You'll be on the "Extract" tab by default
   • Click the "Extract as Markdown" button
   • Wait a few seconds while the extension processes the page
   • The extension will scroll through the page to capture all content

4. Preview the Results

   • The extracted Markdown will appear in the preview area
   • You can see the character count at the top right
   • Review the content to ensure it captured what you need

5. Save the File

   • Click "Save Markdown" to download the file
   • The file will be named: remark-[domain]-[timestamp].md
   • The file includes:
     • Page title as heading
     • Source URL
     • Extraction date
     • Clean Markdown content

Tips:

• The extension automatically removes ads, navigation, and unwanted elements
• Content structure (headings, lists, links) is preserved
• Works best on content-focused pages (articles, blog posts, documentation)

Analyzing SEO with AI

Prerequisites:

• You need an API key from either OpenAI or Google Gemini
• You must first extract markdown from a page (see above)

Step-by-Step Guide:

1. Extract Content First

   • Follow the steps above to extract markdown from a page
   • The extracted content is automatically saved for analysis

2. Switch to Analyze Tab

   • Click the "Analyze" tab in the extension popup

3. Configure AI Settings

   • Select Provider: Choose between OpenAI (GPT) or Google Gemini
   • Choose Model:
     • OpenAI: GPT-4o (recommended), GPT-4 Turbo, or GPT-3.5 Turbo
     • Gemini: Gemini 2.5 Pro or Gemini 2.5 Flash
   • Enter API Key: Paste your API key
     • Your API key is stored locally and never shared
     • Settings are saved automatically

4. Run Analysis

   • Click "Analyze SEO" button
   • Wait 10-30 seconds while AI analyzes your content
   • A loading indicator will show progress

5. Review Results

   • SEO Score: See your overall score (0-100)
     • 80+: Excellent
     • 60-79: Good
     • Below 60: Needs improvement
   • Improvements: Scroll through detailed recommendations
     • Each improvement shows:
       • Category (e.g., "Title and Meta Descriptions")
       • Issue description
       • Recommendation
       • Before/After examples (when available)

Understanding SEO Analysis:

The AI analyzes your content across multiple categories:

• Title and Meta Descriptions: Optimization for search engines
• Heading Structure: Proper H1-H6 hierarchy
• Content Quality: Keyword usage and relevance
• Links: Internal and external link optimization
• Images: Alt text and image optimization
• Content Length: Appropriate length for topic
• Readability: Content structure and flow
• Mobile Considerations: Mobile-friendly content structure

Tips:

• Use GPT-4o or Gemini 2.5 Pro for more detailed analysis
• Use GPT-3.5 Turbo or Gemini 2.5 Flash for faster, cheaper analysis
• Review each improvement suggestion carefully
• Apply the "After" examples to improve your content

Workflow Examples

Example 1: Content Creator Workflow

1. Write a blog post on your website
2. Extract the post as Markdown using Re:Mark
3. Analyze the SEO to identify improvements
4. Update your content based on recommendations
5. Re-analyze to see improved score

Example 2: Competitor Analysis

1. Visit a competitor's blog post
2. Extract their content as Markdown
3. Analyze their SEO strategy
4. Learn from their optimization techniques

Example 3: Documentation Extraction

1. Navigate to technical documentation
2. Extract as Markdown for offline reference
3. Save multiple pages for a complete guide
4. Optionally analyze SEO if it's public-facing content

Best Practices

• For Extraction:

  • Extract from content-focused pages for best results
  • Review the preview before saving
  • Use descriptive filenames (the extension auto-generates them)

• For SEO Analysis:

  • Extract content first, then analyze
  • Use higher-tier models (GPT-4o, Gemini 2.5 Pro) for detailed analysis
  • Review all improvement suggestions, not just the score
  • Apply changes incrementally and re-analyze

• API Key Management:

  • Keep your API keys secure
  • Monitor your API usage to avoid unexpected charges
  • Use lower-tier models for testing, higher-tier for final analysis

🐛 Troubleshooting

Build Issues

• Make sure Node.js version matches requirements
• Delete node_modules and dist folders, then run npm install again

Extension Not Loading

• Check that dist folder exists after building
• Verify manifest.json is valid
• Check Chrome's extension error page for details

Content Extraction Fails

• Make sure you're on a regular website (not chrome:// pages)
• Try refreshing the page and extracting again

API Key Issues

• Verify your API key is correct and has sufficient credits
• For OpenAI: Check your API key at https://platform.openai.com/api-keys
• For Gemini: Check your API key at https://makersuite.google.com/app/apikey
• Ensure the selected model is available for your API key

🚀 Deployment

To deploy to the Chrome Web Store:

1. Build and package:

   npm run package

   This creates remark-extension.zip ready for upload.

📄 License

MIT License