search-with-chatgpt-powered-by-openai-extension/options/options.html

<!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. 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>
</p>

<p class="intro">
  Click the <strong>Ask ChatGPT</strong> toolbar button to ask about selected
  text, or open a blank chat when nothing is selected. The button works in
  every context-menu mode and follows your settings below.
</p>

<p class="intro">
  ChatGPT may require you to sign in. If your prompt is not sent automatically,
  press <strong>Enter</strong> or click <strong>Send</strong> in ChatGPT.
</p>

<form id="settings" autocomplete="off">
  <div class="field">
    <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">
    <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>

  <div class="field">
    <label for="openIn">Open 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>

  <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. Used by Ask normally, Simple mode, the toolbar button, and the keyboard shortcut. Other advanced actions use their own prompts.</p>
  </div>

  <div class="actions">
    <button type="button" id="restore">Restore defaults</button>
    <span id="status" role="status" aria-live="polite"></span>
  </div>
</form>

<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, toolbar button, 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>