feat: Firefox selection translation extension with local Ollama (initial version)

Implement the complete initial version of a Firefox WebExtension (Manifest V3)
that translates selected text on web pages using a local Ollama LLM and shows
the result in a small popover near the selection.

Specification alignment (Phase 0)
- Unified Specifications.md / Design.md / Security.md on the same approach:
  Ollama REST API + Fetch API + NDJSON streaming (no ollama-js SDK dependency)
- Fixed host_permissions to http://localhost/* and http://127.0.0.1/* because
  Firefox match patterns do not support port numbers (bug 1362809/1468162);
  the actual connection target is restricted to localhost/127.0.0.1 + any port
  by application-side validation (defense in depth, OLL-09)
- Clipboard: use navigator.clipboard.writeText() only inside the copy button
  click (user activation); no deprecated execCommand fallback

Implementation (zero dependencies, vanilla JS, no npm/Node required)
- manifest.json: MV3, background.scripts + type:module (event page, no
  service_worker), action popup, options_ui, content_scripts for http/https,
  permissions: storage + localhost host permissions only
- src/shared: constants (ports, limits, presets, error codes), message
  validation, settings schema (defaults / merge / sanitize / buildOptions /
  toApiThinking), system prompt builder (fixed prompt first + user prompt)
- src/background: message-router (runtime.Port streaming + runtime.onMessage
  for model list), translation-session (single active request, abort previous
  on new request, stale chunk suppression), ollama-client (fetch against
  /api/tags and /api/chat with buffering NDJSON line parser tolerant to chunk
  boundaries inside JSON objects, AbortController, host re-validation before
  every request, HTTP status to error-code mapping), settings-service
  (storage.local load/save with validation and fallback to defaults)
- src/content/content.js: single classic script (Firefox does not support ES
  modules in content scripts) with selection detection (selectionchange +
  mouseup + keyup, debounced), Shadow DOM action button, Shadow DOM popover
  with HIDDEN/LOADING/STREAMING/COMPLETED/ERROR state machine, port client
  with requestId-based stale chunk filtering, enabled-state sync via
  storage.onChanged; all dynamic text rendered via textContent only
- src/popup + src/options: full settings UI (enable toggle, Ollama host,
  model list from Ollama with saved-model warning, target language, thinking
  mode, temperature slider 0.0-2.0 step 0.1, context length presets
  4k/8k/16k/32k/128k/256k, seed random/fixed with integer value, user system
  prompt, advanced numeric options with steppers, stop sequences textarea)
- icons generated by tools/make-icons.ps1 (System.Drawing, no external tools)
- build.ps1 packages manifest.json + icons/ + src/ into dist zip, excluding
  tests/, doc/, ollama-js/ and tools/

Tests (71 passed, 0 failed)
- In-browser test runner (tests/test.html) with custom describe/it/assert
  framework; no npm, no Node.js
- Unit: constants sync between content mirror and shared module, Ollama host
  validation (localhost/127.0.0.1 + any port only; rejects external hosts,
  LAN IPs, https, credentials, paths), settings schema defaults and fallback,
  temperature 0.1-step validation, context length presets, seed modes,
  advanced option types, buildOptions omission of unset values and absence of
  tfs_z/mirostat fields, system prompt composition order, message validation
  with selection length boundary values
- Integration: NDJSON streaming across awkward byte boundaries, thinking
  chunk forwarding, malformed line tolerance, error payload mapping, think/
  options inclusion rules, model list, TranslationSession abort semantics,
  settings round-trip with storage.onChanged cache refresh, full port flow
  (started/chunk/completed), newer request aborts older with stale chunk
  discard, malformed message rejection, OLLAMA_UNAVAILABLE and
  INVALID_SETTINGS error paths, untrusted sender rejection

Security audit (Design.md section 24 checklist: all pass)
- No innerHTML/outerHTML/document.write/eval/new Function/localStorage
- No remote JS/CSS/fonts/CDN resources; no inline scripts in extension pages
- Ollama access limited to background; content scripts never fetch Ollama
- Background validates message type/length/requestId; single concurrent
  translation enforced
- Clipboard API only (no execCommand fallback)
- Minimal permissions: storage + localhost host permissions

