Skip to content

Commit dd24e10

Browse files
committed
Enhance welcome page: update link text for clarity and add new module settings image
1 parent a4b2a41 commit dd24e10

File tree

3 files changed

+225
-118
lines changed

3 files changed

+225
-118
lines changed

popup.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -521,7 +521,7 @@ <h2>Help</h2>
521521
<ul>
522522
<li>
523523
<a href="#" id="openWelcomePage"
524-
>Open Welcome page (the one with instructions) again</a
524+
>Open Welcome page <b>with instructions</b> again</a
525525
>
526526
</li>
527527
<li>

welcome-page-files/modules.png

6.66 KB
Loading

welcome.html

Lines changed: 224 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,210 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>OneClickPrompts Instructions</title>
7-
<link rel="icon" type="image/png" href="icon128.png">
8-
<link rel="stylesheet" href="welcome-page-files/styles.css">
9-
<link rel="stylesheet" href="common-ui-elements/common-style.css">
10-
<link rel="stylesheet" href="common-ui-elements/popup-toggle.css">
11-
<link rel="stylesheet" href="common-ui-elements/dark-theme.css">
12-
</head>
13-
<body>
14-
<div class="container">
15-
<!-- Main Header -->
16-
<header class="section">
17-
<!-- Logo added here -->
18-
<img src="icon128.png" alt="OneClickPrompts Logo" class="logo">
19-
<h1 id="main-title">OneClickPrompts Instructions</h1>
20-
</header>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>OneClickPrompts Instructions</title>
7+
<link rel="icon" type="image/png" href="icon128.png" />
8+
<link rel="stylesheet" href="welcome-page-files/styles.css" />
9+
<link rel="stylesheet" href="common-ui-elements/common-style.css" />
10+
<link rel="stylesheet" href="common-ui-elements/popup-toggle.css" />
11+
<link rel="stylesheet" href="common-ui-elements/dark-theme.css" />
12+
</head>
13+
<body>
14+
<div class="container">
15+
<!-- Main Header -->
16+
<header class="section">
17+
<!-- Logo added here -->
18+
<img src="icon128.png" alt="OneClickPrompts Logo" class="logo" />
19+
<h1 id="main-title">OneClickPrompts Instructions</h1>
20+
</header>
2121

22-
<!-- Instruction Section -->
23-
<section class="section">
24-
<div class="instruction">
25-
<p>This is an instruction page for the Chrome extension <strong>OneClickPrompts</strong> that you have just
26-
installed. If you are seeing this page, it means that you have installed the extension for the first time or
27-
it may have appeared due to an update – our apologies.</p>
28-
</div>
22+
<!-- Instruction Section -->
23+
<section class="section">
24+
<div class="instruction">
25+
<p>
26+
This is an instruction page for the Chrome extension
27+
<strong>OneClickPrompts</strong> that you have just installed. If
28+
you are seeing this page, it means that you have installed the
29+
extension for the first time or it may have appeared due to an
30+
update – our apologies.
31+
</p>
32+
</div>
33+
34+
<div class="instruction">
35+
<h2>Pinned Extension Button</h2>
36+
<p>
37+
<strong>Important:</strong> You should pin the extension button, or
38+
you won't be able to access menu. To do this, click on your
39+
extension menu, which is this button near address bar right here:
40+
</p>
41+
<ul>
42+
<li>
43+
<img
44+
src="/welcome-page-files/extension-management-button.png"
45+
alt="Extension Management Button"
46+
/>
47+
</li>
48+
</ul>
2949

