支援產生下拉選單

README.md

@@ -515,5 +515,10 @@ ChatGPT 雖然很厲害，但也有它的極限，所以我們要加強自己的
 
 ### 1.0.7 版
 送審日期：2023/9/9
+送審日期：2023/9/11
+- 支援輸入 {{}} 即可代表一個輸入框
+
+### 1.0.8 版
+送審日期：2023/9/12
 送審日期：送審中
-- 支援輸入 {{}} 即可代表一個輸入框
+- 支援輸入 {{下拉選單|| 選項一, 選項二, 選項三 ||s}} 可生成一個下拉選單，且預設第一個選項

_locales/en/messages.json

@@ -143,7 +143,7 @@
     "message":"Pressing tab can move to the next cell, and pressing shift + tab can move back to the previous cell."
   },
   "placeholder_supper_prompt_desc": {
-    "message": "You can use {{}} to represent a field. Inside {{}}, you can set the field name and default value, for example: {{ Role || Chef }}. In addition, you can also use {{}} directly to represent an input box. You can also input a piece of text without creating a field. If the button name or template content is not filled in, it will not be displayed in the right-side menu."
+    "message": "Input {{ field name }} generates an input field with the field name, or you can simply input {{}}.
Input {{ field name || default value }} generates an input field with the field name and a default value.
Input {{ field name || option one, option two, option three || s }} generates a dropdown menu with the default value as the first option."
   },
   "placeholder_keyword_input":{
     "message":"Category or Keyword..."

_locales/ja/messages.json

@@ -143,7 +143,7 @@
     "message":"タブを押すと次のセルに移動できます。Shift + タブを押すと前のセルに戻ることができます。"
   },
   "placeholder_supper_prompt_desc": {
-    "message": "{{}}はフィールドを表すために使用できます。{{}}の中には、フィールド名とデフォルト値を設定できます。例えば、{{ Role || Chef }}です。さらに、{{}}を使用して直接入力ボックスを表すこともできます。フィールドを作成せずにテキストを入力することもできます。ボタン名やテンプレートの内容が入力されていない場合、右側のメニューに表示されません。"
+    "message": "入力 {{ フィールド名 }} は、フィールド名を持つ入力フィールドを生成します。また、{{}} を単に入力することもできます。
入力 {{ フィールド名 || デフォルト値 }} はフィールド名とデフォルト値を持つ入力フィールドを生成します。
入力 {{ フィールド名 || オプション1, オプション2, オプション3 || s }} はデフォルト値を最初のオプションとしたドロップダウンメニューを生成します。"
   },
   "placeholder_keyword_input":{
     "message":"キーワード..."

_locales/ko/messages.json

@@ -143,7 +143,7 @@
     "message":"Tab을 누르면 다음 셀로 이동할 수 있으며, Shift + Tab을 누르면 이전 셀로 이동할 수 있습니다."
   },
   "placeholder_supper_prompt_desc": {
-    "message": "{{}}를 사용하여 필드를 나타낼 수 있습니다. {{}} 안에 필드 이름과 기본값을 설정할 수 있으며, 예를 들면 {{ Role || 요리사 }}와 같이 설정할 수 있습니다. 또한, {{}}를 사용하여 직접 입력 상자를 나타낼 수도 있습니다. 필드를 생성하지 않고 텍스트를 입력할 수도 있습니다. 버튼 이름이나 템플릿 내용이 입력되지 않은 경우, 오른쪽 메뉴에 표시되지 않습니다."
+    "message": "입력 {{ 필드 이름 }}은(는) 필드 이름을 가진 입력 필드를 생성합니다. 또는 간단히 {{}}를 입력할 수도 있습니다.
입력 {{ 필드 이름 || 기본 값 }} 은 필드 이름과 기본 값이 있는 입력 필드를 생성합니다.
입력 {{ 필드 이름 || 옵션 하나, 옵션 둘, 옵션 셋 || s }} 은 기본 값이 첫 번째 옵션인 드롭다운 메뉴를 생성합니다."
   },
   "placeholder_keyword_input":{
     "message":"분류명 또는 키워드 ..."

_locales/zh_CN/messages.json

@@ -143,7 +143,7 @@
     "message":"按下 Tab 可以移动到下一个单元格，按下 Shift + Tab 可以移回上一个单元格。"
   },
   "placeholder_supper_prompt_desc": {
-    "message": "您可以使用{{}}表示一个字段。在{{}}内，您可以设置字段名称和默认值，例如：{{ 角色 || 厨师 }}。此外，您也可以直接使用{{}}表示一个输入框。您还可以输入一段文本而不创建字段。如果未填写按钮名称或模板内容，它将不会显示在右侧菜单中。"
+    "message": "输入 {{ 字段名称 }} 生成一个带有字段名称的输入框，或者您也可以只输入 {{}}。
输入 {{ 字段名称 || 默认值 }} 生成一个带有字段名称和默认值的输入框。
输入 {{ 字段名称 || 选项一, 选项二, 选项三 || s }} 生成一个下拉菜单，默认值为第一个选项。"
   },
   "placeholder_keyword_input":{
     "message":"分类名称 或 关键字..."

_locales/zh_TW/messages.json

@@ -143,7 +143,7 @@
     "message":"按下 tab 可移動到下一格，按下 shift + tab 可移動回上一格。"
   },
   "placeholder_supper_prompt_desc": {
-    "message": "您可以使用{{}}表示一個欄位。在{{}}內，您可以設定欄位名稱和預設值，例如：{{ 角色 || 廚師 }}。此外，您也可以直接使用{{}}表示一個輸入框。您還可以輸入一段文字而不創建欄位。如果未填寫按鈕名稱或範本內容，它將不會顯示在右側選單中。"
+    "message": "輸入 {{ 欄位名稱 }} 產生一個帶有欄位名稱的輸入框，也可只輸入{{}}。
輸入 {{ 欄位名稱 || 預設值 }} 產生一個帶有欄位名稱和預設值的輸入框。
輸入 {{ 欄位名稱 || 選項一, 選項二, 選項三 ||s}} 產生一個下拉選單，預設值為第一個選項。"
   },
   "placeholder_keyword_input":{
     "message":"分類名稱 或 關鍵字..."

js/content.js

@@ -851,7 +851,7 @@ const SuperPromptSettingsListLength = 50;
 let DefaultEmptySuperPromptList = [];
 
 Array.from({ length: SuperPromptSettingsAllItems }).forEach((_, index) => {
-  if (index > 2) {
+  if (index > 3) {
     DefaultEmptySuperPromptList.push({
       key: index + 1,
       text: "SuperPrompt" + (index + 1),
@@ -891,6 +891,18 @@ let defaultSuperPromptListTW = [
     handleClickFn: null,
     isVisible: true,
   },
+  {
+    key: 4,
+    text: "使用範例",
+    prompt:
+      `輸入 {{}} 可產生一個輸入框
+      輸入 {{ 欄位名稱 }} 可產生一個具有欄位名稱的輸入框
+      輸入 {{ 欄位名稱 || 預設值 }} 可產生一個具有欄位名稱的輸入框，且有預設值
+      輸入 {{ 欄位名稱 || 選項一, 選項二, 選項三 ||s}} 可產生一個具有欄位名稱的下拉選單，且預設值為第一個選項`,
+    buttonElement: null,
+    handleClickFn: null,
+    isVisible: true,
+  },
 ];
 defaultSuperPromptListTW = [
   ...defaultSuperPromptListTW,
@@ -925,6 +937,18 @@ let defaultSuperPromptListJA = [
     handleClickFn: null,
     isVisible: true,
   },
+  {
+    key: 4,
+    text: "使用例",
+    prompt:
+      `{{}} を入力すると、入力ボックスが生成されます。
+      {{フィールド名}} を入力すると、フィールド名を持つ入力ボックスが生成されます。
+      {{フィールド名 || デフォルト値}} を入力すると、フィールド名とデフォルト値を持つ入力ボックスが生成されます。
+      {{フィールド名 || オプション1, オプション2, オプション3 ||s}} を入力すると、フィールド名を持つドロップダウンメニューが生成され、デフォルト値は最初のオプションになります。`,
+    buttonElement: null,
+    handleClickFn: null,
+    isVisible: true,
+  },
 ];
 defaultSuperPromptListJA = [
   ...defaultSuperPromptListJA,
@@ -959,6 +983,18 @@ let defaultSuperPromptListEN = [
     handleClickFn: null,
     isVisible: true,
   },
+  {
+    key: 4,
+    text: "Usage Example",
+    prompt:
+      `Entering {{}} will generate an input box.
+      Entering {{field name}} will generate an input box with the field name.
+      Entering {{field name || default value}} will generate an input box with the field name and a default value.
+      Entering {{field name || option one, option two, option three ||s}} will generate a dropdown menu with the field name, and the default value will be the first option.`,
+    buttonElement: null,
+    handleClickFn: null,
+    isVisible: true,
+  },
 ];
 defaultSuperPromptListEN = [
   ...defaultSuperPromptListEN,
@@ -993,6 +1029,18 @@ let defaultSuperPromptListCN = [
     handleClickFn: null,
     isVisible: true,
   },
+  {
+    key: 4,
+    text: "使用示例",
+    prompt:
+      `输入 {{}} 将生成一个输入框。
+      输入 {{字段名称}} 将生成一个带有字段名称的输入框。
+      输入 {{字段名称 || 默认值}} 将生成一个带有字段名称和默认值的输入框。
+      输入 {{字段名称 || 选项一, 选项二, 选项三 ||s}} 将生成一个带有字段名称的下拉菜单，默认值为第一个选项。`,
+    buttonElement: null,
+    handleClickFn: null,
+    isVisible: true,
+  },
 ];
 defaultSuperPromptListCN = [
   ...defaultSuperPromptListCN,
@@ -1027,6 +1075,18 @@ let defaultSuperPromptListKO = [
     handleClickFn: null,
     isVisible: true,
   },
+  {
+    key: 4,
+    text: "사용 예시",
+    prompt:
+      `{{}}를 입력하면 입력 상자가 생성됩니다.
+      {{필드 이름}}을 입력하면 필드 이름이 있는 입력 상자가 생성됩니다.
+      {{필드 이름 || 기본 값}}을 입력하면 필드 이름과 기본 값이 있는 입력 상자가 생성됩니다.
+      {{필드 이름 || 옵션 하나, 옵션 둘, 옵션 셋 ||s}}를 입력하면 필드 이름이 있는 드롭다운 메뉴가 생성되며, 기본 값은 첫 번째 옵션입니다.`,
+    buttonElement: null,
+    handleClickFn: null,
+    isVisible: true,
+  },
 ];
 defaultSuperPromptListKO = [
   ...defaultSuperPromptListKO,
@@ -1443,6 +1503,10 @@ function findGroupAndIndex(promptId) {
           background-color: rgba(32,33,35,1);
           color: #d1d5db !important;
       }
+      .dark .dialog select {
+        background-color: rgba(32,33,35,1);
+        color: #d1d5db !important;
+    }
       .dark .my-table th{
           background-color: rgba(236,236,241,.2);
       }
@@ -3719,8 +3783,10 @@ function findGroupAndIndex(promptId) {
       }
     });
 
-    const chatInput = document.querySelector('#prompt-textarea');
-    const sendButton = chatInput.parentElement.querySelector("button:last-child") || chatInput.nextElementSibling;
+    const chatInput = document.querySelector("#prompt-textarea");
+    const sendButton =
+      chatInput.parentElement.querySelector("button:last-child") ||
+      chatInput.nextElementSibling;
 
     if (!chatInput) {
       alert(i18n("alert_not_found_input"));
@@ -4178,9 +4244,9 @@ function findGroupAndIndex(promptId) {
     // 移除重複的，但將 {{}} 是為獨立的一個
     const uniqueMatches = [];
     const countMap = {};
-    
+
     for (const match of matches) {
-      if (match === '{{}}') {
+      if (match === "{{}}") {
         uniqueMatches.push(match);
       } else {
         if (!countMap[match]) {
@@ -4189,31 +4255,63 @@ function findGroupAndIndex(promptId) {
         }
       }
     }
-    
+
     if (!uniqueMatches) {
       return;
     }
 
     let htmlStr = "";
 
     uniqueMatches.forEach((string, i) => {
-      let [fieldName, fieldValue] = string
+      let [fieldName = "", fieldValue = "", fieldType = "t"] = string
         ?.slice(2, -2)
         ?.split("||")
         ?.map((s) => s?.trim());
+
       if (!fieldValue) {
         fieldValue = "";
       }
-      htmlStr += `
-          <div class="fieldItem">
-            <div class="superPromptName" style="width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">${fieldName}</div>
-            <div class="center">
-              <textarea rows="3" style="width:100%" tabindex="${
-                i + 1
-              }" class="super-prompt-text superPromptText" placeholder="${PlaceholderPromptInputTips}">${fieldValue}</textarea>
-            </div>
-          </div>
-        `;
+
+      fieldType = fieldType?.trim()?.toLocaleLowerCase();
+
+      switch (fieldType) {
+        case "s":
+          htmlStr += `
+                <div class="fieldItem">
+                  <div class="superPromptName" style="width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">${fieldName}</div>
+                  <div class="center">
+                    <select style="width:100%" tabindex="${
+                      i + 1
+                    }" class="super-prompt-text superPromptText">
+                      ${fieldValue
+                        .split(",")
+                        .map((option, index) => {
+                          if (index === 0) {
+                            return `<option value="${option}" selected>${option}</option>`;
+                          }
+                          return `<option value="${option}">${option}</option>`;
+                        })
+                        .join("")}
+                    </select>
+                  </div>
+                </div>
+              `;
+          break;
+
+        default:
+        case "t":
+          htmlStr += `
+                <div class="fieldItem">
+                  <div class="superPromptName" style="width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">${fieldName}</div>
+                  <div class="center">
+                    <textarea rows="3" style="width:100%" tabindex="${
+                      i + 1
+                    }" class="super-prompt-text superPromptText" placeholder="${PlaceholderPromptInputTips}">${fieldValue}</textarea>
+                  </div>
+                </div>
+              `;
+          break;
+      }
     });
 
     table.innerHTML += htmlStr;
@@ -4222,8 +4320,10 @@ function findGroupAndIndex(promptId) {
     if (table.querySelectorAll(".superPromptText").length === 1) {
       const textarea = table.querySelectorAll(".superPromptText")[0];
 
-      textarea.style = "width:100%;height:380px;";
-      textarea.placeholder = PlaceholderPromptTextarea;
+      if (table.querySelectorAll("textarea.superPromptText").length === 1) {
+        textarea.style = "width:100%;height:380px;";
+        textarea.placeholder = PlaceholderPromptTextarea;
+      }
 
       textarea.addEventListener("keydown", (event) => {
         // prevent submitting blank on enter
@@ -4260,16 +4360,23 @@ function findGroupAndIndex(promptId) {
     }
 
     // 如果只有兩個，高度再加大一些
-    if (table.querySelectorAll(".superPromptText").length === 2) {
-      const textareaElements = table.querySelectorAll(".superPromptText");
+    if (
+      table.querySelectorAll(".superPromptText").length === 2 &&
+      table.querySelectorAll("textarea.superPromptText").length === 2
+    ) {
+      const textareaElements = table.querySelectorAll(
+        "textarea.superPromptText"
+      );
       textareaElements.forEach((textarea) => {
         textarea.style = "width:100%;height:165px;";
       });
     }
 
     // 如果兩個以上，最後一個增加 margin bottom
     if (table.querySelectorAll(".superPromptText").length > 2) {
-      const textareaElements = table.querySelectorAll(".superPromptText");
+      const textareaElements = table.querySelectorAll(
+        ".superPromptText"
+      );
       textareaElements[textareaElements.length - 1].style.marginBottom = "20px";
     }
 
@@ -4290,9 +4397,9 @@ function findGroupAndIndex(promptId) {
     // 移除重複的，但將 {{}} 是為獨立的一個
     const uniqueMatches = [];
     const countMap = {};
-    
+
     for (const match of matches) {
-      if (match === '{{}}') {
+      if (match === "{{}}") {
         uniqueMatches.push(match);
       } else {
         if (!countMap[match]) {
@@ -4315,16 +4422,16 @@ function findGroupAndIndex(promptId) {
     }
 
     function escapeRegExp(string) {
-      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     }
 
     for (let i = 0; i < superPromptTextList.length; i++) {
       const uniqueMatch = escapeRegExp(uniqueMatches[i]);
-      const flag = uniqueMatch == escapeRegExp('{{}}') ? '' : 'g';
+      const flag = uniqueMatch == escapeRegExp("{{}}") ? "" : "g";
       const regex = new RegExp(uniqueMatch, flag);
       message = message.replace(regex, superPromptTextList[i].value);
     }
-    
+
     superPromptDialog.style.display = "none";
     sendMessage(message);
   }
@@ -5393,7 +5500,7 @@ function findGroupAndIndex(promptId) {
 
   function controlSuperDialogTabindex() {
     let superPromptDialogTabindexElements = superPromptDialog.querySelectorAll(
-      "input, textarea, button"
+      "input, select ,textarea, button"
     );
 
     const allTabindexElements = [...superPromptDialogTabindexElements];

manifest.json

@@ -3,7 +3,7 @@
   "name": "__MSG_extension_name__",
   "description": "__MSG_extension_description__",
   "author": "Joe",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "default_locale": "en",
   "icons": {
     "16": "images/icon/16.png",