tlrd-extension 1.0.0

package/src/app/views/LanguageSelectorView.ts

@@ -0,0 +1,52 @@
+import { View } from 'ostovjs';
+import template from '../templates/language-selector.hbs';
+import { SUMMARY_LANGUAGES, UI_LANGUAGES } from '../../shared/i18n/locales';
+import type SettingsModel from '../models/SettingsModel';
+
+class LanguageSelectorView extends View {
+  declare model: SettingsModel;
+
+  constructor(options: { model: SettingsModel }) {
+    super({
+      ...options,
+      tagName: 'div',
+      className: 'lang-selector',
+      events: {
+        'change [data-action=change-summary-lang]': 'onChangeSummaryLang',
+        'change [data-action=change-ui-lang]': 'onChangeUiLang',
+      },
+    });
+  }
+
+  render() {
+    const summaryLang = this.model.get('summaryLanguage');
+    const uiLang = this.model.get('uiLanguage');
+
+    (this.el as HTMLElement).innerHTML = template({
+      summaryLanguages: SUMMARY_LANGUAGES.map((l) => ({
+        ...l,
+        selected: l.code === summaryLang,
+      })),
+      uiLanguages: UI_LANGUAGES.map((l) => ({
+        ...l,
+        selected: l.code === uiLang,
+      })),
+    });
+    return this;
+  }
+
+  onChangeSummaryLang(e: Event) {
+    const value = (e.target as HTMLSelectElement).value;
+    this.model.set('summaryLanguage', value);
+    this.model.persist();
+  }
+
+  onChangeUiLang(e: Event) {
+    const value = (e.target as HTMLSelectElement).value;
+    this.model.set('uiLanguage', value);
+    this.model.persist();
+    this.trigger('locale-changed', value);
+  }
+}
+
+export default LanguageSelectorView;

package/src/app/views/MessageView.ts

@@ -0,0 +1,33 @@
+import { View } from 'ostovjs';
+import template from '../templates/message.hbs';
+import { t } from '../../shared/i18n';
+import type MessageModel from '../models/MessageModel';
+
+class MessageView extends View {
+  declare model: MessageModel;
+
+  constructor(options: { model: MessageModel }) {
+    const role = options.model.get('role');
+    super({
+      ...options,
+      tagName: 'div',
+      className: `message message--${role}`,
+    });
+  }
+
+  render() {
+    const role = this.model.get('role');
+    (this.el as HTMLElement).innerHTML = template({
+      roleLabel: role === 'user' ? t('app.chat.role.user') : t('app.chat.role.assistant'),
+      content: this.model.get('content'),
+    });
+    return this;
+  }
+
+  updateContent(text: string) {
+    const bubble = (this.el as HTMLElement).querySelector('.message__bubble');
+    if (bubble) bubble.textContent = text;
+  }
+}
+
+export default MessageView;

package/src/app/views/SettingsView.ts

@@ -0,0 +1,81 @@
+import { View } from 'ostovjs';
+import template from '../templates/settings.hbs';
+import { t } from '../../shared/i18n';
+import { AVAILABLE_MODELS } from '../models/SettingsModel';
+import type SettingsModel from '../models/SettingsModel';
+
+class SettingsView extends View {
+  declare model: SettingsModel;
+  private _status = '';
+  private _statusType = '';
+
+  constructor(options: { model: SettingsModel }) {
+    super({
+      ...options,
+      tagName: 'div',
+      className: 'settings',
+      events: {
+        'click [data-action=save]': 'onSave',
+        'keydown #api-key': 'onKeydown',
+        'change [data-action=change-model]': 'onChangeModel',
+      },
+    });
+  }
+
+  initialize() {
+    this.listenTo(this.model, 'saved', this.onSaved);
+    this.listenTo(this.model, 'loaded', this.render);
+  }
+
+  render() {
+    const currentModel = this.model.get('model');
+    (this.el as HTMLElement).innerHTML = template({
+      apiKey: this.model.get('apiKey'),
+      status: this._status,
+      statusType: this._statusType,
+      models: AVAILABLE_MODELS.map((m) => ({
+        ...m,
+        selected: m.id === currentModel,
+      })),
+    });
+    return this;
+  }
+
+  onKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') this.onSave();
+  }
+
+  onSave() {
+    const input = (this.el as HTMLElement).querySelector<HTMLInputElement>('#api-key');
+    const key = input?.value.trim();
+
+    if (!key) {
+      this._status = t('app.settings.required');
+      this._statusType = 'error';
+      this.render();
+      return;
+    }
+
+    this.model.set('apiKey', key);
+    this.model.persist();
+  }
+
+  onChangeModel(e: Event) {
+    const value = (e.target as HTMLSelectElement).value;
+    this.model.set('model', value);
+    this.model.persist();
+  }
+
+  onSaved() {
+    this._status = t('app.settings.saved');
+    this._statusType = 'saved';
+    this.render();
+
+    setTimeout(() => {
+      this._status = '';
+      this.render();
+    }, 2000);
+  }
+}
+
+export default SettingsView;

