☰

ChatGPT-input-helper

Help organize commonly used spells quickly

当前为 2023-04-09 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         ChatGPT-input-helper
  3. // @name:zh-TW   ChatGPT-input-helper 快速輸入常用咒文
  4. // @namespace    https://github.com/we684123/ChatGPT-input-helper
  5. // @version      0.0.7
  6. // @author       we684123
  7. // @description  Help organize commonly used spells quickly
  8. // @description:zh-TW  幫助快速組織常用咒文
  9. // @license      MIT
  10. // @icon         https://chat.openai.com/favicon.ico
  11. // @match        https://chat.openai.com/chat
  12. // @match        https://chat.openai.com/chat/*
  13. // @match        https://chat.openai.com/chat?*
  14. // @grant        GM_getValue
  15. // @grant        GM_setValue
  16. // @grant        GM_deleteValue
  17. // @run-at       document-end
  18. // ==/UserScript==
  19.  
  20. (function (factory) {
  21.   typeof define === 'function' && define.amd ? define(factory) :
  22.   factory();
  23. })((function () { 'use strict';
  24.  
  25.   const sentinel = (() => {
  26.       const isArray = Array.isArray;
  27.       let selectorToAnimationMap = {};
  28.       let animationCallbacks = {};
  29.       let styleEl;
  30.       let styleSheet;
  31.       let cssRules;
  32.       return {
  33.           // `on` 方法用於添加 CSS 選擇器的監聽器。
  34.           // cssSelectors: 一個字符串或字符串數組，包含要監聽的 CSS 選擇器。
  35.           // callback: 用於處理觸發的事件的回調函數。
  36.           on: function (cssSelectors, callback) {
  37.               // 如果沒有提供回調函數，則直接返回。
  38.               if (!callback)
  39.                   return;
  40.               // 如果 `styleEl` 未定義，創建一個新的 `style` 標籤並將其添加到文檔的 `head` 中。
  41.               // 還會為 `animationstart` 事件添加事件監聽器。
  42.               if (!styleEl) {
  43.                   const doc = document;
  44.                   const head = doc.head;
  45.                   doc.addEventListener("animationstart", function (ev) {
  46.                       const callbacks = animationCallbacks[ev.animationName];
  47.                       if (!callbacks)
  48.                           return;
  49.                       ev.stopImmediatePropagation();
  50.                       for (const cb of callbacks) {
  51.                           cb(ev.target);
  52.                       }
  53.                   }, true);
  54.                   styleEl = doc.createElement("style");
  55.                   // head.insertBefore(styleEl, head.firstChild); // 這個是原版的，改用下面的
  56.                   head.append(styleEl); // 感謝 chatgpt-exporter 搞好久 (┬┬﹏┬┬)
  57.                   styleSheet = styleEl.sheet;
  58.                   cssRules = styleSheet.cssRules;
  59.               }
  60.               // 根據提供的選擇器創建一個新的動畫。
  61.               const selectors = isArray(cssSelectors) ? cssSelectors : [cssSelectors];
  62.               selectors.forEach((selector) => {
  63.                   // 獲取或創建動畫 ID。
  64.                   let animIds = selectorToAnimationMap[selector];
  65.                   if (!animIds) {
  66.                       const isCustomName = selector[0] == "!";
  67.                       const animId = isCustomName
  68.                           ? selector.slice(1)
  69.                           : "sentinel-" + Math.random().toString(16).slice(2);
  70.                       // 創建新的 keyframes 規則。
  71.                       const keyframeRule = cssRules[styleSheet.insertRule("@keyframes " +
  72.                           animId +
  73.                           "{from{transform:none;}to{transform:none;}}", cssRules.length)];
  74.                       keyframeRule._id = selector;
  75.                       // 如果選擇器不是自定義名稱，則為其創建對應的CSS 規則。
  76.                       if (!isCustomName) {
  77.                           const selectorRule = cssRules[styleSheet.insertRule(selector + "{animation-duration:0.0001s;animation-name:" + animId + ";}", cssRules.length)];
  78.                           selectorRule._id = selector;
  79.                       }
  80.                       animIds = [animId];
  81.                       selectorToAnimationMap[selector] = animIds;
  82.                   }
  83.                   // 遍歷動畫 ID，將回調函數添加到動畫回調列表中。
  84.                   animIds.forEach((animId) => {
  85.                       animationCallbacks[animId] = animationCallbacks[animId] || [];
  86.                       animationCallbacks[animId].push(callback);
  87.                   });
  88.               });
  89.           },
  90.           // `off` 方法用於移除 CSS 選擇器的監聽器。
  91.           // cssSelectors: 一個字符串或字符串數組，包含要停止監聽的 CSS 選擇器。
  92.           // callback: 可選的回調函數。如果提供，則僅移除與之匹配的監聽器。
  93.           off: function (cssSelectors, callback) {
  94.               // 將提供的選擇器轉換為數組形式。
  95.               const selectors = isArray(cssSelectors) ? cssSelectors : [cssSelectors];
  96.               // 遍歷選擇器，移除對應的監聽器。
  97.               selectors.forEach((selector) => {
  98.                   const animIds = selectorToAnimationMap[selector];
  99.                   if (!animIds)
  100.                       return;
  101.                   animIds.forEach((animId) => {
  102.                       const callbacks = animationCallbacks[animId];
  103.                       if (!callbacks)
  104.                           return;
  105.                       // 如果提供了回調函數，則僅移除與之匹配的監聽器。
  106.                       if (callback) {
  107.                           const index = callbacks.indexOf(callback);
  108.                           if (index !== -1) {
  109.                               callbacks.splice(index, 1);
  110.                           }
  111.                       }
  112.                       else {
  113.                           delete animationCallbacks[animId];
  114.                       }
  115.                       // 如果該選擇器沒有任何回調函數，則從選擇器映射和 CSS 規則中移除它。
  116.                       if (callbacks.length === 0) {
  117.                           delete selectorToAnimationMap[selector];
  118.                           const rulesToDelete = [];
  119.                           for (let i = 0, len = cssRules.length; i < len; i++) {
  120.                               const rule = cssRules[i];
  121.                               if (rule._id === selector) {
  122.                                   rulesToDelete.push(rule);
  123.                               }
  124.                           }
  125.                           rulesToDelete.forEach((rule) => {
  126.                               const index = Array.prototype.indexOf.call(cssRules, rule);
  127.                               if (index !== -1) {
  128.                                   styleSheet.deleteRule(index);
  129.                               }
  130.                           });
  131.                       }
  132.                   });
  133.               });
  134.           }
  135.       };
  136.   })();
  137.  
  138.   function onloadSafe(fn) {
  139.       if (document.readyState === "complete") {
  140.           fn();
  141.       }
  142.       else {
  143.           window.addEventListener("load", fn);
  144.       }
  145.   }
  146.  
  147.   function styleInject(css, ref) {
  148.     if ( ref === void 0 ) ref = {};
  149.     var insertAt = ref.insertAt;
  150.  
  151.     if (!css || typeof document === 'undefined') { return; }
  152.  
  153.     var head = document.head || document.getElementsByTagName('head')[0];
  154.     var style = document.createElement('style');
  155.     style.type = 'text/css';
  156.  
  157.     if (insertAt === 'top') {
  158.       if (head.firstChild) {
  159.         head.insertBefore(style, head.firstChild);
  160.       } else {
  161.         head.appendChild(style);
  162.       }
  163.     } else {
  164.       head.appendChild(style);
  165.     }
  166.  
  167.     if (style.styleSheet) {
  168.       style.styleSheet.cssText = css;
  169.     } else {
  170.       style.appendChild(document.createTextNode(css));
  171.     }
  172.   }
  173.  
  174.   var css_248z$2 = ".buttonStyles-module_container__l-r9Y{align-items:center;border:1px solid #fff;border-radius:5px;box-sizing:border-box;display:flex;justify-content:center;position:relative;width:100%}.buttonStyles-module_mainButton__b08pW{border:1px solid #fff;border-radius:5px;margin:0 auto;padding:8px 12px;width:85%}.buttonStyles-module_mainButton__b08pW,.buttonStyles-module_settingButton__-opQi{background-color:#202123;box-sizing:border-box;color:#fff;cursor:pointer;font-size:14px}.buttonStyles-module_settingButton__-opQi{border:none;border-radius:5px;padding:8px 14px;width:15%}.buttonStyles-module_menu__aeYDY{background-color:#202123;border:1px solid #fff;border-radius:15px;display:none;left:100%;max-height:240px;overflow-y:auto;position:absolute;top:0;width:100%;z-index:1}.buttonStyles-module_menuButton__eg9D8{background-color:#202123;border:1px solid #fff;border-radius:5px;color:#fff;cursor:pointer;display:block;font-size:14px;height:100%;padding:8px 12px;width:100%}.buttonStyles-module_containerNode_class__1rDgQ{position:relative}";
  175.   var styles$2 = {"container":"buttonStyles-module_container__l-r9Y","mainButton":"buttonStyles-module_mainButton__b08pW","settingButton":"buttonStyles-module_settingButton__-opQi","menu":"buttonStyles-module_menu__aeYDY","menuButton":"buttonStyles-module_menuButton__eg9D8","containerNode_class":"buttonStyles-module_containerNode_class__1rDgQ"};
  176.   styleInject(css_248z$2);
  177.  
  178.   // library.ts
  179.   const config = {
  180.       name: "aims-helper",
  181.       init_customize: [
  182.           {
  183.               name: '繁體中文初始化',
  184.               position: 'start',
  185.               autoEnter: true,
  186.               content: [
  187.                   `以下問答請使用繁體中文，並使用台灣用語。\n`,
  188.               ].join("")
  189.           }, {
  190.               name: '請繼續',
  191.               position: 'start',
  192.               autoEnter: true,
  193.               content: [
  194.                   `請繼續`,
  195.               ].join("")
  196.           }, {
  197.               name: '請從""繼續',
  198.               position: 'start',
  199.               autoEnter: false,
  200.               content: [
  201.                   `請從""繼續`,
  202.               ].join("")
  203.           }
  204.       ],
  205.       // ↓ 左邊選單的定位(上層)
  206.       NAV_MENU: 'nav > div.overflow-y-auto',
  207.       // ↓ 輸入框的定位
  208.       TEXT_INPUTBOX_POSITION: 'textarea.m-0',
  209.       // ↓ 送出按鈕的定位
  210.       SUBMIT_BUTTON_POSITION: 'button.absolute',
  211.       // ↓ 選單按鈕
  212.       MAIN_BUTTON_CLASS: 'main_button',
  213.       // ↓ 控制按鈕
  214.       SETTING_BUTTON_CLASS: 'setting_button',
  215.       // ↓ 選單
  216.       MENU_CLASS: 'main_menu',
  217.       // ↓ 按鈕文字
  218.       HELPER_MENU_TEXT: 'input helper',
  219.       // ↓ 按鈕用容器
  220.       CONTAINER_CLASS: 'helper_textcontainer',
  221.       // ↓ 模擬輸入於輸入框的事件
  222.       INPUT_EVENT: new Event('input', { bubbles: true }),
  223.   };
  224.  
  225.   // 將自定義內容插入到輸入框中
  226.   const insertCustomize = (customize, name) => {
  227.       const textInputbox = document.querySelector(config.TEXT_INPUTBOX_POSITION);
  228.       const item = customize.find((i) => i.name === name);
  229.       if (item) {
  230.           if (item.position === 'start') {
  231.               textInputbox.value = item.content + textInputbox.value;
  232.           }
  233.           else {
  234.               textInputbox.value += item.content;
  235.           }
  236.           textInputbox.dispatchEvent(config.INPUT_EVENT);
  237.           textInputbox.focus();
  238.           if (item.autoEnter) {
  239.               setTimeout(() => {
  240.                   const submitButton = document.querySelector(config.SUBMIT_BUTTON_POSITION);
  241.                   submitButton.click();
  242.               }, 100);
  243.           }
  244.       }
  245.       else {
  246.           console.error(`找不到名稱為 ${name} 的元素`);
  247.       }
  248.   };
  249.  
  250.   // 創建主按鈕
  251.   const createMainButton = (buttonText) => {
  252.       const mainButton = document.createElement("button");
  253.       mainButton.innerText = buttonText;
  254.       mainButton.classList.add(styles$2.mainButton);
  255.       mainButton.style.width = "86%";
  256.       return mainButton;
  257.   };
  258.   // 創建設定按鈕
  259.   const createSettingButton = () => {
  260.       const settingButton = document.createElement("button");
  261.       settingButton.innerText = "⚙️";
  262.       settingButton.classList.add(styles$2.settingButton);
  263.       settingButton.style.width = "14%";
  264.       settingButton.id = "settingButton";
  265.       return settingButton;
  266.   };
  267.   // 創建選項
  268.   const createMenuItem = (element, customize) => {
  269.       const menuItem = document.createElement("button");
  270.       menuItem.innerText = element.name;
  271.       menuItem.id = element.name;
  272.       menuItem.classList.add(styles$2.menuButton);
  273.       menuItem.addEventListener("click", (event) => {
  274.           insertCustomize(customize, event.target.id);
  275.       });
  276.       return menuItem;
  277.   };
  278.   // 創建選單(包含多個選項)
  279.   const createMenu = (containerNode, customize) => {
  280.       const menu = document.createElement("div");
  281.       menu.id = "helper_menu";
  282.       menu.classList.add(styles$2.menu);
  283.       menu.style.display = "none";
  284.       menu.style.width = `${containerNode.offsetWidth}px`;
  285.       customize.forEach((element) => {
  286.           const menuItem = createMenuItem(element, customize);
  287.           menu.appendChild(menuItem);
  288.       });
  289.       console.log('customize.length');
  290.       console.log(customize.length);
  291.       if (customize.length > 3) {
  292.           const height = 39;
  293.           // const height = containerNode.offsetHeight;
  294.           console.log('height');
  295.           console.log(height);
  296.           let offset = Number(customize.length / 2 * height);
  297.           console.log('offset');
  298.           console.log(offset);
  299.           menu.style.top = `-${offset}px`;
  300.           console.log('menu.style.top');
  301.           menu.style.maxHeight = `${height * 7 * 2}px`;
  302.           // 7 是左邊nav由下到上的選項數量
  303.           // 2 因為有被對切
  304.       }
  305.       return menu;
  306.   };
  307.  
  308.   const bindElementContainer = (elements, containerClass) => {
  309.       const container = document.createElement("div");
  310.       if (containerClass) {
  311.           container.classList.add(containerClass);
  312.       }
  313.       elements.forEach((element) => {
  314.           container.appendChild(element);
  315.       });
  316.       return container;
  317.   };
  318.  
  319.   // addMenuBtn 函數用於新增包含主按鈕和設定按鈕的選單按鈕
  320.   function addMenuBtnWrapper(containerNode, customize, buttonText = "Click Me" // 主按鈕的文字，預設值為 "Click Me"
  321.   ) {
  322.       // 創建主按鈕和設定按鈕
  323.       const mainButton = createMainButton(buttonText);
  324.       const settingButton = createSettingButton();
  325.       // 將主按鈕和設定按鈕組合在一個容器中
  326.       const assButton = bindElementContainer([settingButton, mainButton], config.CONTAINER_CLASS);
  327.       // 根據客製化選單項目創建選單
  328.       const menu = createMenu(containerNode, customize);
  329.       // 當滑鼠移到按鈕上時，顯示選單
  330.       assButton.addEventListener("mouseenter", () => {
  331.           menu.style.display = "block";
  332.       });
  333.       // 創建按鈕包裹器，並將組合按鈕和選單加入其中
  334.       const buttonWrapper = document.createElement("div");
  335.       buttonWrapper.style.width = `${containerNode.offsetWidth}px`;
  336.       buttonWrapper.appendChild(assButton);
  337.       buttonWrapper.appendChild(menu);
  338.       // 將按鈕包裹器加入到容器節點中
  339.       containerNode.appendChild(buttonWrapper);
  340.       // 當滑鼠離開按鈕包裹器時，隱藏選單
  341.       buttonWrapper.addEventListener("mouseleave", () => {
  342.           setTimeout(() => {
  343.               menu.style.display = "none";
  344.           }, 300);
  345.       });
  346.       console.log("已新增按鈕");
  347.   }
  348.  
  349.   var css_248z$1 = ".formPopupStyles-module_form-popup__cpX-x{background-color:#40414f;border:1px solid #000;height:60%;left:50%;max-height:1200px;max-width:800px;padding:30px;position:fixed;top:50%;transform:translate(-50%,-50%);width:80%;z-index:9999}.formPopupStyles-module_form__A8xi3{display:flex;flex-direction:column;gap:15px}.formPopupStyles-module_form-row__sMrG8{display:flex;flex-direction:column;gap:5px}.formPopupStyles-module_input__f-v3V{background-color:#545766;border:1px solid #fff;color:#fff;margin-left:4px;padding:4px 8px}textarea.formPopupStyles-module_input__f-v3V{min-height:100px;width:100%}";
  350.   var styles$1 = {"form-popup":"formPopupStyles-module_form-popup__cpX-x","form":"formPopupStyles-module_form__A8xi3","form-row":"formPopupStyles-module_form-row__sMrG8","input":"formPopupStyles-module_input__f-v3V"};
  351.   styleInject(css_248z$1);
  352.  
  353.   // createFormPopup.ts
  354.   function createFormPopup(options) {
  355.       // 創建彈出視窗
  356.       const formPopup = document.createElement('div');
  357.       formPopup.className = styles$1['form-popup'];
  358.       // 創建標題
  359.       const titleLabel = document.createElement('h2');
  360.       titleLabel.textContent = options.title;
  361.       formPopup.appendChild(titleLabel);
  362.       // 創建表單
  363.       const form = document.createElement('form');
  364.       formPopup.appendChild(form);
  365.       form.className = styles$1.form;
  366.       // 創建名稱輸入框
  367.       const nameLabel = document.createElement('label');
  368.       nameLabel.textContent = '名稱(name)';
  369.       form.appendChild(nameLabel);
  370.       const nameInput = document.createElement('input');
  371.       nameInput.type = 'text';
  372.       nameInput.className = styles$1.input;
  373.       form.appendChild(nameInput);
  374.       // 創建位置選擇
  375.       const positionLabel = document.createElement('label');
  376.       positionLabel.textContent = '位置(position)';
  377.       form.appendChild(positionLabel);
  378.       const positionSelect = document.createElement('select');
  379.       positionSelect.className = styles$1.input;
  380.       const positionStartOption = document.createElement('option');
  381.       positionStartOption.value = 'start';
  382.       positionStartOption.textContent = 'start';
  383.       const positionEndOption = document.createElement('option');
  384.       positionEndOption.value = 'end';
  385.       positionEndOption.textContent = 'end';
  386.       positionSelect.appendChild(positionStartOption);
  387.       positionSelect.appendChild(positionEndOption);
  388.       form.appendChild(positionSelect);
  389.       // 創建是否自動輸入選擇
  390.       const autoEnterLabel = document.createElement('label');
  391.       autoEnterLabel.textContent = '是否自動輸入(AutoEnter)';
  392.       form.appendChild(autoEnterLabel);
  393.       const autoEnterInput = document.createElement('input');
  394.       autoEnterInput.type = 'checkbox';
  395.       form.appendChild(autoEnterInput);
  396.       // 創建內容輸入框
  397.       const contentLabel = document.createElement('label');
  398.       contentLabel.textContent = '內容(content)';
  399.       form.appendChild(contentLabel);
  400.       const contentTextarea = document.createElement('textarea');
  401.       contentTextarea.className = `${styles$1.input} ${styles$1['textarea-input']}`;
  402.       form.appendChild(contentTextarea);
  403.       // 創建提交按鈕
  404.       const submitButton = document.createElement('button');
  405.       submitButton.type = 'submit';
  406.       submitButton.textContent = '提交';
  407.       form.appendChild(submitButton);
  408.       // 根據編輯模式，填充初始值
  409.       if (options.mode === 'edit' && options.initialValues) {
  410.           nameInput.value = options.initialValues.name;
  411.           positionSelect.value = options.initialValues.position;
  412.           autoEnterInput.checked = options.initialValues.autoEnter;
  413.           contentTextarea.value = options.initialValues.content;
  414.       }
  415.       // 提交表單時的處理
  416.       form.addEventListener('submit', (event) => {
  417.           event.preventDefault();
  418.           const values = {
  419.               name: nameInput.value,
  420.               position: positionSelect.value,
  421.               autoEnter: autoEnterInput.checked,
  422.               content: contentTextarea.value,
  423.           };
  424.           console.log('values', values);
  425.           options.onSubmit(values);
  426.           document.body.removeChild(formPopup);
  427.       });
  428.       // 點擊彈窗外的地方關閉彈窗
  429.       formPopup.addEventListener('click', (event) => {
  430.           if (event.target === formPopup) {
  431.               document.body.removeChild(formPopup);
  432.           }
  433.       });
  434.       // 將彈出視窗加入頁面中
  435.       document.body.appendChild(formPopup);
  436.   }
  437.  
  438.   var css_248z = ".setCustomizeBtn-module_popup__uF6hF{background:#525467;border:1px solid #000;height:80%;left:50%;max-height:1200px;max-width:800px;padding:30px;position:fixed;top:50%;transform:translate(-50%,-50%);width:80%;z-index:9999}.setCustomizeBtn-module_add-button__IASCv,.setCustomizeBtn-module_delete-button__8I8BH,.setCustomizeBtn-module_edit-button__NqnT6{border:2px solid #fff;margin:10px}.setCustomizeBtn-module_close-button__uw4Q6{position:absolute;right:5px;top:5px}.setCustomizeBtn-module_table-wrapper__LY27P{margin-bottom:20px;max-height:612px;overflow-y:auto}";
  439.   var styles = {"popup":"setCustomizeBtn-module_popup__uF6hF","add-button":"setCustomizeBtn-module_add-button__IASCv","edit-button":"setCustomizeBtn-module_edit-button__NqnT6","delete-button":"setCustomizeBtn-module_delete-button__8I8BH","close-button":"setCustomizeBtn-module_close-button__uw4Q6","table-wrapper":"setCustomizeBtn-module_table-wrapper__LY27P"};
  440.   styleInject(css_248z);
  441.  
  442.   function setCustomizeBtn(customize) {
  443.       // 找到 settingButton 元素
  444.       const settingButton = document.getElementById('settingButton');
  445.       // 當點擊 settingButton 時觸發事件
  446.       settingButton.addEventListener('click', () => {
  447.           // 創建彈出視窗
  448.           const popup = document.createElement('div');
  449.           popup.classList.add(styles.popup);
  450.           // 創建新增按鈕
  451.           const addButton = document.createElement('button');
  452.           addButton.textContent = '新增(add)';
  453.           addButton.classList.add(styles['add-button']);
  454.           // 當點擊 addButton 時觸發事件
  455.           addButton.addEventListener('click', () => {
  456.               // 使用 createFormPopup 函數
  457.               createFormPopup({
  458.                   title: '新增',
  459.                   mode: 'add',
  460.                   onSubmit: (values) => {
  461.                       const newItem = {
  462.                           name: values.name,
  463.                           position: values.position,
  464.                           autoEnter: values.autoEnter,
  465.                           content: values.content,
  466.                       };
  467.                       customize.push(newItem);
  468.                       renderTable();
  469.                   },
  470.               });
  471.           });
  472.           popup.appendChild(addButton);
  473.           // 創建編輯按鈕
  474.           const editButton = document.createElement('button');
  475.           editButton.textContent = '編輯(edit)';
  476.           editButton.classList.add(styles['edit-button']);
  477.           editButton.addEventListener('click', () => {
  478.               // 編輯一個 item
  479.               const index = prompt('請輸入要編輯的編號(edit index)');
  480.               if (index && Number(index) >= 1 && index <= customize.length) {
  481.                   const item = customize[Number(index) - 1];
  482.                   createFormPopup({
  483.                       title: '編輯',
  484.                       mode: 'edit',
  485.                       initialValues: {
  486.                           name: item.name,
  487.                           position: item.position,
  488.                           autoEnter: item.autoEnter,
  489.                           content: item.content,
  490.                       },
  491.                       onSubmit: (newValues) => {
  492.                           item.name = newValues.name;
  493.                           item.position = newValues.position;
  494.                           item.autoEnter = newValues.autoEnter;
  495.                           item.content = newValues.content;
  496.                           // 重新渲染表格
  497.                           renderTable();
  498.                       },
  499.                   });
  500.               }
  501.               else {
  502.                   alert('輸入的編號不合法');
  503.               }
  504.           });
  505.           popup.appendChild(editButton);
  506.           // 創建刪除按鈕
  507.           const deleteButton = document.createElement('button');
  508.           deleteButton.textContent = '刪除(delete)';
  509.           deleteButton.classList.add(styles['delete-button']);
  510.           deleteButton.addEventListener('click', () => {
  511.               // 刪除一個 item
  512.               const index = prompt('請輸入要刪除的編號(delete index)');
  513.               if (index && Number(index) >= 1 && index <= customize.length) {
  514.                   customize.splice(Number(index) - 1, 1);
  515.                   renderTable();
  516.               }
  517.               else {
  518.                   alert('輸入的編號不合法 (invalid index)');
  519.               }
  520.           });
  521.           popup.appendChild(deleteButton);
  522.           // 創建關閉按鈕
  523.           const closeButton = document.createElement('button');
  524.           closeButton.textContent = '儲存並離開(save&exit)';
  525.           closeButton.classList.add(styles['close-button']);
  526.           closeButton.addEventListener('click', () => {
  527.               console.log(customize);
  528.               // 儲存修改後的 customize 資料
  529.               GM_setValue('customizeData', customize);
  530.               // // 重寫一次 helper_menu
  531.               // const helper_menu = document.getElementById('helper_menu');
  532.               // const menu = createMenu(helper_menu);
  533.               // helper_menu.replaceWith(menu);
  534.               // 上面的做不出來
  535.               // 所以只好重新整理頁面
  536.               location.reload();
  537.               document.body.removeChild(popup);
  538.           });
  539.           popup.appendChild(closeButton);
  540.           // 創建表格
  541.           const table = document.createElement('table');
  542.           const tableWrapper = document.createElement('div');
  543.           tableWrapper.classList.add(styles['table-wrapper']);
  544.           tableWrapper.appendChild(table);
  545.           popup.appendChild(tableWrapper);
  546.           // popup.appendChild(table);
  547.           // 創建表頭
  548.           const thead = document.createElement('thead');
  549.           const tr = document.createElement('tr');
  550.           const th1 = document.createElement('th');
  551.           const th2 = document.createElement('th');
  552.           const th3 = document.createElement('th');
  553.           const th4 = document.createElement('th');
  554.           const th5 = document.createElement('th');
  555.           th1.textContent = '編號(index)';
  556.           th2.textContent = '名稱(name)';
  557.           th3.textContent = '位置(position)';
  558.           th4.textContent = '自動輸入(autoEnter)？';
  559.           th5.textContent = '內容(content)';
  560.           tr.appendChild(th1);
  561.           tr.appendChild(th2);
  562.           tr.appendChild(th3);
  563.           tr.appendChild(th4);
  564.           tr.appendChild(th5);
  565.           thead.appendChild(tr);
  566.           table.appendChild(thead);
  567.           // 創建表身
  568.           const tbody = document.createElement('tbody');
  569.           table.appendChild(tbody);
  570.           // 渲染表格
  571.           function renderTable() {
  572.               // 先清空表格內容
  573.               tbody.innerHTML = '';
  574.               // 重新渲染表格
  575.               customize.forEach((item, index) => {
  576.                   const tr = document.createElement('tr');
  577.                   const td1 = document.createElement('td');
  578.                   const td2 = document.createElement('td');
  579.                   const td3 = document.createElement('td');
  580.                   const td4 = document.createElement('td');
  581.                   const td5 = document.createElement('td');
  582.                   td1.textContent = index + 1;
  583.                   td2.textContent = item.name;
  584.                   td3.textContent = item.position;
  585.                   td4.textContent = item.autoEnter;
  586.                   td5.textContent = item.content;
  587.                   tr.appendChild(td1);
  588.                   tr.appendChild(td2);
  589.                   tr.appendChild(td3);
  590.                   tr.appendChild(td4);
  591.                   tr.appendChild(td5);
  592.                   tbody.appendChild(tr);
  593.               });
  594.           }
  595.           // 渲染初始表格
  596.           renderTable();
  597.           // 點擊彈窗外的地方關閉彈窗
  598.           popup.addEventListener('click', (event) => {
  599.               if (event.target === popup) {
  600.                   document.body.removeChild(popup);
  601.               }
  602.           });
  603.           // 將彈出視窗加入頁面中
  604.           document.body.appendChild(popup);
  605.       });
  606.   }
  607.  
  608.   main();
  609.   function main() {
  610.       // 頁面載入完成後執行
  611.       onloadSafe(() => {
  612.           // 監聽 nav 元素
  613.           console.log("=====監聽 nav 元素=====");
  614.           // 定義常用咒文
  615.           let customize;
  616.           sentinel.on("nav", (nav) => {
  617.               console.log("===== trigger sentinel.on nav =====");
  618.               // 讀取 customize 設定
  619.               let GM_customize = GM_getValue("customizeData", customize);
  620.               // 如果 user 已經有設定了就用 user 的，沒有就用預設值
  621.               if (GM_customize) {
  622.                   customize = GM_customize;
  623.               }
  624.               else {
  625.                   customize = config.init_customize;
  626.                   GM_setValue("customizeData", customize);
  627.               }
  628.               //找不到就新增
  629.               const container = document.getElementById("helper_menu");
  630.               if (!container) {
  631.                   // 獲得目標元素
  632.                   const aimsNode = document.querySelector(config.NAV_MENU);
  633.                   // 新增一個容器
  634.                   const container = document.createElement("div");
  635.                   container.classList.add(styles$2.containerNode_class);
  636.                   container.id = "helper_menu";
  637.                   if (aimsNode) {
  638.                       // 設定 container 寬度為父元素寬度
  639.                       container.style.width = `${aimsNode.offsetWidth}px`; // 設定 container 寬度為父元素寬度
  640.                       // 將容器元素插入到目標元素後面
  641.                       aimsNode.parentNode?.insertBefore(container, aimsNode.nextSibling);
  642.                       // 新增一個按鈕元素
  643.                       addMenuBtnWrapper(container, customize, config.HELPER_MENU_TEXT);
  644.                       // 設定 "設定按鈕"的點擊事件
  645.                       setCustomizeBtn(customize);
  646.                   }
  647.               }
  648.           });
  649.       });
  650.   }
  651.  
  652. }));