Docs
- README.md with build/load/usage instructions, API list, permission rationale
- doc/Testing-Results.md with automated test results, security audit results,
  and a 14-item manual Firefox verification checklist (to be executed on a
  real Firefox + Ollama environment)

3 files changed, 497 insertions, 0 deletions

diff --git a/src/options/options.css b/src/options/options.css
new file mode 100644
index 0000000..7de8418
--- /dev/null
+++ b/src/options/options.css
@@ -0,0 +1,143 @@
+body {
+  margin: 0;
+  padding: 24px;
+  font-family: system-ui, sans-serif;
+  font-size: 14px;
+  color: #1f1f1f;
+  background: #fafafa;
+}
+
+main {
+  max-width: 640px;
+  margin: 0 auto;
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  padding: 20px 24px;
+}
+
+h1 {
+  font-size: 18px;
+  margin: 0 0 16px;
+}
+
+fieldset {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  margin: 0 0 16px;
+  padding: 12px 16px;
+}
+
+legend {
+  font-weight: 600;
+  padding: 0 6px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 14px;
+}
+
+.field.inline {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+label,
+.label-text {
+  font-weight: 500;
+}
+
+.hint {
+  color: #5f6368;
+  font-size: 11px;
+  margin: 2px 0 0;
+}
+
+.status {
+  color: #5f6368;
+  font-size: 12px;
+}
+
+.status.error {
+  color: #c5221f;
+}
+
+input[type='text'],
+input[type='number'],
+select,
+textarea {
+  font-family: system-ui, sans-serif;
+  font-size: 13px;
+  padding: 4px 6px;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+}
+
+textarea {
+  resize: vertical;
+}
+
+.inline {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.inline select {
+  flex: 1;
+  min-width: 0;
+}
+
+.inline input[type='number'] {
+  width: 120px;
+}
+
+.segmented {
+  display: flex;
+  gap: 12px;
+  margin: 4px 0;
+}
+
+.segmented label {
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+#seed-value-row {
+  margin-top: 4px;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+#save {
+  padding: 6px 24px;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+  background: #1a73e8;
+  color: #fff;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+#save:hover {
+  background: #1765cc;
+}
+
+.dev-link {
+  margin-top: 16px;
+  font-size: 11px;
+}
+
+.dev-link a {
+  color: #5f6368;
+}
\ No newline at end of file
diff --git a/src/options/options.html b/src/options/options.html
new file mode 100644
index 0000000..b60e66b
--- /dev/null
+++ b/src/options/options.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="utf-8">
+  <title>Ollama Translations - 設定</title>
+  <link rel="stylesheet" href="options.css">
+</head>
+<body>
+  <main>
+    <h1>Ollama Translations 設定</h1>
+
+    <form id="options-form" novalidate>
+      <fieldset>
+        <legend>基本設定</legend>
+
+        <div class="field">
+          <label class="switch-label">
+            <input type="checkbox" id="enabled" role="switch">
+            翻訳機能を有効にする
+          </label>
+        </div>
+
+        <div class="field">
+          <label for="ollama-host">Ollama Host</label>
+          <input type="text" id="ollama-host" placeholder="http://localhost:11434" spellcheck="false">
+          <p class="hint">初期版では http://localhost:&lt;port&gt; / http://127.0.0.1:&lt;port&gt; のみ接続できます。</p>
+        </div>
+
+        <div class="field">
+          <label for="model">Model</label>
+          <div class="inline">
+            <select id="model"></select>
+            <button type="button" id="reload-models">再取得</button>
+          </div>
+          <p id="model-status" class="status" hidden></p>
+        </div>
+
+        <div class="field">
+          <label for="target-language">翻訳先言語</label>
+          <select id="target-language"></select>
+        </div>
+
+        <div class="field">
+          <label for="thinking">Thinking</label>
+          <select id="thinking">
+            <option value="off">off</option>
+            <option value="on">on</option>
+            <option value="low">low</option>
+            <option value="medium">medium</option>
+            <option value="high">high</option>
+          </select>
+        </div>
+
+        <div class="field">
+          <label for="temperature">Temperature: <output id="temperature-value">0.2</output></label>
+          <input type="range" id="temperature" min="0" max="2" step="0.1" value="0.2">
+        </div>
+
+        <div class="field">
+          <label for="context-length">Context Length: <output id="context-length-value">16k</output></label>
+          <input type="range" id="context-length" min="0" max="5" step="1">
+          <p class="hint">4k / 8k / 16k / 32k / 128k / 256k</p>
+        </div>
+
+        <div class="field">
+          <span class="label-text">Seed</span>
+          <div class="segmented" role="radiogroup" aria-label="Seed mode">
+            <label><input type="radio" name="seed-mode" value="random"> 可変</label>
+            <label><input type="radio" name="seed-mode" value="fixed"> 固定</label>
+          </div>
+          <div class="inline" id="seed-value-row" hidden>
+            <label for="seed-value">固定値</label>
+            <input type="number" id="seed-value" step="1" placeholder="42">
+          </div>
+        </div>
+
+        <div class="field">
+          <label for="user-system-prompt">ユーザー用システムプロンプト</label>
+          <textarea id="user-system-prompt" rows="3" placeholder="例: カジュアルな口調で訳してください"></textarea>
+          <p class="hint">アプリ固定プロンプトと結合して送信されます。</p>
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend>詳細設定（未設定項目は送信されません）</legend>
+        <div id="advanced-fields"></div>
+
+        <div class="field">
+          <label for="stop">stop（1行に1シーケンス）</label>
+          <textarea id="stop" rows="3" placeholder="例: &lt;END&gt;"></textarea>
+        </div>
+      </fieldset>
+
+      <div class="actions">
+        <button type="submit" id="save">保存</button>
+        <span id="save-status" class="status" role="status"></span>
+      </div>
+    </form>
+
+    <p class="dev-link"><a href="../../tests/test.html" target="_blank" rel="noreferrer">開発者向け: テストを実行</a></p>
+  </main>
+  <script src="options.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/options/options.js b/src/options/options.js
new file mode 100644
index 0000000..606291b
--- /dev/null
+++ b/src/options/options.js
@@ -0,0 +1,250 @@
+'use strict';
+
+import { LANGUAGES, ERROR_CODES, RUNTIME_MESSAGES } from '../shared/constants.js';
+import {
+  defaultSettings,
+  sanitizeSettings,
+  CONTEXT_PRESETS,
+  isValidOllamaHost
+} from '../shared/settings-schema.js';
+
+const $form = /** @type {HTMLFormElement} */ (document.getElementById('options-form'));
+const $enabled = /** @type {HTMLInputElement} */ (document.getElementById('enabled'));
+const $host = /** @type {HTMLInputElement} */ (document.getElementById('ollama-host'));
+const $model = /** @type {HTMLSelectElement} */ (document.getElementById('model'));
+const $reloadModels = /** @type {HTMLButtonElement} */ (document.getElementById('reload-models'));
+const $modelStatus = /** @type {HTMLParagraphElement} */ (document.getElementById('model-status'));
+const $language = /** @type {HTMLSelectElement} */ (document.getElementById('target-language'));
+const $thinking = /** @type {HTMLSelectElement} */ (document.getElementById('thinking'));
+const $temperature = /** @type {HTMLInputElement} */ (document.getElementById('temperature'));
+const $temperatureValue = /** @type {HTMLOutputElement} */ (document.getElementById('temperature-value'));
+const $contextLength = /** @type {HTMLInputElement} */ (document.getElementById('context-length'));
+const $contextLengthValue = /** @type {HTMLOutputElement} */ (document.getElementById('context-length-value'));
+const $seedRandom = /** @type {HTMLInputElement} */ (document.querySelector('input[name="seed-mode"][value="random"]'));
+const $seedFixed = /** @type {HTMLInputElement} */ (document.querySelector('input[name="seed-mode"][value="fixed"]'));
+const $seedValueRow = /** @type {HTMLDivElement} */ (document.getElementById('seed-value-row'));
+const $seedValue = /** @type {HTMLInputElement} */ (document.getElementById('seed-value'));
+const $userPrompt = /** @type {HTMLTextAreaElement} */ (document.getElementById('user-system-prompt'));
+const $advancedFields = /** @type {HTMLDivElement} */ (document.getElementById('advanced-fields'));
+const $stop = /** @type {HTMLTextAreaElement} */ (document.getElementById('stop'));
+const $saveStatus = /** @type {HTMLSpanElement} */ (document.getElementById('save-status'));
+
+/** Advanced numeric fields: id, label, step. */
+const ADVANCED_FIELDS = [
+  { id: 'numKeep', label: 'num_keep', step: '1', placeholder: '4' },
+  { id: 'numPredict', label: 'num_predict', step: '1', placeholder: '-1' },
+  { id: 'topK', label: 'top_k', step: '1', placeholder: '40' },
+  { id: 'topP', label: 'top_p', step: '0.05', placeholder: '0.9' },
+  { id: 'minP', label: 'min_p', step: '0.01', placeholder: '0.05' },
+  { id: 'typicalP', label: 'typical_p', step: '0.05', placeholder: '1.0' },
+  { id: 'repeatLastN', label: 'repeat_last_n', step: '1', placeholder: '64' },
+  { id: 'repeatPenalty', label: 'repeat_penalty', step: '0.05', placeholder: '1.1' },
+  { id: 'presencePenalty', label: 'presence_penalty', step: '0.05', placeholder: '0.0' },
+  { id: 'frequencyPenalty', label: 'frequency_penalty', step: '0.05', placeholder: '0.0' }
+];
+
+const CONTEXT_LABELS = ['4k', '8k', '16k', '32k', '128k', '256k'];
+
+/** @type {string[]} */
+let knownModels = [];
+
+// Build advanced inputs dynamically.
+const advancedInputs = new Map();
+for (const field of ADVANCED_FIELDS) {
+  const wrapper = document.createElement('div');
+  wrapper.className = 'field inline';
+
+  const label = document.createElement('label');
+  label.setAttribute('for', `adv-${field.id}`);
+  label.textContent = field.label;
+
+  const input = document.createElement('input');
+  input.type = 'number';
+  input.id = `adv-${field.id}`;
+  input.step = field.step;
+  input.placeholder = field.placeholder;
+
+  wrapper.append(label, input);
+  $advancedFields.append(wrapper);
+  advancedInputs.set(field.id, input);
+}
+
+function contextIndex(value) {
+  const index = CONTEXT_PRESETS.indexOf(value);
+  return index === -1 ? 2 : index;
+}
+
+function showStatus(message, isError) {
+  $modelStatus.hidden = false;
+  $modelStatus.textContent = message;
+  $modelStatus.classList.toggle('error', Boolean(isError));
+}
+
+function fillModels(models, selected) {
+  $model.textContent = '';
+  if (models.length === 0) {
+    const option = document.createElement('option');
+    option.value = '';
+    option.textContent = '（モデルなし / Ollama未起動）';
+    $model.append(option);
+  }
+  for (const name of models) {
+    const option = document.createElement('option');
+    option.value = name;
+    option.textContent = name;
+    if (name === selected) option.selected = true;
+    $model.append(option);
+  }
+  if (selected && !models.includes(selected)) {
+    const option = document.createElement('option');
+    option.value = selected;
+    option.textContent = `${selected}（保存済み・一覧にありません）`;
+    option.selected = true;
+    $model.append(option);
+    showStatus('保存済みモデルがOllama上に見つかりません。', true);
+  }
+}
+
+async function loadModels(selected) {
+  showStatus('モデル一覧を取得中…', false);
+  try {
+    const response = await browser.runtime.sendMessage({ type: RUNTIME_MESSAGES.LIST_MODELS });
+    if (response && response.ok && Array.isArray(response.models)) {
+      knownModels = response.models;
+      if (response.models.length === 0) {
+        showStatus('モデルが見つかりません。Ollamaでモデルをpullしてください。', true);
+      } else {
+        $modelStatus.hidden = true;
+      }
+    } else if (response && response.error === ERROR_CODES.OLLAMA_UNAVAILABLE) {
+      knownModels = [];
+      showStatus('Ollamaに接続できません。起動しているか確認してください。', true);
+    } else {
+      knownModels = [];
+      showStatus('モデル一覧の取得に失敗しました。', true);
+    }
+  } catch {
+    knownModels = [];
+    showStatus('モデル一覧の取得に失敗しました。', true);
+  }
+  fillModels(knownModels, selected || '');
+}
+
+function applySettings(settings) {
+  $enabled.checked = Boolean(settings.enabled);
+  $host.value = settings.ollamaHost;
+  $language.value = settings.targetLanguage;
+  $thinking.value = settings.thinking;
+  $temperature.value = String(settings.temperature);
+  $temperatureValue.textContent = settings.temperature.toFixed(1);
+  $contextLength.value = String(contextIndex(settings.contextLength));
+  $contextLengthValue.textContent = CONTEXT_LABELS[contextIndex(settings.contextLength)];
+  if (settings.seedMode === 'fixed') {
+    $seedFixed.checked = true;
+  } else {
+    $seedRandom.checked = true;
+  }
+  $seedValueRow.hidden = !$seedFixed.checked;
+  $seedValue.value = settings.seedValue === null || settings.seedValue === undefined ? '' : String(settings.seedValue);
+  $userPrompt.value = settings.userSystemPrompt;
+  for (const [key, input] of advancedInputs.entries()) {
+    const value = settings.advanced[key];
+    input.value = value === null || value === undefined ? '' : String(value);
+  }
+  $stop.value = (settings.advanced.stop || []).join('\n');
+  fillModels(knownModels, settings.model);
+}
+
+async function loadSettings() {
+  const result = await browser.storage.local.get({ settings: null });
+  const settings = result.settings || defaultSettings();
+  applySettings(settings);
+  await loadModels(settings.model);
+}
+
+function readForm() {
+  const advanced = {};
+  for (const [key, input] of advancedInputs.entries()) {
+    const raw = input.value.trim();
+    advanced[key] = raw === '' ? null : Number(raw);
+  }
+  const stopRaw = $stop.value;
+  const stop = stopRaw
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
+
+  return {
+    enabled: $enabled.checked,
+    ollamaHost: $host.value.trim(),
+    model: $model.value,
+    targetLanguage: $language.value,
+    thinking: $thinking.value,
+    temperature: Number($temperature.value),
+    contextLength: CONTEXT_PRESETS[Number($contextLength.value)],
+    seedMode: $seedFixed.checked ? 'fixed' : 'random',
+    seedValue: $seedFixed.checked ? Math.trunc(Number($seedValue.value)) : null,
+    userSystemPrompt: $userPrompt.value,
+    advanced: { ...advanced, stop }
+  };
+}
+
+$temperature.addEventListener('input', () => {
+  $temperatureValue.textContent = Number($temperature.value).toFixed(1);
+});
+
+$contextLength.addEventListener('input', () => {
+  $contextLengthValue.textContent = CONTEXT_LABELS[Number($contextLength.value)] || '';
+});
+
+for (const radio of [$seedRandom, $seedFixed]) {
+  radio.addEventListener('change', () => {
+    $seedValueRow.hidden = !$seedFixed.checked;
+  });
+}
+
+$reloadModels.addEventListener('click', () => {
+  void loadModels($model.value);
+});
+
+$form.addEventListener('submit', (event) => {
+  event.preventDefault();
+  const host = $host.value.trim();
+  if (!isValidOllamaHost(host)) {
+    $saveStatus.textContent = 'Ollama Hostが不正です。http://localhost:<port> 形式で指定してください。';
+    $saveStatus.classList.add('error');
+    return;
+  }
+  const raw = readForm();
+  const validated = sanitizeSettings(raw);
+  // Report fields that were sanitized (fell back to defaults).
+  const warnings = [];
+  if (validated.temperature !== raw.temperature) warnings.push('Temperature');
+  if (!CONTEXT_PRESETS.includes(raw.contextLength)) warnings.push('Context Length');
+  if (validated.seedMode !== raw.seedMode) warnings.push('Seed モード');
+  if (validated.seedMode === 'fixed' && validated.seedValue !== raw.seedValue) warnings.push('Seed 値');
+  for (const key of advancedInputs.keys()) {
+    if (validated.advanced[key] !== raw.advanced[key] && raw.advanced[key] !== null) {
+      warnings.push(key);
+    }
+  }
+
+  void (async () => {
+    await browser.storage.local.set({ settings: validated });
+    if (warnings.length > 0) {
+      $saveStatus.textContent = `保存しました（修正された項目: ${warnings.join(', ')}）`;
+    } else {
+      $saveStatus.textContent = '保存しました。';
+    }
+    $saveStatus.classList.remove('error');
+  })();
+});
+
+for (const language of LANGUAGES) {
+  const option = document.createElement('option');
+  option.value = language.code;
+  option.textContent = language.label;
+  $language.append(option);
+}
+
+void loadSettings();
\ No newline at end of file