package/src/app/views/TldrView.ts

@@ -0,0 +1,39 @@
+import { View } from 'ostovjs';
+import template from '../templates/tldr.hbs';
+import type PageModel from '../models/PageModel';
+
+class TldrView extends View {
+  declare model: PageModel;
+
+  constructor(options: { model: PageModel }) {
+    super({
+      ...options,
+      tagName: 'div',
+      className: 'tldr',
+    });
+  }
+
+  initialize() {
+    this.listenTo(this.model, 'change', this.render);
+  }
+
+  render() {
+    (this.el as HTMLElement).innerHTML = template({
+      pageTitle: this.model.get('title'),
+      pageUrl: this.model.get('url'),
+      tldr: this.model.get('tldr'),
+      loading: this.model.get('loading'),
+      error: this.model.get('error'),
+    });
+    return this;
+  }
+
+  updateContent(text: string) {
+    const contentEl = (this.el as HTMLElement).querySelector('.tldr__content');
+    if (contentEl) {
+      contentEl.textContent = text;
+    }
+  }
+}
+
+export default TldrView;

package/src/background/background.ts

@@ -0,0 +1,14 @@
+chrome.runtime.onMessage.addListener((message) => {
+  if (message.type === 'OPEN_TLDR') {
+    chrome.storage.session.set({ pendingPageContent: message.content }).then(() => {
+      const params = new URLSearchParams({
+        title: message.title || '',
+        url: message.url || '',
+      });
+
+      chrome.tabs.create({
+        url: chrome.runtime.getURL(`src/app/app.html?${params.toString()}`),
+      });
+    });
+  }
+});

package/src/content/content.ts

@@ -0,0 +1,49 @@
+interface PageData {
+  title: string;
+  url: string;
+  content: string;
+}
+
+function extractPageContent(): string {
+  // Use the broadest semantic container, not just the first article
+  const containerSelectors = [
+    '[role="main"]',
+    'main',
+    '#content',
+    '.content',
+  ];
+
+  let contentEl: Element | null = null;
+
+  for (const selector of containerSelectors) {
+    contentEl = document.querySelector(selector);
+    if (contentEl) break;
+  }
+
+  if (!contentEl) {
+    contentEl = document.body;
+  }
+
+  const clone = contentEl.cloneNode(true) as HTMLElement;
+
+  const removable = clone.querySelectorAll(
+    'script, style, noscript, svg, nav, header, footer, aside, .sidebar, .nav, .menu, .ad, .advertisement, [role="navigation"], [role="banner"], [role="complementary"], [hidden]'
+  );
+  removable.forEach((el) => el.remove());
+
+  return (clone.textContent || '').replace(/\s+/g, ' ').trim();
+}
+
+function getPageData(): PageData {
+  return {
+    title: document.title,
+    url: window.location.href,
+    content: extractPageContent(),
+  };
+}
+
+chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+  if (message.type === 'EXTRACT_CONTENT') {
+    sendResponse(getPageData());
+  }
+});

package/src/popup/popup.css

