From 82bb55f66071b452e3bc7adeb09eafb5003de11f Mon Sep 17 00:00:00 2001 From: tanaka takashi Date: Wed, 2 Sep 2026 03:14:05 +0900 Subject: feat: PDF Viewer translation via context menu and two-mode Action Popup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add Firefox built-in PDF Viewer support using only public WebExtensions APIs: a selection context menu ("選択したテキストを翻訳") starts a translation and the toolbar Action Popup shows the streaming result. No content-script injection into the privileged PDF Viewer, no PDF.js internals, no separate windows, no custom viewer (Specifications.md §4.6). Specification alignment (Phase 1) - Specifications.md: new requirements PDF-01..04 (PDF selection translation), CTX-01..03 (context menu translation), POP-01..06 (popup two modes); SEL-06 updated to route PDF through the menus API; section 13.4 adds a 14-item manual PDF verification checklist; section 15 removes "Firefox内蔵PDF Viewerへの対応" from out-of-scope - Design.md: architecture diagram with the menus path, menu-translation component, menus permission, popup translation-result state machine (idle/starting/streaming/completed/error/cancelled), shared translation state (§9.2), context-menu integration phase, test plan and API audit checklist items (menus permission scope, no PDF Viewer internals) - Security.md: menus permission restricted to selection-context translation; PDF Viewer treated as privileged browser UI (no injection, no wrappedJSObject/cloneInto/exportFunction, no internal DOM access); menus.OnClickData.selectionText treated as untrusted input passing the same validation pipeline; popup result rendering stays textContent-only Background (Phase 2) - translation-service.js (new): the single translation pipeline shared by every entry point - selection validation (type/trim/empty/control chars/max length), prompt building, Ollama request, session/abort, and the shared translation state (requestId, sourceText, translatedText, status, model, error, startedAt, source). "source" is metadata only; a PDF-specific translation engine does not exist - menu-translation.js (new): validates menus.OnClickData.selectionText and starts a sink-less translation observed via GET_POPUP_STATE - message-router.js: routes port translations through the shared service; new runtime messages GET_POPUP_STATE and REGENERATE_LAST; popup-state port handler broadcasts live state (initial push + every chunk/status change) so an open popup shows streaming progress in real time - index.js: registers the selection context menu (contexts: ["selection"] only, no menus.onShown) and calls browser.action.openPopup() synchronously inside the click user gesture, catching failures so a popup-open problem never breaks the translation itself - manifest.json: permissions now ["storage", "menus"] - settings-service.js: __resetCacheForTests hook for test isolation Popup two-mode UI (Phase 3) - popup.html/js/css: mode nav (設定 / 翻訳). Translation mode shows status, model, streaming text (textContent only), user-safe error, and copy (Clipboard API only, no execCommand fallback), regenerate (new requestId reusing the stored source text) and a settings shortcut. Closing the popup never cancels the request; reopening shows the latest text and continues receiving chunks live. Initial mode: active (starting/streaming) translation wins, otherwise the last tab the user picked is restored (storage.local.popupMode, default settings) Fresh-install model auto-selection - translation-service.js ensureModelConfigured(): when storage.model is empty, pick the first model from the running Ollama and persist it before translating, mirroring the popup/options auto-select. A user who never opened any settings UI can translate immediately; when Ollama is unreachable a clear OLLAMA_UNAVAILABLE message is shown User-safe error details - detailForUser(): strips URLs (no internal host names echoed to the UI), caps length at 120 chars, drops full JSON response bodies, and hides meaningless low-level network errors so the popover/popup shows the base message plus at most a short, safe detail Tests: 85 passed, 0 failed - selectionText validation (untrusted input pipeline) - menu selection -> translation -> popup state streaming/completed - empty selection rejected without starting a request - streaming status transitions observed through GET_POPUP_STATE - Ollama unreachable surfaces a user-safe error into popup state - newer request replaces older state (abort semantics) - regenerateLast reuses source text with a fresh requestId - popup-state port receives live broadcasts; wrong port names ignored - fresh-install auto-select persists the first Ollama model - error detail sanitization (URL stripping, length cap, JSON drop) - popup/options smoke tests updated for the two-mode markup - setupRouter resets the shared settings cache for test isolation Docs: README documents the two-mode popup and PDF flow; Testing-Results records automated results and the manual PDF checklist (to be executed). No git-side surprises: this commit was created explicitly on request (requirement 18 of the PDF task had deferred commits until now). --- src/popup/popup.js | 184 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 182 insertions(+), 2 deletions(-) (limited to 'src/popup/popup.js') diff --git a/src/popup/popup.js b/src/popup/popup.js index eb213f5..3bd0cd9 100644 --- a/src/popup/popup.js +++ b/src/popup/popup.js @@ -1,6 +1,11 @@ 'use strict'; -import { LANGUAGES, ERROR_CODES, RUNTIME_MESSAGES } from '../shared/constants.js'; +import { + LANGUAGES, + ERROR_CODES, + RUNTIME_MESSAGES, + POPUP_STATUSES +} from '../shared/constants.js'; import { defaultSettings, sanitizeSettings } from '../shared/settings-schema.js'; const $enabled = /** @type {HTMLInputElement} */ (document.getElementById('enabled-toggle')); @@ -10,9 +15,171 @@ const $modelStatus = /** @type {HTMLParagraphElement} */ (document.getElementByI const $language = /** @type {HTMLSelectElement} */ (document.getElementById('language-select')); const $openOptions = /** @type {HTMLButtonElement} */ (document.getElementById('open-options')); +// Mode navigation + translation result mode elements +const $navSettings = /** @type {HTMLButtonElement} */ (document.getElementById('nav-settings')); +const $navTranslation = /** @type {HTMLButtonElement} */ (document.getElementById('nav-translation')); +const $settingsMode = /** @type {HTMLElement} */ (document.getElementById('settings-mode')); +const $translationMode = /** @type {HTMLElement} */ (document.getElementById('translation-mode')); +const $translationStatus = /** @type {HTMLParagraphElement} */ (document.getElementById('translation-status')); +const $translationMeta = /** @type {HTMLParagraphElement} */ (document.getElementById('translation-meta')); +const $translationText = /** @type {HTMLDivElement} */ (document.getElementById('translation-text')); +const $translationError = /** @type {HTMLParagraphElement} */ (document.getElementById('translation-error')); +const $copyTranslation = /** @type {HTMLButtonElement} */ (document.getElementById('copy-translation')); +const $regenerateTranslation = /** @type {HTMLButtonElement} */ (document.getElementById('regenerate-translation')); +const $openOptionsFromTranslation = /** @type {HTMLButtonElement} */ (document.getElementById('open-options-from-translation')); + /** @type {string[]} current model list for change detection */ let knownModels = []; +// --------------------------------------------------------------------- +// Mode switching +// --------------------------------------------------------------------- + +/** @param {'settings'|'translation'} mode */ +function showMode(mode) { + const translation = mode === 'translation'; + $settingsMode.hidden = translation; + $translationMode.hidden = !translation; + $navSettings.classList.toggle('active', !translation); + $navTranslation.classList.toggle('active', translation); + $navSettings.setAttribute('aria-pressed', String(!translation)); + $navTranslation.setAttribute('aria-pressed', String(translation)); +} + +$navSettings.addEventListener('click', () => { + showMode('settings'); + void persistMode('settings'); +}); +$navTranslation.addEventListener('click', () => { + showMode('translation'); + void persistMode('translation'); + void refreshTranslationState(); +}); + +$openOptionsFromTranslation.addEventListener('click', () => { + browser.runtime.openOptionsPage(); +}); + +/** + * Remember the tab the user picked so the next popup open restores it + * instead of always jumping to the translation tab. + * @param {'settings'|'translation'} mode + */ +async function persistMode(mode) { + try { + await browser.storage.local.set({ popupMode: mode }); + } catch { + // non-fatal + } +} + +// --------------------------------------------------------------------- +// Translation result mode +// --------------------------------------------------------------------- + +const STATUS_LABELS = { + [POPUP_STATUSES.IDLE]: '待機中', + [POPUP_STATUSES.STARTING]: '翻訳を準備中…', + [POPUP_STATUSES.STREAMING]: '受信中…', + [POPUP_STATUSES.COMPLETED]: '完了', + [POPUP_STATUSES.ERROR]: 'エラー', + [POPUP_STATUSES.CANCELLED]: '中断' +}; + +function renderTranslationState(state) { + if (!state || typeof state !== 'object') return; + const status = typeof state.status === 'string' ? state.status : POPUP_STATUSES.IDLE; + const busy = status === POPUP_STATUSES.STARTING || status === POPUP_STATUSES.STREAMING; + + $translationStatus.textContent = STATUS_LABELS[status] || status; + + if (state.model) { + $translationMeta.hidden = false; + $translationMeta.textContent = `Ollama / ${state.model}`; + } else { + $translationMeta.hidden = true; + } + + // Plain-text rendering only (Security.md §7.4). + $translationText.textContent = typeof state.translatedText === 'string' ? state.translatedText : ''; + + if (state.error) { + $translationError.hidden = false; + $translationError.textContent = state.error; + } else { + $translationError.hidden = true; + } + + $copyTranslation.disabled = busy || !(state.translatedText && state.translatedText.length > 0); + $regenerateTranslation.disabled = busy || !state.sourceText; +} + +async function refreshTranslationState() { + try { + const response = await browser.runtime.sendMessage({ type: RUNTIME_MESSAGES.GET_POPUP_STATE }); + if (response && response.ok && response.state) { + renderTranslationState(response.state); + return response.state; + } + } catch { + // background unavailable; leave the current view + } + return null; +} + +// --------------------------------------------------------------------- +// Live state updates: subscribe to the shared background state so an +// open popup receives streaming chunks in real time (Design.md §7.4). +// --------------------------------------------------------------------- + +try { + const statePort = browser.runtime.connect({ name: 'popup-state' }); + statePort.onMessage.addListener((message) => { + if (message && message.type === 'popup-state' && message.state) { + renderTranslationState(message.state); + } + }); + // onDisconnect: popup is closing or the background restarted; nothing to do. +} catch { + // Port may be unavailable in non-extension test contexts; polling in + // refreshTranslationState() still covers the initial state. +} + +$copyTranslation.addEventListener('click', () => { + const text = $translationText.textContent || ''; + if (!text) return; + void (async () => { + try { + await navigator.clipboard.writeText(text); + $translationStatus.textContent = 'コピーしました'; + } catch { + // No execCommand fallback (deprecated): show failure only. + $translationStatus.textContent = 'コピーできませんでした'; + } + })(); +}); + +$regenerateTranslation.addEventListener('click', () => { + void (async () => { + try { + const response = await browser.runtime.sendMessage({ type: RUNTIME_MESSAGES.REGENERATE_LAST }); + if (response && response.ok) { + await refreshTranslationState(); + } else { + $translationError.hidden = false; + $translationError.textContent = '再生成を開始できませんでした。'; + } + } catch { + $translationError.hidden = false; + $translationError.textContent = '再生成を開始できませんでした。'; + } + })(); +}); + +// --------------------------------------------------------------------- +// Settings mode (existing behavior) +// --------------------------------------------------------------------- + function fillLanguages(selected) { $language.textContent = ''; for (const lang of LANGUAGES) { @@ -138,10 +305,23 @@ void (async () => { // If the model list loaded and no model is saved yet, persist the // auto-selected first model so the stored settings match the UI. if (knownModels.length > 0) { - const result = await browser.storage.local.get({ settings: null }); + const result = await browser.storage.local.get({ settings: null, popupMode: null }); const stored = sanitizeSettings(result.settings || defaultSettings()); if (!stored.model) { await persist({ model: $model.value }); } + // Decide the initial mode. Active/recent translation wins; otherwise + // restore the tab the user last picked (default: settings). + const state = await refreshTranslationState(); + const active = state && (state.status === 'starting' || state.status === 'streaming'); + if (active) { + showMode('translation'); + } else if (result.popupMode === 'translation' && state && state.translatedText && state.translatedText.length > 0) { + showMode('translation'); + } else { + showMode('settings'); + } + } else { + showMode('settings'); } })(); \ No newline at end of file -- cgit v1.2.3