ekiCheck leverages WXT + React + TypeScript, utilizing Chrome's sidePanel API for vertical space optimization. The architecture separates content extraction, AI analysis, and state management:

ToritekiCheck/
├── entrypoints/
│   ├── content.ts          # Page text extraction
│   ├── sidepanel/          # React UI for results
│   └── background.ts       # API calls, message routing
└── lib/
    ├── extractor.ts        # Terms text extraction heuristics
    ├── analyzer.ts         # GPT call via Vercel proxy
    └── storage.ts          # Usage count, settings

Extracting Terms Text

DOM parsing requires robust heuristics to ignore navigation, footers, and cookie banners while targeting actual terms content. The extraction logic prioritizes semantic containers and falls back to body content cleaning.

function extractTermsText(doc: Document): string {
  // Common terms container patterns in Japanese sites
  const selectors = [
    'article',
    '[class*="terms"]',
    '[class*="kiyaku"]',    // 規約 in romaji
    '[class*="agreement"]',
    '[id*="terms"]',
    '[id*="policy"]',
    'main',
  ];

  for (const selector of selectors) {
    const el = doc.querySelector(selector);
    if (el && el.textContent && el.textContent.trim().length > 500) {
      return cleanText(el.textContent);
    }
  }

  // Fallback: body text minus nav/header/footer
  return extractBodyContent(doc);
}

function cleanText(text: string): string {
  return text
    .replace(/\s+/g, ' ')
    .replace(/[\u200B-\u200D\uFEFF]/g, '') // Zero-width characters
    .trim()
    .slice(0, 8000); // GPT context limit
}

The GPT Analysis Prompt

The prompt enforces strict JSON output with risk-level classification, enabling deterministic UI rendering without fragile string parsing.

const ANALYSIS_PROMPT = `
あなたは日本のサブスクリプションサービスの規約分析の専門家です。
以下の利用規約・特定商取引法に基づく表示から、ユーザーが特に注意すべき項目を抽出してください。

【抽出する項目】
1. 自動更新条件（更新タイミング、事前通知の有無）
2. 解約方法と解約期限（どのように、いつまでに解約が必要か）
3. 無料期間の終了条件（いつ有料に切り替わるか）
4. 価格変更の通知方法
5. 返金ポリシー

【出力形式】JSON
{
  "autoRenewal": { "exists": boolean, "conditions": string, "riskLevel": "high"|"medium"|"low" },
  "cancellation": { "method": string, "deadline": string, "riskLevel": "high"|"medium"|"low" },
  "freeTrial": { "endCondition": string, "conversionDate": string | null },
  "priceChange": { "notificationMethod": string },
  "refundPolicy": { "available": boolean, "conditions": string },
  "summary": "最も重要な点を1-2文で要約"
}

見つからない項目は null にしてください。
`;

Free Tier Limits & Storage Strategy

Usage tracking employs calendar-month keying to enable automatic reset without cron jobs. Old keys are pruned periodically to prevent storage bloat.

async function checkAndIncrementUsage(): Promise<{ allowed: boolean; remaining: number }> {
  const now = new Date();
  const monthKey = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;

  const data = await chrome.storage.local.get(['usage', 'isPro']);
  if (data.isPro) return { allowed: true, remaining: Infinity };

  const usage = data.usage ?? {};
  const currentMonthCount = usage[monthKey] ?? 0;

  if (currentMonthCount >= FREE_LIMITS.MONTHLY_ANALYSES) {
    return { allowed: false, remaining: 0 };
  }

  // Increment
  await chrome.storage.local.set({
    usage: { ...usage, [monthKey]: currentMonthCount + 1 },
  });

  return {
    allowed: true,
    remaining: FREE_LIMITS.MONTHLY_ANALYSES - currentMonthCount - 1,
  };
}

Proxy Requirement & Data Handling

API keys are never exposed client-side. All GPT calls route through a Vercel serverless function. Extracted terms text (max 8000 chars) is transmitted transiently, never persisted, with full transparency in CWS privacy settings and in-extension UI.

Pitfall Guide

1. DOM Selector Fragility: Japanese sites frequently use non-standard class/id naming. Relying solely on exact matches causes extraction failures. Always implement a multi-selector cascade with a body-text fallback and length threshold (> 500 chars).
2. Context Window Truncation: Cutting text at 8000 characters risks losing critical clauses if they appear late in the document. Mitigate by targeting subscription-specific sections first, as auto-renewal and cancellation terms statistically appear in the first third of Japanese T&Cs.
3. Client-Side API Key Exposure: Storing OpenAI keys in manifest.json or content scripts leads to immediate revocation and security breaches. Always route LLM calls through a serverless proxy (Vercel/AWS Lambda) with environment-variable-backed authentication.
4. Freemium Limit Mismatch: Applying productivity-tool freemium logic (tight limits to force upgrades) to occasional-use utilities destroys word-of-mouth growth. A 3-analyses-per-month limit aligns with actual user behavior (1-2 checks/month) while preserving conversion pathways for power users.
5. Storage Key Accumulation: Month-keyed chrome.storage auto-resets but leaves historical keys. Implement a background cleanup routine that purges keys older than 3 months to prevent quota exhaustion on low-end devices.
6. JSON Parsing Reliability: LLM outputs can occasionally include markdown formatting or trailing commas. Enforce strict JSON schema in the prompt and implement a fallback parser (JSON.parse(text.replace(/```json\n?|\n?```/g, ''))) in the UI layer.
7. Privacy & Transparency Gaps: Sending public T&C text to third-party AI requires explicit disclosure. Failure to document data flow in CWS privacy settings and in-extension UI triggers store rejection and erodes user trust.

Deliverables

• Architecture Blueprint: Complete flow diagram detailing Content Script extraction → Vercel Proxy routing → GPT-4o-mini analysis → Sidepanel React rendering, including error boundaries and retry logic.
• Implementation Checklist:
  • Configure WXT manifest with sidePanel and storage permissions
  • Deploy Vercel serverless function with OpenAI proxy & rate limiting
  • Implement month-key storage schema with 3-month cleanup cron
  • Validate JSON schema parsing & risk-level UI mapping
  • Draft CWS privacy disclosure & in-extension data transparency notice
• Configuration Templates: Pre-configured ANALYSIS_PROMPT JSON schema, chrome.storage.local usage tracking structure, and extraction selector fallback hierarchy ready for direct integration into WXT projects.