@@ -0,0 +1,166 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  width: 300px;
+  background: #f8f9fa;
+}
+
+.popup__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  background: #fff;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.popup__logo-icon {
+  width: 22px;
+  height: 22px;
+  color: #5c7cfa;
+}
+
+.popup__title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #4263eb;
+  letter-spacing: -0.02em;
+  flex: 1;
+}
+
+.popup__settings-toggle {
+  background: none;
+  border: none;
+  padding: 4px;
+  border-radius: 6px;
+  color: #868e96;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.popup__settings-toggle:hover {
+  color: #495057;
+}
+
+.popup__body {
+  padding: 16px;
+}
+
+.popup__section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.popup__desc {
+  font-size: 13px;
+  color: #868e96;
+}
+
+.popup__label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #495057;
+}
+
+.popup__input-wrap {
+  display: flex;
+  gap: 8px;
+}
+
+.popup__input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #dee2e6;
+  border-radius: 10px;
+  font-size: 13px;
+  font-family: inherit;
+  background: #f8f9fa;
+  color: #212529;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.popup__input:focus {
+  border-color: #748ffc;
+}
+
+.popup__save-btn {
+  padding: 8px 14px;
+  border: none;
+  border-radius: 10px;
+  background: #4c6ef5;
+  color: #fff;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.popup__save-btn:hover {
+  background: #4263eb;
+}
+
+.popup__link {
+  font-size: 12px;
+  color: #4c6ef5;
+  text-decoration: none;
+}
+
+.popup__link:hover {
+  text-decoration: underline;
+}
+
+
+.popup__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 12px;
+  background: #4c6ef5;
+  color: #fff;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.popup__btn:hover {
+  background: #4263eb;
+}
+
+.popup__btn:active {
+  background: #3b5bdb;
+}
+
+.popup__btn:disabled {
+  background: #ced4da;
+  color: #868e96;
+  cursor: not-allowed;
+}
+
+.popup__status {
+  font-size: 12px;
+  color: #868e96;
+  text-align: center;
+  min-height: 16px;
+}
+
+.popup__status--error {
+  color: #e03131;
+}
+
+.popup__status--saved {
+  color: #2f9e44;
+}

package/src/popup/popup.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+</head>
+<body>
+  <div class="popup">
+    <div class="popup__header">
+      <svg class="popup__logo-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+      </svg>
+      <span class="popup__title">TLDR</span>
+      <button class="popup__settings-toggle" id="toggle-settings-btn">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:16px;height:16px;">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+          <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+        </svg>
+      </button>
+    </div>
+    <div class="popup__body">
+      <!-- Settings section -->
+      <div class="popup__section" id="settings-section" style="display:none">
+        <label class="popup__label" data-i18n="popup.apiKey.label"></label>
+        <div class="popup__input-wrap">
+          <input class="popup__input" id="api-key-input" type="password" placeholder="sk-..." />
+          <button class="popup__save-btn" id="save-key-btn" data-i18n="popup.apiKey.save"></button>
+        </div>
+        <a class="popup__link" href="https://platform.openai.com/api-keys" target="_blank" rel="noopener" data-i18n="popup.apiKey.link"></a>
+        <p class="popup__status" id="key-status"></p>
+      </div>
+      <!-- Ready section -->
+      <div class="popup__section" id="ready-section" style="display:none">
+        <p class="popup__desc" data-i18n="popup.desc"></p>
+        <button class="popup__btn" id="summarize-btn" data-i18n="popup.btn.summarize"></button>
+        <p class="popup__status" id="status"></p>
+      </div>
+    </div>
+  </div>
+  <script type="module" src="popup.ts"></script>
+</body>
+</html>

package/src/popup/popup.ts

