☰

ChatGPT Helper

Improve ChatGPT experience

目前为 2023-07-21 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         ChatGPT Helper
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Improve ChatGPT experience
  6. // @author       Charles
  7. // @run-at       document-end
  8. // @match        https://chat.openai.com/*
  9. // @match        https://chat.openai.com/c/*
  10. // @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com
  11. // @grant        GM_addStyle
  12. // ==/UserScript==
  13.  
  14. var buttonList = [
  15.     {Name: "翻譯成繁體中文", Message: "翻譯成繁體中文"},
  16.     {Name: "繼續", Message: "繼續"}
  17. ];
  18.  
  19. (function () {
  20.     "use strict";
  21.  
  22.     // Your code here...
  23.  
  24.     createHelperDiv();
  25. })();
  26.  
  27. // 傳送指定訊息
  28. function sendMessage(message) {
  29.     // 取得用來確認目前是否可傳送的按鈕
  30.     let checkButton = document.querySelector(
  31.         '.relative[role="presentation"] > div > div > button > div'
  32.     );
  33.     if (checkButton !== null && checkButton.innerText !== "Regenerate response") return;
  34.     //   copy text
  35.     let inputArea = document.querySelector("#prompt-textarea");
  36.     let sendButton = document.querySelector("#prompt-textarea + button");
  37.     let origin = inputArea.value;
  38.     inputArea.value = message;
  39.     let inputEventSimulator = new InputEvent("input", {bubbles: true});
  40.     inputArea.dispatchEvent(inputEventSimulator);
  41.     inputArea.value = origin;
  42.     setTimeout(() => {
  43.         sendButton.click();
  44.     }, 300);
  45. }
  46.  
  47. // 創建輔助工具的UI
  48. function createHelperDiv() {
  49.     let div = document.createElement("div");
  50.     div.id = "gpt_helper";
  51.     div.innerHTML = `
  52.     <div class="gpt_helper_buttons">
  53.     </div>
  54.   `;
  55.     let insertDiv = document.querySelector("#__next");
  56.     insertDiv.appendChild(div);
  57.     let buttonBar = div.querySelector(".gpt_helper_buttons");
  58.  
  59.     for (let i = 0; i < buttonList.length; i++) {
  60.         let button = document.createElement("button");
  61.         button.className = "gpt_helper_button";
  62.         button.innerText = buttonList[i].Name;
  63.         button.addEventListener("click", () => sendMessage(buttonList[i].Message));
  64.         buttonBar.appendChild(button);
  65.     }
  66.  
  67.     addStyle();
  68. }
  69.  
  70. // 加入CSS
  71. function addStyle() {
  72.     GM_addStyle(
  73.         `#gpt_helper {
  74.         position: absolute;
  75.         width: 100%;
  76.         height: 100%;
  77.         left: 0;
  78.         top: 0;
  79.         display: flex;
  80.         justify-content: end;
  81.         align-items: center;
  82.         pointer-events: none;
  83.       }
  84.       
  85.       #gpt_helper > .gpt_helper_buttons {
  86.         width: 150px;
  87.         height: 300px;
  88.         pointer-events: all;
  89.       }
  90.       
  91.       #gpt_helper > .gpt_helper_buttons .gpt_helper_button {
  92.         appearance: none;
  93.         background-color: #2ea44f;
  94.         border: 1px solid rgba(27, 31, 35, 0.15);
  95.         border-radius: 6px;
  96.         box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0;
  97.         box-sizing: border-box;
  98.         color: #fff;
  99.         cursor: pointer;
  100.         display: inline-block;
  101.         font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial,
  102.           sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  103.         font-size: 14px;
  104.         font-weight: 600;
  105.         line-height: 20px;
  106.         padding: 6px 16px;
  107.         position: relative;
  108.         text-align: center;
  109.         text-decoration: none;
  110.         user-select: none;
  111.         -webkit-user-select: none;
  112.         touch-action: manipulation;
  113.         vertical-align: middle;
  114.         white-space: nowrap;
  115.         width: 100%;
  116.         margin: 5px;
  117.       }
  118.       
  119.       #gpt_helper
  120.         > .gpt_helper_buttons
  121.         .gpt_helper_button:focus:not(:focus-visible):not(.focus-visible) {
  122.         box-shadow: none;
  123.         outline: none;
  124.       }
  125.       
  126.       #gpt_helper > .gpt_helper_buttons .gpt_helper_button:hover {
  127.         background-color: #2c974b;
  128.       }
  129.       
  130.       #gpt_helper > .gpt_helper_buttons .gpt_helper_button:focus {
  131.         box-shadow: rgba(46, 164, 79, 0.4) 0 0 0 3px;
  132.         outline: none;
  133.       }
  134.       
  135.       #gpt_helper > .gpt_helper_buttons .gpt_helper_button:disabled {
  136.         background-color: #94d3a2;
  137.         border-color: rgba(27, 31, 35, 0.1);
  138.         color: rgba(255, 255, 255, 0.8);
  139.         cursor: default;
  140.       }
  141.       
  142.       #gpt_helper > .gpt_helper_buttons .gpt_helper_button:active {
  143.         background-color: #298e46;
  144.         box-shadow: rgba(20, 70, 32, 0.2) 0 1px 0 inset;
  145.       }
  146.       `
  147.     );
  148. }