feat: add advanced context actions and optional translation

options/options.html

@@ -6,16 +6,44 @@
 <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. Type
+  <code>gpt your question</code> in the address bar, select text on a webpage and
+  choose <strong>Ask ChatGPT</strong> from the right-click menu.<span id="shortcut-intro"></span> If the prompt isn’t sent automatically, press Enter in
+  ChatGPT.
+</p>
+
 <form id="settings" autocomplete="off">
   <div class="field">
-    <label for="model">Model <span class="tag">experimental</span></label>
-    <!-- maxlength is set from MAX_MODEL_CHARS in options.js, so the input and
-         mergeSettings() can never disagree about the bound. -->
-    <input type="text" id="model" placeholder="auto" spellcheck="false" />
-    <p class="hint">
-      ChatGPT may ignore this and use your account default. Leave blank to
-      always use your account default.
-    </p>
+    <label for="contextMenuMode">Context 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 asks about selected text. Advanced adds Explain, Summarize, Debug code, and link/page actions.</p>
+    <p class="hint" id="shortcut-hint">The keyboard shortcut always runs your default action.</p>
+  </div>
+
+  <div id="advanced-settings" class="dependent-settings" hidden>
+    <div class="field checkbox">
+      <label><input type="checkbox" id="showTranslate"> Show Translate in 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 checkbox">
@@ -43,7 +71,7 @@
   <div class="field">
     <label for="promptTemplate">Prompt template</label>
     <input type="text" id="promptTemplate" spellcheck="false" />
-    <p class="hint"><code>{query}</code> is replaced with your selected text.</p>
+    <p class="hint"><code>{query}</code> is replaced with your selected text. Used by Ask normally, Simple mode, and the keyboard shortcut. Other advanced actions use their own prompts.</p>
   </div>
 
   <div class="actions">
@@ -52,12 +80,45 @@
   </div>
 </form>
 
-<p class="note">
-  Selecting text and choosing <strong>Ask ChatGPT</strong> — or pressing
-  <kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>G</kbd> — opens ChatGPT with your text
-  filled in. ChatGPT no longer submits prompts that arrive from a link, so press
-  Enter there to send. Change the shortcut under
-  <em>Manage Extension Shortcuts</em> in Add-ons.
-</p>
+<section class="note" aria-labelledby="search-settings-title">
+  <h2 id="search-settings-title">Search keyword and default engine</h2>
+  <p>
+    Open Firefox’s <strong>Settings → Search</strong>, or paste
+    <code>about:preferences#search</code> into the address bar.
+    Under <strong>Search Shortcuts</strong>, edit ChatGPT’s keyword to change
+    <code>gpt</code>. Under <strong>Default Search Engine</strong>, choose
+    ChatGPT to use it for address-bar searches without a prefix. Choose your
+    previous engine there to switch back.
+    <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>
+  <p>
+    The settings above apply to the right-click menu and keyboard shortcut;
+    address-bar searches use Firefox’s search engine settings.
+    Restore defaults only resets extension settings, including the prompt
+    template; it does not change Firefox’s search engine or keyboard shortcut.
+  </p>
+</section>
+
+<section class="note" aria-labelledby="shortcut-title">
+  <h2 id="shortcut-title">Keyboard shortcut</h2>
+  <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">
+    You can also open Add-ons, then the gear menu →
+    <em>Manage Extension Shortcuts</em> to change or remove the shortcut.
+  </p>
+</section>
+
+<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>