Add support for custom Selection Tools in right-click context menu

src/background/menus.mjs

@@ -19,6 +19,12 @@ const onClickMenu = (info, tab) => {
         type: 'CREATE_CHAT',
         data: message,
       })
+    } else if (message.itemId.startsWith('custom_')) {
+      // Handle custom selection tools
+      Browser.tabs.sendMessage(currentTab.id, {
+        type: 'CREATE_CHAT',
+        data: message,
+      })
     } else if (message.itemId in menuConfig) {
       if (menuConfig[message.itemId].action) {
         menuConfig[message.itemId].action(true, tab)
@@ -37,7 +43,8 @@ export function refreshMenu() {
   if (Browser.contextMenus.onClicked.hasListener(onClickMenu))
     Browser.contextMenus.onClicked.removeListener(onClickMenu)
   Browser.contextMenus.removeAll().then(async () => {
-    if ((await getUserConfig()).hideContextMenu) return
+    const userConfig = await getUserConfig()
+    if (userConfig.hideContextMenu) return
 
     await getPreferredLanguageKey().then((lang) => {
       changeLanguage(lang)
@@ -62,15 +69,32 @@ export function refreshMenu() {
       contexts: ['selection'],
       type: 'separator',
     })
+
+    // Add default selection tools that are active
     for (const index in defaultConfig.selectionTools) {
       const key = defaultConfig.selectionTools[index]
       const desc = defaultConfig.selectionToolsDesc[index]
-      Browser.contextMenus.create({
-        id: menuId + key,
-        parentId: menuId,
-        title: t(desc),
-        contexts: ['selection'],
-      })
+      if (userConfig.activeSelectionTools.includes(key)) {
+        Browser.contextMenus.create({
+          id: menuId + key,
+          parentId: menuId,
+          title: t(desc),
+          contexts: ['selection'],
+        })
+      }
+    }
+
+    // Add custom selection tools that are active
+    for (let i = 0; i < userConfig.customSelectionTools.length; i++) {
+      const tool = userConfig.customSelectionTools[i]
+      if (tool.active && tool.name) {
+        Browser.contextMenus.create({
+          id: menuId + 'custom_' + i,
+          parentId: menuId,
+          title: tool.name,
+          contexts: ['selection'],
+        })
+      }
     }
 
     Browser.contextMenus.onClicked.addListener(onClickMenu)

src/content-script/index.jsx

@@ -284,8 +284,24 @@ async function prepareForRightClickMenu() {
     if (message.type === 'CREATE_CHAT') {
       const data = message.data
       let prompt = ''
+      const userConfig = await getUserConfig()
+
       if (data.itemId in toolsConfig) {
         prompt = await toolsConfig[data.itemId].genPrompt(data.selectionText)
+      } else if (data.itemId.startsWith('custom_')) {
+        // Handle custom selection tools from context menu
+        const customIndex = parseInt(data.itemId.replace('custom_', ''), 10)
+        if (
+          !isNaN(customIndex) &&
+          customIndex >= 0 &&
+          userConfig.customSelectionTools &&
+          customIndex < userConfig.customSelectionTools.length
+        ) {
+          const customTool = userConfig.customSelectionTools[customIndex]
+          if (customTool.active && customTool.name) {
+            prompt = customTool.prompt.replace('{{selection}}', data.selectionText)
+          }
+        }
       } else if (data.itemId in menuConfig) {
         const menuItem = menuConfig[data.itemId]
         if (!menuItem.genPrompt) return
@@ -298,7 +314,6 @@ async function prepareForRightClickMenu() {
         : { x: window.innerWidth / 2 - 300, y: window.innerHeight / 2 - 200 }
       const container = createElementAtPosition(position.x, position.y)
       container.className = 'chatgptbox-toolbar-container-not-queryable'
-      const userConfig = await getUserConfig()
       render(
         <FloatingToolbar
           session={initSession({

src/popup/sections/SelectionTools.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import { useState } from 'react'
 import { defaultConfig } from '../../config/index.mjs'
 import { PencilIcon, TrashIcon } from '@primer/octicons-react'
+import Browser from 'webextension-polyfill'
 
 SelectionTools.propTypes = {
   config: PropTypes.object.isRequired,
@@ -36,7 +37,7 @@ export function SelectionTools({ config, updateConfig }) {
           {t('Cancel')}
         </button>
         <button
-          onClick={(e) => {
+          onClick={async (e) => {
             e.preventDefault()
             if (!editingTool.name) {
               setErrorMessage(t('Name is required'))
@@ -47,14 +48,17 @@ export function SelectionTools({ config, updateConfig }) {
               return
             }
             if (editingIndex === -1) {
-              updateConfig({
+              await updateConfig({
                 customSelectionTools: [...config.customSelectionTools, editingTool],
               })
             } else {
               const customSelectionTools = [...config.customSelectionTools]
               customSelectionTools[editingIndex] = editingTool
-              updateConfig({ customSelectionTools })
+              await updateConfig({ customSelectionTools })
             }
+            Browser.runtime.sendMessage({
+              type: 'REFRESH_MENU',
+            })
             setEditing(false)
           }}
         >
@@ -102,11 +106,14 @@ export function SelectionTools({ config, updateConfig }) {
           <input
             type="checkbox"
             checked={config.activeSelectionTools.includes(key)}
-            onChange={(e) => {
+            onChange={async (e) => {
               const checked = e.target.checked
               const activeSelectionTools = config.activeSelectionTools.filter((i) => i !== key)
               if (checked) activeSelectionTools.push(key)
-              updateConfig({ activeSelectionTools })
+              await updateConfig({ activeSelectionTools })
+              Browser.runtime.sendMessage({
+                type: 'REFRESH_MENU',
+              })
             }}
           />
           {t(toolsConfig[key].label)}
@@ -122,10 +129,13 @@ export function SelectionTools({ config, updateConfig }) {
               <input
                 type="checkbox"
                 checked={tool.active}
-                onChange={(e) => {
+                onChange={async (e) => {
                   const customSelectionTools = [...config.customSelectionTools]
                   customSelectionTools[index] = { ...tool, active: e.target.checked }
-                  updateConfig({ customSelectionTools })
+                  await updateConfig({ customSelectionTools })
+                  Browser.runtime.sendMessage({
+                    type: 'REFRESH_MENU',
+                  })
                 }}
               />
               {tool.name}
@@ -145,11 +155,14 @@ export function SelectionTools({ config, updateConfig }) {
                 </div>
                 <div
                   style={{ cursor: 'pointer' }}
-                  onClick={(e) => {
+                  onClick={async (e) => {
                     e.preventDefault()
                     const customSelectionTools = [...config.customSelectionTools]
                     customSelectionTools.splice(index, 1)
-                    updateConfig({ customSelectionTools })
+                    await updateConfig({ customSelectionTools })
+                    Browser.runtime.sendMessage({
+                      type: 'REFRESH_MENU',
+                    })
                   }}
                 >
                   <TrashIcon />