chrome-extension

Chrome Extension

Structure

extension/
├── manifest.json          # Manifest V3, version 2.0.0
├── popup/                 # popup.html, popup.css, popup.js
├── content/               # content.js (extraction), content.css
├── background/            # service-worker.js (token refresh every 55 min)
└── icons/                 # icon16/48/128.png (generated from app logo PNG)

Dev / Prod URL Toggle

Both popup.js and service-worker.js use a single flag to switch between local dev and production. Never hardcode PRODUCTION_URL as the active URL.

// ⚠️  BEFORE PUBLISHING: Set IS_DEV = false and fill in PRODUCTION_URL.
const IS_DEV = true;
const DEV_URL = 'http://localhost:8000';
const PRODUCTION_URL = 'https://your-rolemule-instance.com';
const BASE_URL = IS_DEV ? DEV_URL : PRODUCTION_URL;

const CONFIG = {
  API_BASE_URL: `${BASE_URL}/api/v1`,
  DASHBOARD_URL: `${BASE_URL}/dashboard`,
  APP_URL: BASE_URL,
  // ...
};

The URL can also be overridden at runtime via chrome.storage.local key jaa_api_url (useful during development):

chrome.storage.local.set({ jaa_api_url: 'http://localhost:8000/api/v1' })

Manifest (current)

• version: 2.0.0
• description: "One mule for every role. Analyze any job posting with AI, or match application forms to your profile."
• short_name: RoleMule
• default_title: RoleMule — One mule for every role.
• http://localhost:8000/* is in host_permissions (required, not optional) so Chrome grants access automatically in dev

Icons

Icons (icon16.png, icon48.png, icon128.png) are generated from the app's logo PNG using Pillow:

cd /path/to/project && source venv/bin/activate
python3 -c "
from PIL import Image
src = 'path/to/logo.png'
img = Image.open(src).convert('RGBA')
for size in [16, 48, 128]:
    img.resize((size, size), Image.LANCZOS).save(f'extension/icons/icon{size}.png')
"

Popup Design

The popup (popup.html / popup.css) mirrors the main app's design system exactly:

• Same CSS variables: --accent-gradient, --bg-primary/secondary/tertiary, --text-*, --border-color, etc.
• Same font: Outfit from Google Fonts
• Font Awesome 6 loaded from CDN (cdnjs.cloudflare.com) for all icons — no emoji
• Header logo: mule mark (logo-icon img from extension/icons/icon48.png) + Role<span class="brand-accent">Mule</span> (Mule in var(--accent-primary))
• No rounded outer corners — Chrome's native popup window clips them; do not add border-radius to html/body/.popup-container