30-
<div class="instruction">
31-
<h2>Pinned Extension Button</h2>
32-
<p><strong>Important:</strong> You should pin the extension button, or you won't be able to access menu. To do this, click on your extension menu,
33-
which is this button near address bar right here:</p>
34-
<ul>
35-
<li>
36-
<img src="/welcome-page-files/extension-management-button.png" alt="Extension Management Button">
37-
</li>
38-
</ul>
50+
<p>
51+
(Your button may be a little bit different in different browsers. So
52+
I'm attaching next screenshot from other browser) then select
53+
<em>'Pin'</em> near the icon of this extension:
54+
</p>
55+
<ul>
56+
<li>
57+
<img
58+
src="/welcome-page-files/pin-extension.png"
59+
alt="Pin Extension"
60+
/>
61+
</li>
62+
</ul>
63+
</div>
3964

40-
<p>(Your button may be a little bit different in different browsers. So I'm attaching next screenshot from
41-
other browser) then select <em>'Pin'</em> near the icon of this extension:</p>
42-
<ul>
43-
<li>
44-
<img src="/welcome-page-files/pin-extension.png" alt="Pin Extension">
45-
</li>
46-
</ul>
47-
</div>
65+
<div class="instruction">
66+
<p>
67+
Once pinned, the extension UI button will be available constantly in
68+
your browser toolbar: when you click it (green arrow), you will see
69+
a menu where you can edit the text for all the buttons that you add:
70+
</p>
71+
<img
72+
src="/welcome-page-files/extension-ui-button-and-popup.png"
73+
alt="Extension UI"
74+
/>
75+
<p>
76+
In this UI, called "popup" you can fully control the extension and,
77+
at the bottom, import/export profiles. Don't forget to scroll (red
78+
arrow) down to access features. At the top you will see the profile
79+
management, so profile is like a lot of buttons that are saved under
80+
this name. Buttons and separators can be dragged to be reordered.
81+
</p>
82+
</div>
4883

49-
<div class="instruction">
50-
<p>Once pinned, the extension UI button will be available constantly in your browser toolbar: when you click it
51-
(green arrow), you will see a menu where you can edit the text for all the buttons that you add:</p>
52-
<img src="/welcome-page-files/extension-ui-button-and-popup.png" alt="Extension UI">
53-
<p>In this UI, called "popup" you can fully control the extension and, at the bottom, import/export profiles.
54-
Don't forget to scroll (red arrow) down to access features. At the top you will see the profile management, so
55-
profile is like a lot of buttons that are saved under this name. Buttons and separators can be dragged to be
56-
reordered.</p>
57-
</div>
84+
<div class="instruction">
85+
<h2>Site-Specific Activation</h2>
86+
<p>
87+
If you want the extension to work only on specific websites, please
88+
do the following:
89+
</p>
90+
<ul>
91+
<li>
92+
Right-click on the extension icon in the browser toolbar:
93+
<img
94+
src="/welcome-page-files/right-click-on-icon.png"
95+
alt="Right Click Extension"
96+
/>
97+
</li>
98+
<li>
99+
From the menu, select <em>'Manage extensions'</em>.
100+
<img
101+
src="/welcome-page-files/manage-extension.png"
102+
alt="Manage Extensions"
103+
/>
104+
</li>
105+
<li>
106+
Select the websites where you want the extension to be
107+
automatically enabled. Or just select all websites at once.
108+
Sometimes after the updates this option will be disabled, so this
109+
is a good troubleshooting step if extension is not activated
110+
</li>
111+
</ul>
112+
</div>
58113

59-
<div class="instruction">
60-
<h2>Site-Specific Activation</h2>
61-
<p>If you want the extension to work only on specific websites, please do the following:</p>
62-
<ul>
63-
<li>Right-click on the extension icon in the browser toolbar:
64-
<img src="/welcome-page-files/right-click-on-icon.png" alt="Right Click Extension">
65-
</li>
66-
<li>From the menu, select <em>'Manage extensions'</em>.
67-
<img src="/welcome-page-files/manage-extension.png" alt="Manage Extensions">
68-
</li>
69-
<li>Select the websites where you want the extension to be automatically enabled. Or just select all websites
70-
at once. Sometimes after the updates this option will be disabled, so this is a good troubleshooting step if
71-
extension is not activated</li>
72-
</ul>
73-
</div>
114+
<div class="instruction">
115+
<p>
116+
<strong>Note:</strong> When updating the extension, Chrome may
117+
prompt for permission for the extension to access websites. If you
118+
click 'no', the extension may stop working.
119+
</p>
120+
</div>
74121

75-
<div class="instruction">
76-
<p><strong>Note:</strong> When updating the extension, Chrome may prompt for permission for the extension to
77-
access websites. If you click 'no', the extension may stop working.</p>
78-
</div>
122+
<h2>Tips for using:</h2>
79123

