OneClickPrompts/welcome.html at master · MaxITService/OneClickPrompts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>OneClickPrompts Instructions</title>
  <link rel="icon" type="image/png" href="icon128.png" />
  <link rel="stylesheet" href="welcome-page-files/styles.css" />
  <link rel="stylesheet" href="common-ui-elements/common-style.css" />
  <link rel="stylesheet" href="common-ui-elements/toggle.css" />
  <link rel="stylesheet" href="common-ui-elements/dark-theme.css" />
</head>

<body>
  <div class="container">
    <!-- Main Header -->
    <header class="section">
      <!-- Logo added here -->
      <img src="icon128.png" alt="OneClickPrompts Logo" class="logo" />
      <h1 id="main-title">OneClickPrompts Instructions</h1>
    </header>

    <!-- Instruction Section -->
    <section class="section">
      <div class="instruction">
        <p>
          This is an instruction page for the Chrome extension
          <strong>OneClickPrompts</strong> that you have just installed. If
          you are seeing this page, it means that you have installed the
          extension for the first time or it may have appeared due to an
          update - our apologies.
          Don’t worry, the extension is straightforward to use.
          All the knobs and switches are there for power users, and you’ll likely never touch most of them.
          The documentation is long because everything can be configured, not because you have to configure it.
          I suggest you only read about pinning the extension button.
        </p>
      </div>

      <div class="instruction">
        <h2>Pinned Extension Button</h2>
        <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, which is this button near address bar right here:
        </p>
        <ul>
          <li>
            <img src="/welcome-page-files/extension-management-button.png" alt="Extension Management Button" />
          </li>
        </ul>

        <p>
          (Your button may be a little bit different in different browsers. So
          I'm attaching next screenshot from other browser) then select
          <em>'Pin'</em> near the icon of this extension:
        </p>
        <ul>
          <li>
            <img src="/welcome-page-files/pin-extension.png" alt="Pin Extension" />
          </li>
        </ul>
      </div>

      <div class="instruction">
        <p>
          Once pinned, the extension UI button will be available constantly in
          your browser toolbar: when you click it (green arrow), you will see
          a menu where you can edit the text for all the buttons that you add:
        </p>
        <img src="/welcome-page-files/extension-ui-button-and-popup.png" alt="Extension UI" />
        <p>
          In this UI, called "popup" you can fully control the extension and,
          at the bottom, import/export profiles. Don't forget to scroll (red
          arrow) down to access features. At the top you will see the profile
          management, so profile is like a lot of buttons that are saved under
          this name. Buttons and separators can be dragged to be reordered.
        </p>
      </div>

      <div class="instruction">
        <h2>Site-Specific Activation</h2>
        <p>
          If you want the extension to work only on specific websites, please
          do the following:
        </p>
        <ul>
          <li>
            Right-click on the extension icon in the browser toolbar:
            <img src="/welcome-page-files/right-click-on-icon.png" alt="Right Click Extension" />
          </li>
          <li>
            From the menu, select <em>'Manage extensions'</em>.
            <img src="/welcome-page-files/manage-extension.png" alt="Manage Extensions" />
          </li>
          <li>
            Select the websites where you want the extension to be
            automatically enabled. Or just select all websites at once.
            Sometimes after the updates this option will be disabled, so this
            is a good troubleshooting step if extension is not activated
          </li>
        </ul>
      </div>

      <div class="instruction">
        <p>
          <strong>Note:</strong> When updating the extension, Chrome may
          prompt for permission for the extension to access websites. If you
          click 'no', the extension may stop working.
        </p>
      </div>

      <h2>Tips for using:</h2>

      <div class="instruction">
        <ul>
          <li>
            A few usage tips: Tailored instructions that you enter with this
            extension can improve answers and enhance your overall experience
            with chatbots.
          </li>
          <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>
          <li>
            The first button is the system's button and is meant for buttons
            to appear on a floating, resizable panel.
          </li>
          <li>
            Example: Grok does not always initiate a search, but for some
            questions, you might feel that the answer would be better if it
            tried to search the web for one.
          </li>
          <li>
            If the model sticks to short answers, but if you specify after
            your question that you want a theoretical explanation, a few
            examples, and one related concept, you might receive a much more
            detailed response.
          </li>
          <li>
            How can you force model to think? Easy. You can tell it. Simply
            asking to think true may work or may not. But if you actually
            provide model with some advice on how to think and have some sort
            of chain of doubt, then it will more likely to actually initiate
            thinking by itself.
          </li>

          <li>
            Next thing that you need to think about is well-told answer will
            be usually longer. So in your prompt, specify the desired length
            of answer to not generate answers that are too long and will waste
            your time reading them.
          </li>
          <li>
            When correcting a text, a chatbot may get very creative and
            replace your slang or informal words with ones it thinks are
            correct. By providing specific instructions to the chatbot, you
            can avoid this.
          </li>
          <li>
            Remove all the example buttons that you will not use, this will
            make navigation across your buttons easier!
          </li>
          <li>
            In Popup, you can reset position of all floating windows if
            something goes wrong
          </li>
          <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>
          <li>You can open this page later from the popup</li>
        </ul>
      </div>
      <h2>Modules:</h2>
      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:

      <img src="welcome-page-files/modules.png" alt="Modules overview illustration" />
      For example, you can spawn profile selector with buttons.

      <h2>Queue Functionality: Send Prompts Sequentially</h2>
      <div class="instruction">
        <p>
          OneClickPrompts now includes a powerful
          <strong>Queue</strong> feature, allowing you to send multiple
          prompts one after another with a set delay between them. This is
          perfect for example when you want AI to search for news and tell you
          updates every 2 hours.
        </p>
        <p><strong>How to use the Queue:</strong></p>
        <ol>
          <li>
            <strong>Open the Floating Panel:</strong> The queue controls are
            located in the floating panel. Click the '🔼' button next to the
            prompt input area to open it.
          </li>
          <li>
            <strong>Enable Queue Mode:</strong> In the floating panel, find
            the "Queue" section and toggle on "Enable Queue Mode".
          </li>
          <li>
            <strong>Add Prompts to the Queue:</strong> Once enabled, any
            custom prompt button you click will be added to the queue instead
            of being sent immediately. You will see icons for queued prompts
            appear.
          </li>
          <li>
            <strong>Configure the Delay:</strong> Set the time delay (in
            minutes or seconds) between each prompt being sent.
          </li>
          <li>
            <strong>Control the Queue:</strong> Use the ▶️ (Play), ⏸️ (Pause),
            and 🔄 (Reset) buttons to manage the queue.
          </li>
        </ol>
        <p>
          <strong style="color: #c9a722">Important:</strong> Please ensure
          that using the queue feature to send prompts automatically does not
          violate the Terms of Service of the website you are using. You will
          be asked to confirm that you have permission from the website owner
          before using the feature for the first time.
        </p>
      </div>

      <h3>Manual Queue Mode: Create & Queue Prompts on the Fly</h3>
      <div class="instruction">
        <p>
          Need to queue up a sequence of unique, one-off prompts? <strong>Manual Queue Mode</strong> allows you to draft and queue messages directly in the Floating Panel without creating permanent buttons first.
        </p>
        <p><strong>How to use Manual Queue Mode:</strong></p>
        <ol>
          <li>
            <strong>Activate Manual Mode:</strong> creative Click the <strong>✏️ (Pencil)</strong> button in the Queue controls area (Floating Panel). This reveals the manual card interface.
          </li>
          <li>
            <strong>Draft Prompts:</strong> Type your prompts into the 6 available cards. You can also customize the emoji for each card.
          </li>
          <li>
            <strong>Add to Queue:</strong>
            <ul>
              <li><strong>Click (+):</strong> Adds that specific card's content to the queue.</li>
              <li><strong>Shift+Click (+):</strong> Saves the current card as a <strong>permanent button</strong> in your profile!</li>
            </ul>
          </li>
          <li>
            <strong>Bulk Actions (Play Button):</strong>
            <ul>
              <li><strong>Shift+Click (▶️ Play):</strong> Adds <em>all</em> filled cards to the queue at once.</li>
              <li><strong>Ctrl+Shift+Click (▶️ Play):</strong> Adds all filled cards AND starts the queue immediately.</li>
            </ul>
          </li>
        </ol>
      </div>

      <h2>Cross-Chat Prompt Sharing: Reuse Prompts Anywhere</h2>
      <div class="instruction">
        <p>
          Work with multiple AI platforms? The new
          <strong>Cross-Chat Prompt Sharing</strong> module makes it easy to
          copy a prompt from one chat (like ChatGPT) and instantly paste it
          into another (like Claude or Gemini) without cluttering the clipboard - using internal storage as clipboard.
          OR just broadcast to all opened tabs where OneClickPrompts is loaded.
        </p>
        <p><strong>How it works:</strong></p>
        <ol>
          <li>
            <strong>Enable the Module:</strong> Go to the extension's popup
            menu, expand the "Modules" section, and toggle on "Enable
            Cross-Chat Prompt Sharing".Next, you're going to choose if you want to manually "copy and paste" with assist
            of new buttons or
            you want to broadcast to all tabs.
            Broadcasting is dangerous as it can broadcast to unintended chats.
          </li>
          <li>
            <strong>📋 Copy a Prompt:</strong> On any supported AI chat page,
            new "Copy" and "Paste" buttons will appear. Type your prompt and
            click the "Copy Prompt" button.
          </li>
          <li>
            <strong>📥Paste & Send:</strong> Switch to a different AI chat
            platform. Click the "Paste & Send Prompt" button to instantly
            transfer your text.
          </li>
          <li>
            <strong> ⬆️ Broadcasting:</strong> If you enabled broadcasting, just
            click the "Broadcast Prompt" button to send the prompt to all
            open tabs with OneClickPrompts. Shift-Click to restrict this tab to broadcast. (will still work as sender
            tab)
            When you are using broadcasting, you may opt out to disable copy and paste buttons.
        </ol>
        <p>
          You can customize the button placement and autosend behavior in the
          module's settings within the popup.
        </p>
      </div>

      <h2>ChatGPT Token counter (Approximator)</h2>
      <div class="instruction">
        ChatGPT Token Approximator estimates,
        how many tokens are in the visible chat thread and/or in the editor.
        It adds compact chips (T = whole thread, E = editor)
        that auto-refresh and can be clicked to re-estimate;
        results are rough, especially with code/non-Latin characters or very long chats.
        You can scale counts with Calibration and choose Advanced heuristics or Simple (~1 token ≈ 4 characters).
      </div>

      <h2>Automatic Recovery & Manual Adjustments</h2>
      <div class="instruction">
        <p>
          Websites change often, and sometimes your buttons might disappear. OneClickPrompts has built-in self-healing
          features to handle this.
        </p>
        <p><strong>How it works:</strong></p>
        <ul>
          <li>
            <strong>Auto-Detection:</strong> If the extension can't find the usual spot for buttons, it will
            automatically
            search for a new location.
          </li>
          <li>
            <strong>Manual Move (Shift+Click):</strong> You can manually move the button container if it's in the wrong
            place.
            <strong>Hold Shift and click the Settings button (⚙️)</strong> to enter "Move Mode".
            Use the "Back" and "Forward" buttons in the toast notification to find a better spot, then click "Save".
          </li>
          <li>
            <strong>Floating Panel Fallback:</strong> If no suitable place is found, the extension will automatically
            switch
            to the Floating Panel mode so you can keep working without interruption.
          </li>
          <li>
            <strong>What can break?:</strong> There are 3 things that can break when websites make changes:
            1. The container where buttons are injected. The recovery mechanism will be triggered a few seconds after
            page load.
            2. The editor name.
            3. The send button. The editor and send buttons are accessed first,
            and if the extension is unable to find them, recovery for them specifically will be triggered
            Warning: Trying to autosend when AI has not finished answering may trigger recovery of the send button!
          </li>

        </ul>
      </div>

      <h2>See the code and support author, privacy concerns.</h2>
      <p>
        The extension is open-source and you can see the code on
        <a href="https://github.com/MaxITService/OneClickPrompts">GitHub</a>. If you have any questions or suggestions
        for new features, please
        contact the author at
        <a href="mailto:forpphotos@gmail.com">forpphotos@gmail.com</a>. The
        extension does not collect any data
      </p>
    </section>

    <!-- =====  Theme Section (Dark Theme Toggle) ===== -->
    <section class="section" id="themeSection">
      <h2>Theme</h2>
      <!-- iPhone-style toggle switch -->
      <div class="toggle-container">
        <div class="toggle">
          <input type="checkbox" id="darkThemeToggle" class="toggle__input" aria-label="Enable Dark Theme" />
          <label for="darkThemeToggle" class="toggle__label">
            <span class="toggle__emoji">☀️</span>
            <span class="toggle__emoji">🌙</span>
          </label>
        </div>
        <span class="switch-label">Enable Dark Theme</span>
      </div>
    </section>
    <!-- ===== End Theme Section ===== -->
  </div>

  <script src="welcome-page-files/theme.js"></script>
</body>

</html>