feat: customizable clicking icon action (#291)

Author: josStorer

src/_locales/en/main.json

@@ -115,5 +115,7 @@
   "API Modes": "API Modes",
   "Disable web mode history for better privacy protection, but it will result in unavailable conversations after a period of time": "Disable web mode history for better privacy protection, but it will result in unavailable conversations after a period of time",
   "Display selection tools next to input box to avoid blocking": "Display selection tools next to input box to avoid blocking",
-  "Close All Chats In This Page": "Close All Chats In This Page"
+  "Close All Chats In This Page": "Close All Chats In This Page",
+  "When Icon Clicked": "When Icon Clicked",
+  "Open Settings": "Open Settings"
 }

src/_locales/zh-hans/main.json

@@ -115,5 +115,7 @@
   "API Modes": "API模式",
   "Disable web mode history for better privacy protection, but it will result in unavailable conversations after a period of time": "禁用网页版模式历史记录以获得更好的隐私保护, 但会导致对话在一段时间后不可用",
   "Display selection tools next to input box to avoid blocking": "将选择浮动工具显示在输入框旁边以避免遮挡",
-  "Close All Chats In This Page": "关闭本页所有聊天"
+  "Close All Chats In This Page": "关闭本页所有聊天",
+  "When Icon Clicked": "当图标被点击时",
+  "Open Settings": "打开设置"
 }

src/_locales/zh-hant/main.json

@@ -115,5 +115,7 @@
   "API Modes": "API 模式",
   "Disable web mode history for better privacy protection, but it will result in unavailable conversations after a period of time": "停用網頁版模式歷史記錄以提升隱私保護，但會導致對話記錄在一段時間後無法使用",
   "Display selection tools next to input box to avoid blocking": "將選擇浮動工具顯示在輸入框旁邊以避免遮擋",
-  "Close All Chats In This Page": "關閉本頁所有對話"
+  "Close All Chats In This Page": "關閉本頁所有對話",
+  "When Icon Clicked": "當圖示被點擊時",
+  "Open Settings": "開啟設定"
 }

src/background/index.mjs

