diff --git a/src/components/ConversationCard/index.jsx b/src/components/ConversationCard/index.jsx
index c158fa5..0a4ba8a 100644
--- a/src/components/ConversationCard/index.jsx
+++ b/src/components/ConversationCard/index.jsx
@@ -5,6 +5,7 @@ import InputBox from '../InputBox'
 import ConversationItem from '../ConversationItem'
 import {
   createElementAtPosition,
+  getApiModesStringArrayFromConfig,
   isFirefox,
   isMobile,
   isSafari,
@@ -375,7 +376,7 @@ function ConversationCard(props) {
               else setSession(newSession)
             }}
           >
-            {config.activeApiModes.map((modelName) => {
+            {getApiModesStringArrayFromConfig(config, true).map((modelName) => {
               const desc = modelNameToDesc(modelName, t)
               if (desc)
                 return (
diff --git a/src/content-script/index.jsx b/src/content-script/index.jsx
index 3f20b51..22557cb 100644
--- a/src/content-script/index.jsx
+++ b/src/content-script/index.jsx
@@ -16,6 +16,7 @@ import {
   createElementAtPosition,
   cropText,
   endsWithQuestionMark,
+  getApiModesStringArrayFromConfig,
   getClientPosition,
   getPossibleElementByQuerySelector,
 } from '../utils'
@@ -354,7 +355,12 @@ async function prepareForForegroundRequests() {
 
   const userConfig = await getUserConfig()
 
-  if (!chatgptWebModelKeys.some((model) => userConfig.activeApiModes.includes(model))) return
+  if (
+    !chatgptWebModelKeys.some((model) =>
+      getApiModesStringArrayFromConfig(userConfig, true).includes(model),
+    )
+  )
+    return
 
   if (location.pathname === '/') {
     const input = document.querySelector('#prompt-textarea')
diff --git a/src/popup/sections/ApiModes.jsx b/src/popup/sections/ApiModes.jsx
index d6d57f5..a5e8203 100644
--- a/src/popup/sections/ApiModes.jsx
+++ b/src/popup/sections/ApiModes.jsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
-import { apiModeToModelName, modelNameToApiMode, modelNameToDesc } from '../../utils/index.mjs'
+import { apiModeToModelName, getApiModesFromConfig, modelNameToDesc } from '../../utils/index.mjs'
 import { PencilIcon, TrashIcon } from '@primer/octicons-react'
 import { useState } from 'react'
 import {
@@ -30,20 +30,7 @@ export function ApiModes({ config, updateConfig }) {
   const [editing, setEditing] = useState(false)
   const [editingApiMode, setEditingApiMode] = useState(defaultApiMode)
   const [editingIndex, setEditingIndex] = useState(-1)
-
-  const stringApiModes = config.customApiModes.map(apiModeToModelName)
-  const originalApiModes = config.activeApiModes
-    .map((modelName) => {
-      // 'customModel' is always active
-      if (stringApiModes.includes(modelName) || modelName === 'customModel') {
-        return
-      }
-      if (modelName === 'azureOpenAi') modelName += '-' + config.azureDeploymentName
-      if (modelName === 'ollama') modelName += '-' + config.ollamaModelName
-      return modelNameToApiMode(modelName)
-    })
-    .filter((apiMode) => apiMode)
-  const apiModes = [...originalApiModes, ...config.customApiModes]
+  const apiModes = getApiModesFromConfig(config)
 
   const editingComponent = (
     <div style={{ display: 'flex', flexDirection: 'column', '--spacing': '4px' }}>
diff --git a/src/popup/sections/GeneralPart.jsx b/src/popup/sections/GeneralPart.jsx
index 32bd6c5..e1ee1cf 100644
--- a/src/popup/sections/GeneralPart.jsx
+++ b/src/popup/sections/GeneralPart.jsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { useState } from 'react'
 import FileSaver from 'file-saver'
-import { openUrl, modelNameToDesc } from '../../utils/index.mjs'
+import { openUrl, modelNameToDesc, getApiModesStringArrayFromConfig } from '../../utils/index.mjs'
 import {
   isUsingOpenAiApiKey,
   isUsingAzureOpenAi,
@@ -159,7 +159,7 @@ export function GeneralPart({ config, updateConfig }) {
               updateConfig({ modelName: modelName })
             }}
           >
-            {config.activeApiModes.map((modelName) => {
+            {getApiModesStringArrayFromConfig(config, true).map((modelName) => {
               const desc = modelNameToDesc(modelName, t)
               if (desc)
                 return (
diff --git a/src/utils/model-name-convert.mjs b/src/utils/model-name-convert.mjs
index 4118bb6..fff47fe 100644
--- a/src/utils/model-name-convert.mjs
+++ b/src/utils/model-name-convert.mjs
@@ -78,3 +78,30 @@ export function apiModeToModelName(apiMode) {
 
   return apiMode.itemName
 }
+
+export function getApiModesFromConfig(config, onlyActive) {
+  const stringApiModes = config.customApiModes
+    .map((apiMode) => {
+      if (onlyActive) {
+        if (apiMode.active) return apiModeToModelName(apiMode)
+      } else return apiModeToModelName(apiMode)
+      return false
+    })
+    .filter((apiMode) => apiMode)
+  const originalApiModes = config.activeApiModes
+    .map((modelName) => {
+      // 'customModel' is always active
+      if (stringApiModes.includes(modelName) || modelName === 'customModel') {
+        return
+      }
+      if (modelName === 'azureOpenAi') modelName += '-' + config.azureDeploymentName
+      if (modelName === 'ollama') modelName += '-' + config.ollamaModelName
+      return modelNameToApiMode(modelName)
+    })
+    .filter((apiMode) => apiMode)
+  return [...originalApiModes, ...config.customApiModes]
+}
+
+export function getApiModesStringArrayFromConfig(config, onlyActive) {
+  return getApiModesFromConfig(config, onlyActive).map(apiModeToModelName)
+}