docs: AMO listing: add screenshots and a description that covers every way to use the extension (#24)

docs/amo/README.md holds a paste-ready summary, description and screenshot
captions for the 1.3 listing. The copy covers the address bar, right-click,
keyboard shortcut and toolbar button, says the extension is small on
purpose, and follows the "filled in, never sent" copy rule. A cat joke
replaces the programmer joke.

The five 1280x800 images are the options page's drawings, enlarged by
docs/amo/screenshots.html and rendered with headless Firefox. The README
explains how to regenerate them. docs/ stays out of the package.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/amo/README.md

@@ -0,0 +1,96 @@
+# Add-ons listing
+
+Paste-ready text and images for the
+[addons.mozilla.org listing](https://addons.mozilla.org/en-US/firefox/addon/search-with-chatgpt/).
+Edit them in the AMO Developer Hub under the add-on's listing details.
+
+Listing copy follows the copy rule in the
+[options design](../superpowers/specs/2026-07-29-extension-options-design.md):
+ChatGPT opens with the text *filled in*. Never say the text is sent, searched,
+or asked. Keep "private", "incognito", and "secure" away from temporary chat,
+and call temporary chat and web search hints.
+
+## Summary
+
+Plain text, 250 characters at most:
+
+```text
+Ask ChatGPT from anywhere in Firefox. Type gpt in the address bar, right-click selected text, press <Alt>+<Shift>+G, or click the toolbar button. ChatGPT opens with your text filled in. Tiny, fast, no API key.
+```
+
+## Description
+
+AMO accepts a few HTML tags here, such as `<b>`, `<ul>`, `<li>` and `<a>`.
+Anything else, like `<Ctrl>`, shows as plain text, as `<ctrl>-L` does on the
+1.2 listing. Check the preview after saving.
+
+```html
+Ask ChatGPT from anywhere in Firefox.
+
+<b>Four ways to use it</b>
+<ul>
+<li><b>Address bar:</b> press <Ctrl>+L, type gpt and your question, like "gpt why does my cat knock things over?", and press <Enter>.</li>
+<li><b>Right-click:</b> select text on any page and choose Ask ChatGPT.</li>
+<li><b>Keyboard:</b> select text and press <Alt>+<Shift>+G. With nothing selected, it opens a blank chat.</li>
+<li><b>Toolbar:</b> click the Ask ChatGPT button.</li>
+</ul>
+ChatGPT opens with your text filled in. You may need to sign in to ChatGPT.
+
+<b>Small on purpose</b>
+The whole extension is about 56 KB, with no libraries, no server, no API key and no intermediary, and nothing is reported to us. Firefox opens chatgpt.com directly, and it never makes ChatGPT your default search engine unless you choose to.
+
+<b>Make it yours</b>
+<ul>
+<li>A simple right-click menu, or an advanced one with Explain, Summarize, Debug code and Translate.</li>
+<li>Your own prompt template, like "Explain simply: {query}".</li>
+<li>Open ChatGPT in a new tab, a background tab or a new window.</li>
+<li>Ask for a temporary chat or a web search. These are hints, and ChatGPT decides whether to honour them.</li>
+<li>Add your own search keyword or change the shortcut in Firefox's settings.</li>
+</ul>
+Search with ChatGPT is an unofficial extension by Zavage Software and isn't affiliated with OpenAI.
+
+<a href="https://git-repos.zavage.net/zavage-software/search-with-chatgpt-powered-by-openai-extension">Source code</a> · <a href="https://zavage-software.com/portfolio/search-with-ChatGPT">Project website</a> · <a href="https://zavage-software.com/contact-us">Feedback or report a bug</a>
+```
+
+Update "about 56 KB" when the package size changes noticeably. `npm run build`
+prints the ZIP's path.
+
+## Screenshots
+
+Upload in this order, with these captions. Each image is 1280×800, the size AMO
+recommends, and carries no added text, as Mozilla's listing guide advises.
+
+| Image | Caption |
+|---|---|
+| [1-address-bar.png](screenshots/1-address-bar.png) | Type gpt and your question in the address bar. ChatGPT opens with it filled in. |
+| [2-right-click.png](screenshots/2-right-click.png) | Select text on any page, right-click, and choose Ask ChatGPT. |
+| [3-keyboard.png](screenshots/3-keyboard.png) | Or select text and press <Alt>+<Shift>+G. |
+| [4-toolbar.png](screenshots/4-toolbar.png) | Or click the Ask ChatGPT button in the toolbar. |
+| [5-advanced-menu.png](screenshots/5-advanced-menu.png) | Switch to the Advanced menu for Explain, Summarize, Debug code and Translate. |
+
+A real screenshot of the options page in `about:addons` makes a good sixth
+image: one genuine screenshot next to the drawings helps people trust them.
+Suggested caption: "Every setting on one simple page."
+
+## Regenerating the images
+
+The images are the options page's drawings, enlarged by
+[`screenshots.html`](screenshots.html), which reuses `options/options.css`. When
+a drawing in `options/options.html` changes, copy the change into
+`screenshots.html`, then run these from the repository root:
+
+```sh
+python3 -m http.server 8766 --bind 127.0.0.1 &
+profile=$(mktemp -d)
+echo 'user_pref("layout.css.prefers-color-scheme.content-override", 1);' > "$profile/user.js"
+for shot in 1-address-bar 2-right-click 3-keyboard 4-toolbar 5-advanced-menu; do
+  firefox --headless -no-remote -profile "$profile" --window-size=1280,800 \
+    --screenshot "$PWD/docs/amo/screenshots/$shot.png" \
+    "http://127.0.0.1:8766/docs/amo/screenshots.html#$shot"
+done
+kill %1
+```
+
+The output path must be absolute. The throwaway profile forces the light theme,
+and a fresh one avoids Firefox serving an old copy of the page from its cache.
+Opening `screenshots.html` without a `#fragment` shows every image in order.

docs/amo/screenshots.html

@@ -0,0 +1,130 @@
+<!doctype html>
+<!-- Renders the options page drawings as 1280x800 images for the
+     addons.mozilla.org listing. Open with a #fragment (#1-address-bar) to
+     show one image; without one, every image is shown in order.
+     README.md in this folder explains how to regenerate them. Keep the
+     markup in step with the drawings in options/options.html. -->
+<meta charset="utf-8" />
+<title>Add-ons listing images</title>
+<link rel="stylesheet" href="../../options/options.css" />
+<style>
+  body {
+    max-width: none;
+    margin: 0;
+    padding: 0;
+    background: #ffffff;
+  }
+
+  .shot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1280px;
+    height: 800px;
+  }
+
+  body:has(.shot:target) .shot:not(:target) {
+    display: none;
+  }
+
+  /* zoom re-lays the drawing out at the larger size, so text stays sharp. */
+  .stage {
+    width: 24rem;
+    zoom: 2.6;
+  }
+
+  .stage-wide {
+    width: 26rem;
+    zoom: 2.4;
+  }
+
+  .stage .drawing {
+    margin: 0;
+    max-width: none;
+  }
+
+  .stage .drawing-keycaps {
+    padding-top: 0.5rem;
+  }
+</style>
+
+<section class="shot" id="1-address-bar">
+  <div class="stage stage-wide">
+    <div class="drawing">
+      <div class="drawing-urlbar">
+        <span class="drawing-chip"><img src="../../icons/powered-by-openai-icon-128x128.png" alt="" />ChatGPT</span>
+        <span class="drawing-typed">why does my cat knock things over?</span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="shot" id="2-right-click">
+  <div class="stage">
+    <div class="drawing">
+      <p class="drawing-page">Nobody knows <mark>why cats knock things over</mark>…</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-128x128.png" alt="" />Ask ChatGPT</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="shot" id="3-keyboard">
+  <div class="stage">
+    <div class="drawing">
+      <p class="drawing-page">Cats sleep for <mark>sixteen hours a day</mark>.</p>
+      <div class="drawing-keycaps">
+        <kbd class="drawing-key">Alt</kbd>+<kbd class="drawing-key">Shift</kbd>+<kbd class="drawing-key">G</kbd>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="shot" id="4-toolbar">
+  <div class="stage">
+    <div class="drawing">
+      <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-128x128.png" 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 cats sit in every box</mark></p>
+    </div>
+  </div>
+</section>
+
+<section class="shot" id="5-advanced-menu">
+  <div class="stage">
+    <div class="drawing">
+      <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-128x128.png" 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>Translate…</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>