@@ -20,6 +20,7 @@ import {
   chatgptWebModelKeys,
   customApiModelKeys,
   defaultConfig,
+  getUserConfig,
   githubThirdPartyApiModelKeys,
   gptApiModelKeys,
   Models,
@@ -156,6 +157,21 @@ Browser.runtime.onMessage.addListener(async (message, sender) => {
     case 'OPEN_URL':
       openUrl(message.data.url)
       break
+    case 'OPEN_CHAT_WINDOW': {
+      const config = await getUserConfig()
+      const url = Browser.runtime.getURL('IndependentPanel.html')
+      const tabs = await Browser.tabs.query({ url: url, windowType: 'popup' })
+      if (!config.alwaysCreateNewConversationWindow && tabs.length > 0)
+        await Browser.windows.update(tabs[0].windowId, { focused: true })
+      else
+        await Browser.windows.create({
+          url: url,
+          type: 'popup',
+          width: 500,
+          height: 650,
+        })
+      break
+    }
     case 'REFRESH_MENU':
       refreshMenu()
       break

src/config/index.mjs

@@ -90,6 +90,7 @@ export const defaultConfig = {
   modelName: 'chatgptFree35',
 
   preferredLanguage: getNavigatorLanguage(),
+  clickIconAction: 'popup',
   insertAtTop: isMobile(),
   lockWhenAnswer: false,
   autoRegenAfterSwitchModel: false,

src/content-script/menu-tools/index.mjs

@@ -1,7 +1,5 @@
 import { getCoreContentText } from '../../utils/get-core-content-text'
-import { openUrl } from '../../utils/open-url'
 import Browser from 'webextension-polyfill'
-import { getUserConfig } from '../../config/index.mjs'
 
 export const config = {
   newChat: {
@@ -19,24 +17,21 @@ export const config = {
   openConversationPage: {
     label: 'Open Conversation Page',
     action: async () => {
-      openUrl(Browser.runtime.getURL('IndependentPanel.html'))
+      Browser.runtime.sendMessage({
+        type: 'OPEN_URL',
+        data: {
+          url: Browser.runtime.getURL('IndependentPanel.html'),
+        },
+      })
     },
   },
   openConversationWindow: {
     label: 'Open Conversation Window',
     action: async () => {
-      const config = await getUserConfig()
-      const url = Browser.runtime.getURL('IndependentPanel.html')
-      const tabs = await Browser.tabs.query({ url: url, windowType: 'popup' })
-      if (!config.alwaysCreateNewConversationWindow && tabs.length > 0)
-        await Browser.windows.update(tabs[0].windowId, { focused: true })
-      else
-        await Browser.windows.create({
-          url: url,
-          type: 'popup',
-          width: 500,
-          height: 650,
-        })
+      Browser.runtime.sendMessage({
+        type: 'OPEN_CHAT_WINDOW',
+        data: {},
+      })
     },
   },
   closeAllChats: {

src/popup/index.jsx

@@ -1,5 +1,34 @@
 import { render } from 'preact'
 import Popup from './Popup'
 import '../_locales/i18n-react'
+import { getUserConfig } from '../config/index.mjs'
+import { config as menuConfig } from '../content-script/menu-tools/index.mjs'
+import Browser from 'webextension-polyfill'
 
-render(<Popup />, document.getElementById('app'))
+getUserConfig().then(async (config) => {
+  if (config.clickIconAction === 'popup' || (window.innerWidth > 100 && window.innerHeight > 100)) {
+    render(<Popup />, document.getElementById('app'))
+  } else {
+    const message = {
+      itemId: config.clickIconAction,
+      selectionText: '',
+      useMenuPosition: false,
+    }
+    console.debug('custom icon action triggered', message)
+
+    if (config.clickIconAction in menuConfig) {
+      if (menuConfig[config.clickIconAction].action) {
+        menuConfig[config.clickIconAction].action()
+      }
+
+      if (menuConfig[config.clickIconAction].genPrompt) {
+        const currentTab = (await Browser.tabs.query({ active: true, currentWindow: true }))[0]
+        Browser.tabs.sendMessage(currentTab.id, {
+          type: 'CREATE_CHAT',
+          data: message,
+        })
+      }
+    }
+    window.close()
+  }
+})

src/popup/sections/FeaturePages.jsx

@@ -34,7 +34,12 @@ export function FeaturePages({ config, updateConfig }) {
       <button
         type="button"
         onClick={() => {
-          openUrl(Browser.runtime.getURL('IndependentPanel.html'))
+          Browser.runtime.sendMessage({
+            type: 'OPEN_URL',
+            data: {
+              url: Browser.runtime.getURL('IndependentPanel.html'),
+            },
+          })
         }}
       >
         {t('Open Conversation Page')}
@@ -43,11 +48,9 @@ export function FeaturePages({ config, updateConfig }) {
         <button
           type="button"
           onClick={() => {
-            Browser.windows.create({
-              url: Browser.runtime.getURL('IndependentPanel.html'),
-              type: 'popup',
-              width: 500,
-              height: 650,
+            Browser.runtime.sendMessage({
+              type: 'OPEN_CHAT_WINDOW',
+              data: {},
             })
           }}
         >

src/popup/sections/GeneralPart.jsx

@@ -16,6 +16,7 @@ import {
 import Browser from 'webextension-polyfill'
 import { languageList } from '../../config/language.mjs'
 import PropTypes from 'prop-types'
+import { config as menuConfig } from '../../content-script/menu-tools'
 
 GeneralPart.propTypes = {
   config: PropTypes.object.isRequired,
@@ -283,6 +284,27 @@ export function GeneralPart({ config, updateConfig }) {
           })}
         </select>
       </label>
+      <label>
+        <legend>{t('When Icon Clicked')}</legend>
+        <select
+          required
+          onChange={(e) => {
+            const mode = e.target.value
+            updateConfig({ clickIconAction: mode })
+          }}
+        >
+          <option value="popup" key="popup" selected={config.clickIconAction === 'popup'}>
+            {t('Open Settings')}
+          </option>
+          {Object.entries(menuConfig).map(([k, v]) => {
+            return (
+              <option value={k} key={k} selected={k === config.clickIconAction}>
+                {t(v.label)}
+              </option>
+            )
+          })}
+        </select>
+      </label>
       <label>
         <input
           type="checkbox"