@@ -0,0 +1,113 @@
+import './popup.css';
+import { t, setLocale } from '../shared/i18n';
+import type { SupportedLocale } from '../shared/i18n/locales';
+
+const settingsSection = document.getElementById('settings-section')!;
+const readySection = document.getElementById('ready-section')!;
+const apiKeyInput = document.getElementById('api-key-input') as HTMLInputElement;
+const saveKeyBtn = document.getElementById('save-key-btn')!;
+const keyStatus = document.getElementById('key-status')!;
+const summarizeBtn = document.getElementById('summarize-btn') as HTMLButtonElement;
+const status = document.getElementById('status')!;
+const toggleSettingsBtn = document.getElementById('toggle-settings-btn')!;
+
+function translateUI() {
+  document.querySelectorAll<HTMLElement>('[data-i18n]').forEach((el) => {
+    el.textContent = t(el.dataset.i18n!);
+  });
+}
+
+function showSection(hasKey: boolean) {
+  settingsSection.style.display = hasKey ? 'none' : '';
+  readySection.style.display = hasKey ? '' : 'none';
+}
+
+async function init() {
+  const data = await chrome.storage.local.get(['apiKey', 'uiLanguage']);
+  const uiLang = (data.uiLanguage || 'en') as SupportedLocale;
+  setLocale(uiLang);
+  translateUI();
+  showSection(Boolean(data.apiKey));
+}
+
+saveKeyBtn.addEventListener('click', async () => {
+  const key = apiKeyInput.value.trim();
+  if (!key) {
+    keyStatus.textContent = t('popup.apiKey.required');
+    keyStatus.className = 'popup__status popup__status--error';
+    return;
+  }
+
+  await chrome.storage.local.set({ apiKey: key });
+  keyStatus.textContent = t('popup.apiKey.saved');
+  keyStatus.className = 'popup__status popup__status--saved';
+  setTimeout(() => showSection(true), 500);
+});
+
+apiKeyInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') saveKeyBtn.click();
+});
+
+toggleSettingsBtn.addEventListener('click', () => {
+  const isVisible = settingsSection.style.display !== 'none';
+  settingsSection.style.display = isVisible ? 'none' : '';
+});
+
+async function extractContent(tabId: number): Promise<PageData> {
+  // Inject content script
+  await chrome.scripting.executeScript({
+    target: { tabId },
+    files: ['content.js'],
+  });
+
+  // Retry sending message — script may not have registered listener yet
+  for (let attempt = 0; attempt < 3; attempt++) {
+    try {
+      const response = await chrome.tabs.sendMessage(tabId, { type: 'EXTRACT_CONTENT' });
+      if (response?.content) return response as PageData;
+    } catch {
+      // listener not ready yet
+    }
+    await new Promise((r) => setTimeout(r, 100));
+  }
+
+  throw new Error(t('error.noContent'));
+}
+
+interface PageData {
+  title: string;
+  url: string;
+  content: string;
+}
+
+summarizeBtn.addEventListener('click', async () => {
+  summarizeBtn.disabled = true;
+  status.textContent = t('popup.status.extracting');
+  status.className = 'popup__status';
+
+  try {
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+
+    if (!tab?.id) {
+      throw new Error(t('error.noTab'));
+    }
+
+    const response = await extractContent(tab.id);
+
+    chrome.runtime.sendMessage({
+      type: 'OPEN_TLDR',
+      title: response.title,
+      url: response.url,
+      content: response.content,
+    });
+
+    window.close();
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Unknown error';
+    status.textContent = message;
+    status.className = 'popup__status popup__status--error';
+    summarizeBtn.disabled = false;
+  }
+});
+
+init();

package/src/shared/i18n/index.ts

@@ -0,0 +1,29 @@
+import en from './translations/en';
+import zh from './translations/zh';
+import es from './translations/es';
+import hi from './translations/hi';
+import ar from './translations/ar';
+import fr from './translations/fr';
+import pt from './translations/pt';
+import ru from './translations/ru';
+import ja from './translations/ja';
+import de from './translations/de';
+import type { SupportedLocale } from './locales';
+
+const translations: Record<SupportedLocale, Record<string, string>> = {
+  en, zh, es, hi, ar, fr, pt, ru, ja, de,
+};
+
+let currentLocale: SupportedLocale = 'en';
+
+export function setLocale(locale: SupportedLocale): void {
+  currentLocale = locale;
+}
+
+export function getLocale(): SupportedLocale {
+  return currentLocale;
+}
+
+export function t(key: string): string {
+  return translations[currentLocale]?.[key] ?? translations['en'][key] ?? key;
+}

package/src/shared/i18n/locales.ts

@@ -0,0 +1,36 @@
+export type SupportedLocale = 'en' | 'zh' | 'es' | 'hi' | 'ar' | 'fr' | 'pt' | 'ru' | 'ja' | 'de';
+export type SummaryLanguage = SupportedLocale | 'original';
+
+export interface LanguageOption {
+  code: string;
+  nativeLabel: string;
+}
+
+export const SUMMARY_LANGUAGES: LanguageOption[] = [
+  { code: 'original', nativeLabel: 'Original' },
+  { code: 'en', nativeLabel: 'English' },
+  { code: 'zh', nativeLabel: '中文' },
+  { code: 'es', nativeLabel: 'Español' },
+  { code: 'hi', nativeLabel: 'हिन्दी' },
+  { code: 'ar', nativeLabel: 'العربية' },
+  { code: 'fr', nativeLabel: 'Français' },
+  { code: 'pt', nativeLabel: 'Português' },
+  { code: 'ru', nativeLabel: 'Русский' },
+  { code: 'ja', nativeLabel: '日本語' },
+  { code: 'de', nativeLabel: 'Deutsch' },
+];
+
+export const UI_LANGUAGES: LanguageOption[] = SUMMARY_LANGUAGES.filter((l) => l.code !== 'original');
+
+export const LANGUAGE_NAMES: Record<string, string> = {
+  en: 'English',
+  zh: 'Chinese',
+  es: 'Spanish',
+  hi: 'Hindi',
+  ar: 'Arabic',
+  fr: 'French',
+  pt: 'Portuguese',
+  ru: 'Russian',
+  ja: 'Japanese',
+  de: 'German',
+};