Skip to content

Commit 3960ee1

Browse files
josStorerjosStorer
committed
feat: improve chatgpt website notification (go back button, hide button) (#270, #287)
1 parent 66053ec commit 3960ee1

File tree

11 files changed

+136
-45
lines changed

11 files changed

+136
-45
lines changed

‎src/_locales/en/main.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,5 +105,6 @@
105105
"Always pin the floating window": "Always pin the floating window",
106106
"Export": "Export",
107107
"Always Create New Conversation Window": "Always Create New Conversation Window",
108-
"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"
108+
"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",
109+
"Go Back": "Go Back"
109110
}

‎src/_locales/zh-hans/main.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,5 +105,6 @@
105105
"Always pin the floating window": "总是固定浮动窗口",
106106
"Export": "导出",
107107
"Always Create New Conversation Window": "总是创建新的对话窗口",
108-
"Please keep this tab open. You can now use the web mode of ChatGPTBox": "请保持这个页面打开, 现在你可以使用ChatGPTBox的网页版模式"
108+
"Please keep this tab open. You can now use the web mode of ChatGPTBox": "请保持这个页面打开, 现在你可以使用ChatGPTBox的网页版模式",
109+
"Go Back": "返回"
109110
}

‎src/_locales/zh-hant/main.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,5 +105,6 @@
105105
"Always pin the floating window": "總是固定浮動視窗",
106106
"Export": "匯出",
107107
"Always Create New Conversation Window": "總是建立新的對話視窗",
108-
"Please keep this tab open. You can now use the web mode of ChatGPTBox": "請保持這個頁面開啟, 現在妳可以使用ChatGPTBox的網頁版模式"
108+
"Please keep this tab open. You can now use the web mode of ChatGPTBox": "請保持這個頁面開啟, 現在妳可以使用ChatGPTBox的網頁版模式",
109+
"Go Back": "返回"
109110
}