80-
<h2>Tips for using:</h2>
124+
<div class="instruction">
125+
<ul>
126+
<li>
127+
A few usage tips: Tailored instructions that you enter with this
128+
extension can improve answers and enhance your overall experience
129+
with chatbots.
130+
</li>
131+
<li>
132+
You don't have to use just emoji for buttons—a custom text may
133+
help when you have lots of prompts. Just type in the field where
134+
there is emoji input: text will become the button.
135+
</li>
136+
<li>
137+
The first button is the system's button and is meant for buttons
138+
to appear on a floating, resizable panel.
139+
</li>
140+
<li>
141+
Example: Grok does not always initiate a search, but for some
142+
questions, you might feel that the answer would be better if it
143+
tried to search the web for one.
144+
</li>
145+
<li>
146+
If the model sticks to short answers, but if you specify after
147+
your question that you want a theoretical explanation, a few
148+
examples, and one related concept, you might receive a much more
149+
detailed response.
150+
</li>
151+
<li>
152+
How can you force model to think? Easy. You can tell it. Simply
153+
asking to think true may work or may not. But if you actually
154+
provide model with some advice on how to think and have some sort
155+
of chain of doubt, then it will more likely to actually initiate
156+
thinking by itself.
157+
</li>
81158

82-
<div class="instruction">
83-
<ul>
84-
<li>A few usage tips: Tailored instructions that you enter with this extension can improve answers and
85-
enhance your overall experience with chatbots.</li>
86-
<li>You don't have to use just emoji for buttons—a custom text may help when you have lots of prompts. Just type in the field where there is emoji input: text will become the button.</li>
87-
<li>The first button is the system's button and is meant for buttons to appear on a floating, resizable panel.</li>
88-
<li>Example: Grok does not always initiate a search, but for some questions, you might feel that the answer
89-
would be better if it tried to search the web for one.</li>
90-
<li>The O3 model sticks to short answers, but if you specify after your question that you want a theoretical
91-
explanation, a few examples, and one related concept, you might receive a much more detailed response.</li>
92-
<li>When correcting a text, a chatbot may get very creative and replace your slang or informal words with ones
93-
it thinks are correct. By providing specific instructions to the chatbot, you can avoid this.</li>
94-
<li>Remove all the example buttons that you will not use, this will make navigation across your buttons easier!</li>
95-
<li>In Popup, you can reset position of all floating windows if something goes wrong</li>
96-
<li>See Google’s <a href="https://www.gptaiflow.com/assets/files/2025-01-18-pdf-1-TechAI-Goolge-whitepaper_Prompt%20Engineering_v4-af36dcc7a49bb7269a58b1c9b89a8ae1.pdf">Prompt Engineering Whitepaper</a>. For example, repeating important instructions both before and after your specific prompt increases the likelihood that those instructions will be followed correctly.</li>
97-
<li>You can open this page later from the popup</li>
98-
</ul>
159+
<li>
160+
Next thing that you need to think about is well-told answer will
161+
be usually longer. So in your prompt, specify the desired length
162+
of answer to not generate answers that are too long and will waste
163+
your time reading them.
164+
</li>
165+
<li>
166+
When correcting a text, a chatbot may get very creative and
167+
replace your slang or informal words with ones it thinks are
168+
correct. By providing specific instructions to the chatbot, you
169+
can avoid this.
170+
</li>
171+
<li>
172+
Remove all the example buttons that you will not use, this will
173+
make navigation across your buttons easier!
174+
</li>
175+
<li>
176+
In Popup, you can reset position of all floating windows if
177+
something goes wrong
178+
</li>
179+
<li>
180+
See Google’s
181+
<a
182+
href="https://www.gptaiflow.com/assets/files/2025-01-18-pdf-1-TechAI-Goolge-whitepaper_Prompt%20Engineering_v4-af36dcc7a49bb7269a58b1c9b89a8ae1.pdf"
183+
>Prompt Engineering Whitepaper</a
184+
>. For example, repeating important instructions both before and
185+
after your specific prompt increases the likelihood that those
186+
instructions will be followed correctly.
187+
</li>
188+
<li>You can open this page later from the popup</li>
189+
</ul>
99190
</div>
100-
191+
<h2>Modules:</h2>
192+
You can have Some additional settings if you go to the pop-up in the modules section and enable module that you are interested in:
193+
194+
<img
195+
src="welcome-page-files/modules.png"
196+
alt="Modules overview illustration"
197+
/>
198+
For example, you can spawn profile selector with buttons.
199+
101200
<h2>Queue Functionality: Send Prompts Sequentially</h2>
102201
<div class="instruction">
103202
<p>
104203
OneClickPrompts now includes a powerful
105204
<strong>Queue</strong> feature, allowing you to send multiple
106205
prompts one after another with a set delay between them. This is
107-
perfect for example when you want AI to search for news and tell you updates every 2 hours.
206+
perfect for example when you want AI to search for news and tell you
207+
updates every 2 hours.
108208
</p>
109209
<p><strong>How to use the Queue:</strong></p>
110210
<ol>
@@ -157,9 +257,9 @@ <h2>Cross-Chat Prompt Sharing: Reuse Prompts Anywhere</h2>
157257
Cross-Chat Prompt Sharing".
158258
</li>
159259
<li>
160-
<strong>📋 Copy a Prompt:</strong> On any supported AI chat page, new
161-
"Copy" and "Paste" buttons will appear. Type your prompt and click
162-
the "Copy Prompt" button.
260+
<strong>📋 Copy a Prompt:</strong> On any supported AI chat page,
261+
new "Copy" and "Paste" buttons will appear. Type your prompt and
262+
click the "Copy Prompt" button.
163263
</li>
164264
<li>
165265
<strong>📥Paste & Send:</strong> Switch to a different AI chat
@@ -174,30 +274,37 @@ <h2>Cross-Chat Prompt Sharing: Reuse Prompts Anywhere</h2>
174274
</div>
175275

