diff options
| author | tanaka takashi <isazaka@gmail.com> | 2026-09-01 20:10:20 +0900 |
|---|---|---|
| committer | tanaka takashi <isazaka@gmail.com> | 2026-09-01 20:10:20 +0900 |
| commit | 55e581bab9b600e7c070ec596d3109fc897d2d86 (patch) | |
| tree | 15ca196a1858696c216946dc9608fae613ad6e5f /src/options/options.css | |
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)
Diffstat (limited to 'src/options/options.css')
| -rw-r--r-- | src/options/options.css | 143 |
1 files changed, 143 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 |
