|
| 1 | +# Web-to-Quest (Chrome MV3) |
| 2 | + |
1 | 3 | [](LICENSE) |
2 | 4 | [](https://github.com/HooplaHoorah/w2q-extension/releases) |
3 | | -[](https://github.com/HooplaHoorah/w2q-extension/releases) |
4 | | - |
5 | | -# Web-to-Quest (Chrome MV3) |
6 | 5 |  |
7 | 6 |
|
| 7 | +Turn on-page text into a guided quest. |
| 8 | +- **Math tab:** steps, hints, and answer check (all local). |
| 9 | +- **General tab:** translate / extract everywhere; summarize / rewrite when on-device AI is available. |
| 10 | + |
| 11 | +--- |
| 12 | + |
| 13 | +## Demo (2 minutes) |
| 14 | + |
| 15 | +▶️ https://youtu.be/UONUOS2RKOU |
| 16 | + |
| 17 | +--- |
| 18 | + |
| 19 | +## Screenshots |
| 20 | + |
| 21 | +> If your filenames differ, adjust the image paths below. Put PNGs in `demo/screenshots/`. |
| 22 | +
|
| 23 | +<p align="center"> |
| 24 | + <img src="demo/screenshots/01-context-menu.png" width="45%" alt="Context menu"> |
| 25 | + <img src="demo/screenshots/02-general-input.png" width="45%" alt="General: Input"><br/> |
| 26 | + <img src="demo/screenshots/03-translate.png" width="45%" alt="General: Translate"> |
| 27 | + <img src="demo/screenshots/04-extract.png" width="45%" alt="General: Extract"><br/> |
| 28 | + <img src="demo/screenshots/05-math.png" width="45%" alt="Math tab"> |
| 29 | + <img src="demo/screenshots/06-theme.png" width="45%" alt="Theme toggle"><br/> |
| 30 | + <img src="demo/screenshots/07-optional-gemini-nano.png" width="45%" alt="Optional Gemini Nano"> |
| 31 | + <img src="demo/screenshots/08-generate-steps.png" width="45%" alt="Generate steps"><br/> |
| 32 | + <img src="demo/screenshots/09-hint-me.png" width="45%" alt="Hint me"> |
| 33 | + <img src="demo/screenshots/10-check-answer.png" width="45%" alt="Check answer"><br/> |
| 34 | + <img src="demo/screenshots/11-generate-printable-variants.png" width="45%" alt="Printable variants"> |
| 35 | +</p> |
| 36 | + |
| 37 | +--- |
| 38 | + |
| 39 | +## What’s included |
| 40 | + |
| 41 | +- **Side Panel UI** (with popup fallback) |
| 42 | +- **Math assistant**: |
| 43 | + - *Generate steps* (auto-expanding list) |
| 44 | + - *Hint me* |
| 45 | + - *Check answer* (result appears only in the Check box) |
| 46 | +- **General tools**: |
| 47 | + - *Translate* (no network, works everywhere) |
| 48 | + - *Extract highlights* (no network, works everywhere) |
| 49 | + - *Summarize* / *Rewrite* (require on-device AI if available) |
| 50 | +- **Theme**: Light / Dark / System |
| 51 | +- **Privacy-first**: no data leaves the device; AI is opt-in |
| 52 | + |
| 53 | +--- |
8 | 54 |
|
9 | | -Turn on-page math into a guided quest: **Steps**, **Hints**, and **Answer Check** — with an auto-expanding Steps view. |
| 55 | +## Quick start (Developer mode) |
| 56 | + |
| 57 | +1) Open `chrome://extensions` → enable **Developer mode**. |
| 58 | +2) Click **Load unpacked** → select the `extension/` folder. |
| 59 | +3) Highlight text on any page → Right-click → **Send selection → Web-to-Quest**. |
| 60 | +4) The side panel (or popup fallback) opens with your selection prefilled. |
| 61 | + |
| 62 | +--- |
10 | 63 |
|
11 | 64 | ## How to use |
12 | | -1. Select a math expression on any page. |
13 | | -2. Right-click → *Send selection → Web-to-Quest* (or paste into **Problem**). |
14 | | -3. Click **Generate steps** and/or **Hint me** for guidance. |
15 | | -4. Type your answer, then click **Check answer** — the correct result is **only** shown here. |
16 | 65 |
|
17 | | -## New (v0.2.0-skeleton) |
18 | | -- **Settings → Enable AI features** (off by default). When enabled and available: |
19 | | - - **Explain this step (AI):** asks Gemini Nano (Prompt API) for a one-line rationale. |
20 | | - - **Generate printable variants (AI):** drafts a list of similar problems (no answers). |
| 66 | +### General tab |
| 67 | +1. Paste or send text into **Input**. |
| 68 | +2. Choose one action: |
| 69 | + - **Translate** *(works offline)* |
| 70 | + - **Extract** *(works offline)* |
| 71 | + - **Summarize** / **Rewrite** *(AI-gated; see below)* |
| 72 | +3. Results appear in **Result**. |
| 73 | + |
| 74 | +### Math tab |
| 75 | +1. Paste or send the math expression into **Problem**. |
| 76 | +2. Click **Generate steps** and / or **Hint me**. |
| 77 | +3. Enter your answer → **Check answer** (only here is the correct value shown). |
| 78 | +4. **Generate printable variants** drafts similar problems (no answers). |
| 79 | + |
| 80 | +--- |
| 81 | + |
| 82 | +## Built-in AI (Gemini Nano) — optional |
| 83 | + |
| 84 | +Web-to-Quest works 100% without AI: math steps / hints / checks, Translate, and Extract are fully local. |
| 85 | +If Chrome exposes on-device **Gemini Nano** (Prompt API), **Summarize** and **Rewrite** enable automatically. |
| 86 | + |
| 87 | +Enable (if you want AI): |
| 88 | +- Use Chrome Canary and flags as described in `extension/help/ai.html`. |
| 89 | +- Open the side panel DevTools and run: |
| 90 | + ```js |
| 91 | + await window.ai?.canCreateTextSession?.() |
| 92 | + ``` |
| 93 | + You might see: `ready` (enabled), `after-download` (model fetching), or `missing/unavailable` (no AI). |
21 | 94 |
|
22 | | -> These AI features are scaffolded and gracefully degrade when Nano isn’t available. |
| 95 | +*(Graceful degradation: when AI isn’t available, those buttons stay disabled and everything else still works.)* |
23 | 96 |
|
24 | | -## Install (Developer mode) |
25 | | -1. Open `chrome://extensions` and enable *Developer mode*. |
26 | | -2. Click **Load unpacked** and select the `/extension` folder. |
27 | | -3. Try it on any page. |
28 | | -- [v0.1.0 (stable)](https://github.com/HooplaHoorah/w2q-extension/releases/tag/v0.1.0) – initial MVP (local steps/hints/check) |
29 | | -- [v0.2.0-alpha (pre-release)](https://github.com/HooplaHoorah/w2q-extension/releases/tag/v0.2.0-alpha) – AI scaffolding (Prompt API stubs) |
| 97 | +--- |
30 | 98 |
|
| 99 | +## Permissions |
31 | 100 |
|
32 | | -## Built‑in AI (Gemini Nano) — optional but supported |
| 101 | +- `sidePanel` — open the Web-to-Quest panel |
| 102 | +- `contextMenus` — add **Send selection → Web-to-Quest** |
| 103 | +- `storage` — pass selection text from background to panel safely |
33 | 104 |
|
34 | | -Web‑to‑Quest works 100% without AI — all math steps, hints and answer checks are computed locally. If Chrome’s on‑device **Gemini Nano** (Prompt API) is exposed, two extra buttons will appear: *Explain this step (AI)* and *Generate printable variants (AI)*. |
| 105 | +*No `host_permissions` are requested.* |
35 | 106 |
|
36 | | -To enable these features: |
37 | | -- Follow the steps in [`extension/help/ai.html`](extension/help/ai.html) to install Chrome Canary and enable the Prompt API flags. |
38 | | -- After loading the extension, open the side panel and run `await window.ai.canCreateTextSession()` in the devtools console. The returned status may be: |
39 | | - - `ready` – AI is available and buttons are enabled automatically. |
40 | | - - `after-download` – the model is downloading; leave Chrome open on Wi‑Fi. |
41 | | - - `missing` or `unavailable` – this build/profile doesn’t yet expose the API (everything else still works). |
| 107 | +--- |
42 | 108 |
|
43 | | -### Troubleshooting |
44 | | -- **AI: unavailable** – You can still make tasks and check answers; only the two AI buttons are disabled. |
45 | | -- If using Canary, confirm the flags are **Enabled** then reload the extension and probe again. |
46 | | -- Advanced: launching Chrome with `--enable-features=PromptApiGeminiNano,PromptApiGeminiNanoMultimodalInput` may help when the flags UI is flaky. |
| 109 | +## Privacy |
47 | 110 |
|
| 111 | +- All computation runs locally in the extension’s process. |
| 112 | +- We do **not** collect, transmit, or store personal data or analytics. |
| 113 | +- Selection text is cached briefly in `chrome.storage.session` (with `chrome.storage.local` as a fallback) only to pass data from background → side panel, then overwritten on the next selection. |
| 114 | +- AI features are **opt-in**; when enabled they use Chrome’s **on-device** Gemini Nano (no network calls). |
48 | 115 |
|
49 | | -## Tech |
50 | | -- Chrome **Manifest V3**, Side Panel UI |
51 | | -- **CSP-safe** arithmetic engine (shunting-yard; no `eval`) |
52 | | -- Auto-expanding Steps with *Show all / Collapse* |
53 | | -- Privacy-first: no data leaves device; AI features require explicit opt-in |
| 116 | +--- |
54 | 117 |
|
55 | 118 | ## Development |
56 | | -- Source lives under `/extension`. |
57 | | -- On tags matching `v*.*.*`, GitHub Actions zips the extension and uploads an artifact (see `.github/workflows/build.yml`). |
58 | 119 |
|
59 | | -## License |
60 | | -MIT © 2025 Hoopla Hoorah, LLC |
| 120 | +- Source lives under `/extension`. |
| 121 | +- On tags matching `v*.*.*`, GitHub Actions can package the build (see `.github/workflows/*`). |
| 122 | +- Typical flow: |
| 123 | + ```bash |
| 124 | + # from repo root |
| 125 | + npm run lint # (if you add tooling) |
| 126 | + # load /extension in chrome://extensions |
| 127 | + ``` |
61 | 128 |
|
| 129 | +--- |
62 | 130 |
|
| 131 | +## Troubleshooting |
63 | 132 |
|
64 | | -## Privacy |
| 133 | +- **Panel didn’t appear** – It may open as a popup (fallback). You can also click the extension icon to open the panel. |
| 134 | +- **“AI: unavailable”** – Summarize/Rewrite are disabled; the rest still works. |
| 135 | +- **Context menu didn’t appear** – Reload the extension or right-click in a standard text selection area. |
65 | 136 |
|
66 | | -- All computation runs locally in the extension’s side panel. |
67 | | -- We do not collect, transmit, or store personal data or analytics. |
68 | | -- Selection text is cached briefly in chrome.storage.session (with chrome.storage.local as a fallback) only to pass data from the background script to the side panel, then overwritten on the next selection. |
69 | | -- AI features are **optional** (off by default). When enabled, they use Chrome’s built-in on-device **Gemini Nano** (Prompt API). If Nano isn’t available, these buttons remain disabled. No third-party scripts or network calls are made by the extension. |
| 137 | +--- |
70 | 138 |
|
71 | | -## Permissions used |
| 139 | +## Roadmap |
72 | 140 |
|
73 | | -- \sidePanel\ — open the Web-to-Quest side panel |
74 | | -- \contextMenus\ — add “Send selection → Web-to-Quest” |
75 | | -- \storage\ — pass selection text from the background script to the side panel |
| 141 | +- Expand the printable-variants generator |
| 142 | +- More extractors on the General tab |
| 143 | +- Optional in-panel tutorial cards |
76 | 144 |
|
77 | | -*No \host_permissions\ are requested.* |
| 145 | +--- |
78 | 146 |
|
| 147 | +## License |
| 148 | +
|
| 149 | +MIT © 2025 Hoopla Hoorah, LLC |
0 commit comments