176276
<h2>See the code and support author, privacy concerns.</h2>
177-
<p>The extension is open-source and you can see the code on <a href="https://github.com/MaxITService/ChatGPT-Quick-Buttons-for-your-text">GitHub</a>.
178-
If you have any questions or suggestions for new features, please contact the author at <a href="mailto:[email protected]">[email protected]</a>. The extension does not collect any data</p>
179-
</section>
277+
<p>
278+
The extension is open-source and you can see the code on
279+
<a
280+
href="https://github.com/MaxITService/ChatGPT-Quick-Buttons-for-your-text"
281+
>GitHub</a
282+
>. If you have any questions or suggestions for new features, please
283+
contact the author at
284+
<a href="mailto:[email protected]">[email protected]</a>. The
285+
extension does not collect any data
286+
</p>
287+
</section>
180288

181-
<!-- ===== Theme Section (Dark Theme Toggle) ===== -->
182-
<section class="section" id="themeSection">
183-
<h2>Theme</h2>
184-
<!-- iPhone-style toggle switch -->
185-
<div class="switch-container">
186-
<label class="switch">
187-
<input
188-
type="checkbox"
189-
id="darkThemeToggle"
190-
aria-label="Enable Dark Theme"
191-
/>
192-
<span class="slider"></span>
193-
</label>
194-
<span class="switch-label">Enable Dark Theme</span>
195-
</div>
196-
</section>
197-
<!-- ===== End Theme Section ===== -->
198-
</div>
289+
<!-- ===== Theme Section (Dark Theme Toggle) ===== -->
290+
<section class="section" id="themeSection">
291+
<h2>Theme</h2>
292+
<!-- iPhone-style toggle switch -->
293+
<div class="switch-container">
294+
<label class="switch">
295+
<input
296+
type="checkbox"
297+
id="darkThemeToggle"
298+
aria-label="Enable Dark Theme"
299+
/>
300+
<span class="slider"></span>
301+
</label>
302+
<span class="switch-label">Enable Dark Theme</span>
303+
</div>
304+
</section>
305+
<!-- ===== End Theme Section ===== -->
306+
</div>
199307

200-
<script src="welcome-page-files/theme.js"></script>
201-
</body>
308+
<script src="welcome-page-files/theme.js"></script>
309+
</body>
202310
</html>
203-

0 commit comments

Comments
 (0)