zavage-software/search-with-chatgpt-powered-by-openai-extension
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
459c53ae865c53255ef86e31f86e049642d9e6c9
search-with-chatgpt-powered…/options/options.html
T
golem ff61aff5b9 feat: rewrite the options page for first-time users (#23) 
Rewrites the options page for first-time users without removing any setting. Customization in a lightweight package is what sets this extension apart. Design: `docs/superpowers/specs/2026-10-18-options-page-for-first-time-users-design.md`.

**User-visible changes**
- **Layout:** the description stays as the first line, followed by a **Usage instructions** section and the **Settings** section. Each section has a heading and a divider.
- **Usage instructions:** one labelled line per way to open ChatGPT, each with a small drawing:
  - **Address bar:** `<Ctrl>+L`, then `gpt`, a space and the question. The drawing shows a ChatGPT label because the address-bar code shipped in Firefox 157.0.1 enters search mode when an engine keyword is followed by a space. I checked that in its `omni.ja`, but it still needs confirming on screen; see the checks below.
  - **Right-click:** a drawing of the menu with Ask ChatGPT highlighted.
  - **Keyboard:** key caps for the user's actual shortcut, held down. The line is hidden when no shortcut is set.
  - **Toolbar:** the hovered button with the pointer, its tooltip, the puzzle-piece Extensions button, and a selected heading.
- **Drawings:** they are HTML/CSS and inline SVG, not screenshots, so they follow light and dark themes, stay sharp, and never go stale. They are centred. The package grows from 52.8 KB to 56.5 KB.
- **Settings:**
  - **Right-click menu** (was "Context menu") and **Open ChatGPT in** stay visible.
  - Choosing **Advanced** reveals a drawing of the Ask ChatGPT submenu (Ask normally, Explain, Summarize, Debug code). It lives in the block that only shows for Advanced, so it needs no script.
  - Prompt template, temporary chat and web search move under **More options**, whose heading names them. It opens by itself on load, or when a sync changes one of them, if one of them isn't at its default.
  - **Restore defaults** is right-aligned and red.
- **Bottom of the page:**
  - The keyword/default-engine and keyboard-shortcut notes become collapsed sections with numbered steps.
  - The project links are centred, and stack on narrow panels.
- **Hotkeys:** written as `<Ctrl>+L` and `<Alt>+<Shift>+G`, including the user's actual shortcut. Mac users see `<Cmd>`, `<Option>` and `<Return>`, detected with `runtime.getPlatformInfo`, which needs no permission.
- **Docs:**
  - Keyword wording is corrected in the options page and README: Firefox adds a custom keyword alongside `gpt` instead of replacing it.
  - README and AGENTS.md use the new setting names.
  - AGENTS.md records the keep-every-setting rule, the hotkey format and the "filled in, never sent" copy rule.

These still match the original options design spec: the temporary-chat and web-search wording, and the rule that copy never says the question is sent.

No permission, search URL, privacy or packaging changes.

**Checks**
- `npm test`: lint 0 errors / 0 warnings, 61/61 unit tests, build OK.
- New tests:
  - the key formatter, including the Mac names Firefox stores (Command, MacCtrl, Alt)
  - the page's written hotkeys match the formatter
  - the keyboard drawing's key caps follow the live shortcut
- Rendered in headless Firefox 157 with the extension APIs stubbed:
  - light and dark themes
  - 680 px and 360 px wide
  - Mac key names
  - More options opening for a customised prompt template
  - both bottom sections expanded

**Manual Firefox checks (`npm run dev` → about:addons → Preferences)**
- [x] Typing `gpt` and a space shows a ChatGPT label in the address bar, as drawn. If it doesn't, the drawing drops the label and shows plain `gpt how do magnets work?`
- [x] Light and dark themes, and a narrow about:addons width
- [x] Expanding More options and the two bottom sections grows the inline panel without clipping or scrolling
- [x] The Keyboard line and its key caps disappear when the shortcut is removed, and come back showing the new keys when one is set
- [x] More options opens by itself after changing the prompt template and reopening the page
- [x] Choosing Advanced shows the submenu drawing; Simple and Off hide it
- [x] Settings still save, and Restore defaults still works

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed-on: https://git.zavage.net/Zavage-Software/search-with-chatgpt-powered-by-openai-extension/pulls/23
Co-authored-by: golem <golem@zavage.net>
2026-10-18 22:53:27 -06:00

236 lines
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<!-- Rendered inline inside about:addons. Keep it narrow-friendly and do not
rely on window sizing; a pref can degrade this to a standalone tab. -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Search with ChatGPT — Options</title>
<link rel="stylesheet" href="options.css" />
<p class="intro">
This extension adds <a href="https://chatgpt.com/" target="_blank" rel="noopener noreferrer">ChatGPT</a> as a Firefox search engine.
</p>
<section class="usage" aria-labelledby="usage-title">
<h2 id="usage-title">Usage instructions</h2>
<!-- Hotkeys are written <Ctrl>+L: named keys in angle brackets, letters plain.
shortcut.js rewrites each [data-shortcut] for the user's platform. The
drawings are decorative; the text beside them carries the instructions. -->
<ul class="ways">
<li>
<strong>Address bar:</strong> press <kbd data-shortcut="Ctrl+L">&lt;Ctrl&gt;+L</kbd>,
type <code>gpt</code> and a space, then your question, and press
<kbd data-shortcut="Enter">&lt;Enter&gt;</kbd>.
<div class="drawing" aria-hidden="true">
<div class="drawing-urlbar">
<span class="drawing-chip"><img src="../icons/powered-by-openai-icon-16x16.png" srcset="../icons/powered-by-openai-icon-32x32.png 2x" alt="" />ChatGPT</span>
<span class="drawing-typed">how do magnets work?</span>
</div>
</div>
</li>
<li>
<strong>Right-click:</strong> select text on a webpage, right-click it, and
choose <strong>Ask ChatGPT</strong>.
<div class="drawing" aria-hidden="true">
<p class="drawing-page">Fridge <mark>magnets stick</mark> to steel because…</p>
<div class="drawing-menu">
<div>Copy</div>
<div>Select All</div>
<hr />
<div class="drawing-menu-active"><img src="../icons/powered-by-openai-icon-16x16.png" srcset="../icons/powered-by-openai-icon-32x32.png 2x" alt="" />Ask ChatGPT</div>
</div>
</div>
</li>
<li id="shortcut-intro" hidden>
<strong>Keyboard:</strong> select text and press <kbd id="shortcut-intro-key"></kbd>.
With nothing selected, it opens a blank chat.
<div class="drawing" aria-hidden="true">
<div class="drawing-keycaps" id="shortcut-keycaps"></div>
</div>
</li>
<li>
<strong>Toolbar:</strong> select text and click the
<img class="inline-icon" src="../icons/powered-by-openai-icon-16x16.png" srcset="../icons/powered-by-openai-icon-32x32.png 2x" alt="" />
<strong>Ask ChatGPT</strong> button. With nothing selected, it opens a
blank chat. Can’t see the button? Look in the puzzle-piece Extensions menu.
<div class="drawing" aria-hidden="true">
<div class="drawing-toolbar">
<span class="drawing-address">example.com</span>
<span class="drawing-button">
<svg viewBox="0 0 16 16"><path d="M2 5.5h3a2 2 0 1 1 3.2 0h3.3v2.8a2 2 0 1 1 0 3.2v3H2z" /></svg>
</span>
<span class="drawing-button drawing-button-hover">
<img src="../icons/powered-by-openai-icon-16x16.png" srcset="../icons/powered-by-openai-icon-32x32.png 2x" alt="" />
<svg class="drawing-pointer" viewBox="0 0 12 18"><path d="M1 1v14.5l3.6-3.4 2.6 5.6 2.2-1-2.6-5.5H11z" /></svg>
</span>
<span class="drawing-button">
<svg viewBox="0 0 16 16"><path d="M3 4.5h10M3 8h10M3 11.5h10" /></svg>
</span>
<span class="drawing-tooltip">Ask ChatGPT</span>
</div>
<p class="drawing-content"><mark>Why fridge magnets stick</mark></p>
</div>
</li>
</ul>
<p class="hint intro-hint">
ChatGPT opens with your text filled in. If it isn’t sent automatically, press
<kbd data-shortcut="Enter">&lt;Enter&gt;</kbd> or click Send. ChatGPT may ask you to sign in first.
</p>
</section>
<section class="settings" aria-labelledby="settings-title">
<h2 id="settings-title">Settings</h2>
<p class="hint settings-scope">
These apply to the right-click menu, toolbar button, and keyboard shortcut.
Typing <code>gpt</code> in the address bar isn’t affected.
</p>
<form id="settings" autocomplete="off">
<div class="field">
<label for="contextMenuMode">Right-click menu</label>
<select id="contextMenuMode">
<option value="off">Off</option>
<option value="simple">Simple</option>
<option value="advanced">Advanced</option>
</select>
<p class="hint">
Simple shows Ask ChatGPT. Advanced adds Explain, Summarize, Debug code,
and more. With Off, the toolbar button and keyboard shortcut still work.
</p>
</div>
<div id="advanced-settings" class="dependent-settings" hidden>
<!-- Shown only with Advanced, so the drawing previews what it adds. -->
<div class="drawing drawing-advanced" aria-hidden="true">
<div class="drawing-menus">
<div class="drawing-menu">
<div>Copy</div>
<div>Select All</div>
<hr />
<div class="drawing-menu-active"><img src="../icons/powered-by-openai-icon-16x16.png" srcset="../icons/powered-by-openai-icon-32x32.png 2x" alt="" />Ask ChatGPT<span class="drawing-submenu-arrow">›</span></div>
</div>
<div class="drawing-menu drawing-submenu">
<div>Ask normally</div>
<hr />
<div class="drawing-menu-active">Explain</div>
<div>Summarize</div>
<div>Debug code</div>
</div>
</div>
</div>
<div class="field checkbox">
<label><input type="checkbox" id="showTranslate"> Show Translate in the Advanced menu</label>
</div>
<div id="translation-settings" hidden>
<div class="field">
<label for="translationMode">Translate into</label>
<select id="translationMode">
<option value="ask">Ask each time</option>
<option value="preferred">Preferred language</option>
</select>
<p class="hint">Ask each time opens a language dialog. A preferred language opens ChatGPT directly.</p>
</div>
<div class="field" id="preferred-language-field" hidden>
<label for="translationLanguage">Preferred language</label>
<input type="text" id="translationLanguage" placeholder="For example, Spanish" aria-describedby="language-validation">
<p class="hint" id="language-validation" aria-live="polite"></p>
</div>
</div>
</div>
<div class="field">
<label for="openIn">Open ChatGPT in</label>
<select id="openIn">
<option value="new-tab">A new tab</option>
<option value="background-tab">A new background tab</option>
<option value="new-window">A new window</option>
</select>
</div>
<!-- Opens on load when one of these differs from its default (options.js),
so a customised setting never looks lost. -->
<details id="more-options" class="more-options">
<summary>More options: <span class="summary-detail">prompt template, temporary chat, web search</span></summary>
<div class="field">
<label for="promptTemplate">Prompt template</label>
<input type="text" id="promptTemplate" spellcheck="false" maxlength="1000" />
<p class="hint">
<code>{query}</code> is replaced with your selected text, as in
<code>Explain simply: {query}</code>. Used by Ask ChatGPT, Ask normally,
the toolbar button, and the keyboard shortcut; other Advanced actions
such as Summarize use their own prompts. Up to 1,000 characters.
</p>
</div>
<div class="field checkbox">
<label><input type="checkbox" id="temporaryChat" /> Request a temporary chat</label>
<p class="hint">
ChatGPT may not honour this. Check ChatGPT's own indicator before sending
anything sensitive.
</p>
</div>
<div class="field checkbox">
<label><input type="checkbox" id="webSearch" /> Ask ChatGPT to use web search (hint only)</label>
<p class="hint">A hint to ChatGPT's interface, not a guarantee.</p>
</div>
</details>
<div class="actions">
<button type="button" id="restore" class="danger">Restore defaults</button>
<span id="status" role="status" aria-live="polite"></span>
</div>
</form>
</section>
<details class="note">
<summary>Use your own keyword or make ChatGPT your default search engine</summary>
<ol>
<li>
Open Firefox’s <strong>Settings → Search</strong>, or paste
<code>about:preferences#search</code> into the address bar.
</li>
<li>
Under <strong>Search Shortcuts</strong>, edit ChatGPT’s keyword to add
your own. <code>gpt</code> keeps working too.
</li>
<li>
Under <strong>Default Search Engine</strong>, choose ChatGPT to use it
without typing <code>gpt</code>. Choose your previous engine there to
switch back.
</li>
</ol>
<p>
These are Firefox settings, so <strong>Restore defaults</strong> doesn’t
change them.
<a href="https://support.mozilla.org/en-US/kb/change-your-default-search-settings-firefox" target="_blank" rel="noopener noreferrer">Firefox search settings guide</a>
</p>
</details>
<details class="note">
<summary>Change the keyboard shortcut</summary>
<p id="shortcut-current" role="status" aria-live="polite">Checking keyboard shortcut…</p>
<button type="button" id="change-shortcut" hidden>Change keyboard shortcut</button>
<p class="hint">
Or open Add-ons, click the gear menu, and choose
<em>Manage Extension Shortcuts</em>. <strong>Restore defaults</strong>
doesn’t change your shortcut.
</p>
</details>
<nav class="project-links" aria-label="Project links">
<a href="https://zavage-software.com/portfolio/search-with-ChatGPT" target="_blank" rel="noopener noreferrer">Project website</a>
<span class="project-link">
<span class="link-separator" aria-hidden="true">|</span>
<a href="https://git-repos.zavage.net/zavage-software/search-with-chatgpt-powered-by-openai-extension" target="_blank" rel="noopener noreferrer">Source code</a>
</span>
<span class="project-link">
<span class="link-separator" aria-hidden="true">|</span>
<a href="https://zavage-software.com/contact-us" target="_blank" rel="noopener noreferrer">Feedback or report a bug</a>
</span>
</nav>
<script type="module" src="options.js"></script>
Reference in New Issue View Git Blame Copy Permalink