diff --git a/package-lock.json b/package-lock.json index d0a6e62..f5a85b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "react-i18next": "^12.2.0", "react-markdown": "^8.0.7", "react-tabs": "^4.2.1", + "react-toastify": "^9.1.2", "rehype-highlight": "^6.0.0", "rehype-katex": "^6.0.2", "rehype-raw": "^6.1.1", @@ -7671,6 +7672,18 @@ "react": "^16.8.0 || ^17.0.0-0 || ^18.0.0" } }, + "node_modules/react-toastify": { + "version": "9.1.2", + "resolved": "https://registry.npmmirror.com/react-toastify/-/react-toastify-9.1.2.tgz", + "integrity": "sha512-PBfzXO5jMGEtdYR5jxrORlNZZe/EuOkwvwKijMatsZZm8IZwLj01YvobeJYNjFcA6uy6CVrx2fzL9GWbhWPTDA==", + "dependencies": { + "clsx": "^1.1.1" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.2.tgz", diff --git a/package.json b/package.json index b5e024f..f31e00f 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "react-i18next": "^12.2.0", "react-markdown": "^8.0.7", "react-tabs": "^4.2.1", + "react-toastify": "^9.1.2", "rehype-highlight": "^6.0.0", "rehype-katex": "^6.0.2", "rehype-raw": "^6.1.1", diff --git a/src/_locales/en/main.json b/src/_locales/en/main.json index c0b85c7..1908b96 100644 --- a/src/_locales/en/main.json +++ b/src/_locales/en/main.json @@ -107,6 +107,7 @@ "Always Create New Conversation Window": "Always Create New Conversation Window", "Please keep this tab open. You can now use the web mode of ChatGPTBox": "Please keep this tab open. You can now use the web mode of ChatGPTBox", "Go Back": "Go Back", + "Pin Tab": "Pin Tab", "Modules": "Modules", "API Params": "API Params", "API Url": "API Url", diff --git a/src/_locales/zh-hans/main.json b/src/_locales/zh-hans/main.json index 5144e9b..18b7d39 100644 --- a/src/_locales/zh-hans/main.json +++ b/src/_locales/zh-hans/main.json @@ -107,6 +107,7 @@ "Always Create New Conversation Window": "总是创建新的对话窗口", "Please keep this tab open. You can now use the web mode of ChatGPTBox": "请保持这个页面打开, 现在你可以使用ChatGPTBox的网页版模式", "Go Back": "返回", + "Pin Tab": "固定页面", "Modules": "模块", "API Params": "API参数", "API Url": "API地址", diff --git a/src/_locales/zh-hant/main.json b/src/_locales/zh-hant/main.json index 1c47737..9a28f9e 100644 --- a/src/_locales/zh-hant/main.json +++ b/src/_locales/zh-hant/main.json @@ -107,6 +107,7 @@ "Always Create New Conversation Window": "總是建立新的對話視窗", "Please keep this tab open. You can now use the web mode of ChatGPTBox": "請保持這個頁面開啟, 現在妳可以使用ChatGPTBox的網頁版模式", "Go Back": "返回", + "Pin Tab": "固定頁面", "Modules": "模組", "API Params": "API參數", "API Url": "API網址", diff --git a/src/background/index.mjs b/src/background/index.mjs index 024e32b..2e4b8a0 100644 --- a/src/background/index.mjs +++ b/src/background/index.mjs @@ -143,6 +143,12 @@ Browser.runtime.onMessage.addListener(async (message, sender) => { } break } + case 'SET_CHATGPT_TAB': { + await setUserConfig({ + chatgptTabId: sender.tab.id, + }) + break + } case 'ACTIVATE_URL': await Browser.tabs.update(message.data.tabId, { active: true }) break diff --git a/src/components/MarkdownRender/Hyperlink.jsx b/src/components/MarkdownRender/Hyperlink.jsx index b758c6e..c482316 100644 --- a/src/components/MarkdownRender/Hyperlink.jsx +++ b/src/components/MarkdownRender/Hyperlink.jsx @@ -16,7 +16,7 @@ export function Hyperlink({ href, children }) { type: 'NEW_URL', data: { url: href, - pinned: true, + pinned: false, saveAsChatgptConfig: true, }, }) diff --git a/src/components/NotificationForChatGPTWeb/index.jsx b/src/components/NotificationForChatGPTWeb/index.jsx index a7a9fe4..c395d0e 100644 --- a/src/components/NotificationForChatGPTWeb/index.jsx +++ b/src/components/NotificationForChatGPTWeb/index.jsx @@ -1,43 +1,84 @@ import { useTranslation } from 'react-i18next' import PropTypes from 'prop-types' import Browser from 'webextension-polyfill' -import { useConfig } from '../../hooks/use-config.mjs' +import { toast, ToastContainer } from 'react-toastify' +import { useEffect } from 'react' +import 'react-toastify/dist/ReactToastify.css' +import { useTheme } from '../../hooks/use-theme.mjs' -const NotificationForChatGPTWeb = (props) => { +const NotificationForChatGPTWeb = () => { const { t } = useTranslation() - const config = useConfig() + const [theme, config] = useTheme() + const buttonStyle = { padding: '0 8px', border: '1px solid', borderRadius: '4px', + whiteSpace: 'nowrap', cursor: 'pointer', } + useEffect(() => { + toast( +
+
{t('Please keep this tab open. You can now use the web mode of ChatGPTBox')}
+
+ + +
+
, + { + toastId: 0, + updateId: 0, + }, + ) + }, [config.themeMode, config.preferredLanguage]) + return ( -
-
{t('Please keep this tab open. You can now use the web mode of ChatGPTBox')}
- - -
+ ) } diff --git a/src/content-script/index.jsx b/src/content-script/index.jsx index 29252d4..94d5806 100644 --- a/src/content-script/index.jsx +++ b/src/content-script/index.jsx @@ -302,7 +302,7 @@ async function overwriteAccessToken() { } async function prepareForForegroundRequests() { - if (location.hostname !== 'chat.openai.com') return + if (location.hostname !== 'chat.openai.com' || location.pathname === '/auth/login') return const userConfig = await getUserConfig() @@ -313,10 +313,8 @@ async function prepareForForegroundRequests() { render(, div) await Browser.runtime.sendMessage({ - type: 'PIN_TAB', - data: { - saveAsChatgptConfig: true, - }, + type: 'SET_CHATGPT_TAB', + data: {}, }) registerPortListener(async (session, port) => { diff --git a/src/content-script/styles.scss b/src/content-script/styles.scss index 76ae950..69458bd 100644 --- a/src/content-script/styles.scss +++ b/src/content-script/styles.scss @@ -315,17 +315,3 @@ background-color: var(--theme-color); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); } - -.chatgptbox-notification { - display: flex; - flex-direction: row; - align-items: center; - gap: 6px; - position: fixed; - top: 25px; - right: 25px; - z-index: 2147483647; - padding: 4px 10px; - border: 1px solid; - border-radius: 4px; -} diff --git a/src/hooks/use-theme.mjs b/src/hooks/use-theme.mjs new file mode 100644 index 0000000..383fbbd --- /dev/null +++ b/src/hooks/use-theme.mjs @@ -0,0 +1,8 @@ +import { useConfig } from './use-config.mjs' +import { useWindowTheme } from './use-window-theme.mjs' + +export function useTheme() { + const config = useConfig() + const theme = useWindowTheme() + return [config.themeMode === 'auto' ? theme : config.themeMode, config] +} diff --git a/src/hooks/use-window-theme.mjs b/src/hooks/use-window-theme.mjs index 10f82db..721dfdf 100644 --- a/src/hooks/use-window-theme.mjs +++ b/src/hooks/use-window-theme.mjs @@ -2,8 +2,10 @@ import { useEffect, useState } from 'react' export function useWindowTheme() { const [theme, setTheme] = useState( - window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches - ? 'dark' + window.matchMedia + ? window.matchMedia('(prefers-color-scheme: dark)').matches + ? 'dark' + : 'light' : 'light', ) useEffect(() => {