A browser extension that lets you summarize any webpage and ask questions using AI.
Centralize suggestion fallbacks in config; add HTML comments; README tweaks
- Wire popup static suggestions to CONFIG.SUGGESTIONS.LIST
- Fix prompt example grammar and spacing in config
- Document popup/options structure in HTML comments
- README: typo fix, TODO branding update
+22
-13
+3
-2
README.md
+3
-2
README.md
···
6
6
7
7
## Features
8
8
9
-
- 📄 **One-Click Summaries** - Summarize page content efficently
9
+
- 📄 **One-Click Summaries** - Summarize page content efficiently
10
10
- 🤖 **Follow Up Questions** - Ask questions about the current webpage and summary
11
11
- 🔌 **OpenAI-Compatible** - Works with Ollama, OpenAI, Groq, and LM Studio
12
12
- ⚙️ **Configurable** - Choose your own model and API endpoint
···
40
40
41
41
## TODO
42
42
43
-
- [ ] Better branding / icon / logo
43
+
- [x] Better branding / icon / logo
44
+
- [ ] Similar to "branding" -- Rename extension to something more unique and not placeholder-y
44
45
- [ ] Publish to Chrome Web Store
45
46
- [ ] Publish to Firefox Add-ons
46
47
+6
options/options.html
+6
options/options.html
···
6
6
<link rel="stylesheet" href="options.css" />
7
7
</head>
8
8
<body>
9
+
<!-- Settings form + theme toggle; values persisted via options.js / chrome.storage -->
9
10
<div class="container">
10
11
<div class="page-header">
11
12
<div class="logo-mark">
···
77
78
</div>
78
79
79
80
<form id="settings-form">
81
+
<!-- API endpoint -->
80
82
<div class="form-group">
81
83
<label for="api-mode">API Mode</label>
82
84
<select id="api-mode">
···
122
124
</p>
123
125
</div>
124
126
127
+
<!-- Appearance -->
125
128
<div class="form-group">
126
129
<label>Accent Color</label>
127
130
<input type="hidden" id="accent-preset" value="orange" />
···
207
210
</p>
208
211
</div>
209
212
213
+
<!-- API key (cloud / hosted providers) -->
210
214
<div class="form-group">
211
215
<label for="api-key"
212
216
>API Key
···
226
230
</p>
227
231
</div>
228
232
233
+
<!-- Ollama-only options -->
229
234
<div class="form-group" id="thinking-mode-group">
230
235
<label for="disable-thinking">
231
236
<input type="checkbox" id="disable-thinking" />
···
276
281
</p>
277
282
</div>
278
283
284
+
<!-- Behavior -->
279
285
<div class="form-group">
280
286
<label for="auto-summarize">
281
287
<input type="checkbox" id="auto-summarize" />
+8
popup/popup.html
+8
popup/popup.html
···
6
6
<link rel="stylesheet" href="popup.css" />
7
7
</head>
8
8
<body>
9
+
<!--
10
+
Markup is static for layout, icons, and initial copy; popup.js adds dynamic
11
+
bits (summary HTML, chat bubbles, suggestion chips). No bundler — plain HTML
12
+
keeps structure and CSS targets easy to see.
13
+
-->
9
14
<div class="app">
10
15
<div class="header">
11
16
<div class="header-left">
···
105
110
</div>
106
111
</div>
107
112
113
+
<!-- Main area: empty / loading / rendered summary (content filled by JS) -->
108
114
<div class="content-container">
109
115
<div id="initial-state" class="initial-state">
110
116
<div class="initial-icon">
···
117
123
</div>
118
124
<div id="result" class="result hidden"></div>
119
125
</div>
126
+
<!-- Chat: input row; transcript is injected above by JS -->
120
127
<div id="chat-container" class="chat-container hidden">
121
128
<div class="chat-input-wrap">
122
129
<input
···
145
152
</div>
146
153
</div>
147
154
155
+
<!-- Primary action before summary; hidden after summarize runs -->
148
156
<div class="footer" id="footer">
149
157
<button id="summarize-btn" class="footer-btn primary">
150
158
<span id="summarize-label">Quick Summary</span>
+1
-1
popup/popup.js
+1
-1
popup/popup.js
···
139
139
const DEFAULT_SUGGESTION = "Why would this be worth reading?";
140
140
141
141
// Fallback static suggestions if AI generation fails (DEFAULT_SUGGESTION is always shown first)
142
-
const SUGGESTIONS = ["What are some key quotes?", "Explain this simply"];
142
+
const SUGGESTIONS = CONFIG.SUGGESTIONS.LIST;
143
143
144
144
// Cache key prefix for session storage
145
145
const QUICK_SUMMARY_CACHE_PREFIX = CONFIG.CACHE.QUICK_SUMMARY;
+4
-10
scripts/config.js
+4
-10
scripts/config.js
···
78
78
},
79
79
},
80
80
81
-
// Default suggestions
81
+
// Fallback chips when AI suggestion generation fails (see popup `renderSuggestions`)
82
82
SUGGESTIONS: {
83
-
DEFAULT: "What are the main points?",
84
-
LIST: [
85
-
"What are the main points?",
86
-
"Summarize in 3 bullet points",
87
-
"Explain like I'm 5",
88
-
"What are the key takeaways?",
89
-
],
83
+
LIST: ["What are some key quotes?", "Explain this simply"],
90
84
},
91
85
92
86
// Prompt templates
···
101
95
SUGGESTIONS: `Based on the summary provided, generate 2 natural follow-up questions that a reader might want to ask (besides "Why would this be worth reading?"). Keep questions short (5-8 words), like these examples:
102
96
- What are some key quotes?
103
97
- Explain this simply
104
-
- What information the most important?
98
+
- What information is the most important?
105
99
106
100
Return only the 2 questions, one per line, no numbering or bullet points.`,
107
-
CHAT_SUGGESTIONS: `Based on this chat response, generate 2 natural follow-up questions the reader might want to ask next. Keep questions short (5-8words). Make them specific to what was just discussed. Return only the 2 questions, one per line, no numbering or bullet points.`,
101
+
CHAT_SUGGESTIONS: `Based on this chat response, generate 2 natural follow-up questions the reader might want to ask next. Keep questions short (5-8 words). Make them specific to what was just discussed. Return only the 2 questions, one per line, no numbering or bullet points.`,
108
102
},
109
103
110
104
// Ollama template strings