‎src/background/index.mjs‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ function setPortProxy(port, proxyTabId) {
4747
const proxyOnDisconnect = () => {
4848
port.proxy = Browser.tabs.connect(proxyTabId)
4949
}
50-
const portOnDisconnect = (msg) => {
50+
const portOnDisconnect = () => {
5151
port.proxy.onMessage.removeListener(proxyOnMessage)
5252
port.onMessage.removeListener(portOnMessage)
5353
port.proxy.onDisconnect.removeListener(proxyOnDisconnect)
@@ -118,7 +118,7 @@ async function executeApi(session, port, config) {
118118
}
119119
}
120120

121-
Browser.runtime.onMessage.addListener(async (message) => {
121+
Browser.runtime.onMessage.addListener(async (message, sender) => {
122122
switch (message.type) {
123123
case 'FEEDBACK': {
124124
const token = await getChatGptAccessToken()
@@ -130,6 +130,22 @@ Browser.runtime.onMessage.addListener(async (message) => {
130130
await deleteConversation(token, message.data.conversationId)
131131
break
132132
}
133+
case 'NEW_URL': {
134+
const newTab = await Browser.tabs.create({
135+
url: message.data.url,
136+
pinned: message.data.pinned,
137+
})
138+
if (message.data.saveAsChatgptConfig) {
139+
await setUserConfig({
140+
chatgptTabId: newTab.id,
141+
chatgptJumpBackTabId: sender.tab.id,
142+
})
143+
}
144+
break
145+
}
146+
case 'ACTIVATE_URL':
147+
await Browser.tabs.update(message.data.tabId, { active: true })
148+
break
133149
case 'OPEN_URL':
134150
openUrl(message.data.url)
135151
break
@@ -139,17 +155,11 @@ Browser.runtime.onMessage.addListener(async (message) => {
139155
case 'PIN_TAB': {
140156
let tabId
141157
if (message.data.tabId) tabId = message.data.tabId
142-
else {
143-
const currentTab = (await Browser.tabs.query({ active: true, currentWindow: true }))[0]
144-
if (message.data.saveAsChatgptConfig) {
145-
if (currentTab.url.includes('chat.openai.com')) tabId = currentTab.id
146-
} else {
147-
tabId = currentTab.id
148-
}
149-
}
150-
if (tabId) {
151-
await Browser.tabs.update(tabId, { pinned: true })
152-
if (message.data.saveAsChatgptConfig) await setUserConfig({ chatgptTabId: tabId })
158+
else tabId = sender.tab.id
159+
160+
await Browser.tabs.update(tabId, { pinned: true })
161+
if (message.data.saveAsChatgptConfig) {
162+
await setUserConfig({ chatgptTabId: tabId })
153163
}
154164
break
155165
}

‎src/components/MarkdownRender/Hyperlink.jsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import PropTypes from 'prop-types'
2+
import Browser from 'webextension-polyfill'
3+
4+
export function Hyperlink({ href, children }) {
5+
const linkProperties = {
6+
target: '_blank',
7+
style: 'color: #8ab4f8; cursor: pointer;',
8+
rel: 'nofollow noopener noreferrer',
9+
}
10+
11+
return href.includes('chat.openai.com') ? (
12+
<span
13+
{...linkProperties}
14+
onClick={() => {
15+
Browser.runtime.sendMessage({
16+
type: 'NEW_URL',
17+
data: {
18+
url: href,
19+
pinned: true,
20+
saveAsChatgptConfig: true,
21+
},
22+
})
23+
}}
24+
>
25+
{children}
26+
</span>
27+
) : (
28+
<a href={href} {...linkProperties}>
29+
{children}
30+
</a>
31+
)
32+
}
33+
34+
Hyperlink.propTypes = {
35+
href: PropTypes.string.isRequired,
36+
children: PropTypes.object.isRequired,
37+
}

‎src/components/MarkdownRender/markdown-without-katex.jsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,9 @@ import rehypeHighlight from 'rehype-highlight'
44
import remarkGfm from 'remark-gfm'
55
import remarkBreaks from 'remark-breaks'
66
import { Pre } from './Pre'
7+
import { Hyperlink } from './Hyperlink'
78

89
export function MarkdownRender(props) {
9-
const linkProperties = {
10-
target: '_blank',
11-
style: 'color: #8ab4f8;',
12-
rel: 'nofollow noopener noreferrer',
13-
}
1410
return (
1511
<div dir="auto">
1612
<ReactMarkdown
@@ -26,11 +22,7 @@ export function MarkdownRender(props) {
2622
],
2723
]}
2824
components={{
29-
a: (props) => (
30-
<a href={props.href} {...linkProperties}>
31-
{props.children}
32-
</a>
33-
),
25+
a: Hyperlink,
3426
pre: Pre,
3527
}}
3628
{...props}

‎src/components/MarkdownRender/markdown.jsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,9 @@ import remarkMath from 'remark-math'
77
import remarkGfm from 'remark-gfm'
88
import remarkBreaks from 'remark-breaks'
99
import { Pre } from './Pre'
10+
import { Hyperlink } from './Hyperlink'
1011

1112
export function MarkdownRender(props) {
12-
const linkProperties = {
13-
target: '_blank',
14-
style: 'color: #8ab4f8;',
15-
rel: 'nofollow noopener noreferrer',
16-
}
1713
return (
1814
<div dir="auto">
1915
<ReactMarkdown
@@ -30,11 +26,7 @@ export function MarkdownRender(props) {
3026
],
3127
]}
3228
components={{
33-
a: (props) => (
34-
<a href={props.href} {...linkProperties}>
35-
{props.children}
36-
</a>
37-
),
29+
a: Hyperlink,
3830
pre: Pre,
3931
}}
4032
{...props}

‎src/components/NotificationForChatGPTWeb/index.jsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { useTranslation } from 'react-i18next'
2+
import PropTypes from 'prop-types'
3+
import Browser from 'webextension-polyfill'
4+
import { useConfig } from '../../hooks/use-config.mjs'
5+
6+
const NotificationForChatGPTWeb = (props) => {
7+
const { t } = useTranslation()
8+
const config = useConfig()
9+
const buttonStyle = {
10+
padding: '0 8px',
11+
border: '1px solid',
12+
borderRadius: '4px',
13+
cursor: 'pointer',
14+
}
15+
16+
return (
17+
<div className="chatgptbox-notification">
18+
<div>{t('Please keep this tab open. You can now use the web mode of ChatGPTBox')}</div>
19+
<button
20+
style={buttonStyle}
21+
onClick={() => {
22+
Browser.runtime.sendMessage({
23+
type: 'ACTIVATE_URL',
24+
data: {
25+
tabId: config.chatgptJumpBackTabId,
26+
},
27+
})
28+
}}
29+
>
30+
{t('Go Back')}
31+
</button>
32+
<button
33+
style={buttonStyle}
34+
onClick={() => {
35+
props.container.remove()
36+
}}
37+
>
38+
X
39+
</button>
40+
</div>
41+
)
42+
}
43+
44+
NotificationForChatGPTWeb.propTypes = {
45+
container: PropTypes.object.isRequired,
46+
}
47+
48+
export default NotificationForChatGPTWeb

‎src/config/index.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@ export const defaultConfig = {
133133
],
134134
accessToken: '',
135135
tokenSavedOn: 0,
136+
chatgptJumpBackTabId: 0,
136137
chatgptTabId: 0,
137138

138139
// unchangeable

‎src/content-script/index.jsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,11 @@ import FloatingToolbar from '../components/FloatingToolbar'
2121
import Browser from 'webextension-polyfill'
2222
import { getPreferredLanguage } from '../config/language.mjs'
2323
import '../_locales/i18n-react'
24-
import { changeLanguage, t } from 'i18next'
24+
import { changeLanguage } from 'i18next'
2525
import { initSession } from '../services/init-session.mjs'
2626
import { getChatGptAccessToken, registerPortListener } from '../services/wrappers.mjs'
2727
import { generateAnswersWithChatgptWebApi } from '../services/apis/chatgpt-web.mjs'
28+
import NotificationForChatGPTWeb from '../components/NotificationForChatGPTWeb'
2829

2930
/**
3031
* @param {SiteConfig} siteConfig
@@ -304,15 +305,8 @@ async function prepareForForegroundRequests() {
304305
if (location.hostname !== 'chat.openai.com') return
305306

306307
const div = document.createElement('div')
307-
div.innerText = t('Please keep this tab open. You can now use the web mode of ChatGPTBox')
308-
div.style.position = 'fixed'
309-
div.style.top = '25px'
310-
div.style.right = '25px'
311-
div.style.zIndex = '2147483647'
312-
div.style.padding = '4px 10px'
313-
div.style.border = '1px solid'
314-
div.style.borderRadius = '4px'
315308
document.body.append(div)
309+
render(<NotificationForChatGPTWeb container={div} />, div)
316310

317311
await Browser.runtime.sendMessage({
318312
type: 'PIN_TAB',

0 commit comments

Comments
 (0)