-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- improve: added default popup for empty/internal chrome pages (#50)
* - improve: added default popup for empty/internal chrome pages * - fix: lint errors
- Loading branch information
1 parent
18bd612
commit 77f4a47
Showing
12 changed files
with
110 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
apps/shinkai-visor/src/components/installed-popup/installed-popup.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>ShinkaiVisor</title> | ||
| <base href="/" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <link rel="icon" type="image/x-icon" href="/favicon.ico" /> | ||
| <link rel="stylesheet" href="/src/styles.css" /> | ||
| </head> | ||
| <body> | ||
| <div id="root" class="w-[300px] h-[450px]"></div> | ||
| <script type="module" src="/apps//shinkai-visor/src/components/installed-popup/installed-popup.tsx"></script> | ||
| </body> | ||
| </html> |
54 changes: 54 additions & 0 deletions
54
apps/shinkai-visor/src/components/installed-popup/installed-popup.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import '../../theme/styles.css'; | ||
|
|
||
| import { Player } from '@lottiefiles/react-lottie-player'; | ||
| import * as React from 'react'; | ||
| import { createRoot } from 'react-dom/client'; | ||
| import { FormattedMessage, IntlProvider } from 'react-intl'; | ||
|
|
||
| import logo from '../../../src/assets/icons/visor.svg'; | ||
| import InstalledPopupAnimation from '../../assets/animations/installed-popup.json'; | ||
| import { srcUrlResolver } from '../../helpers/src-url-resolver'; | ||
| import { langMessages, locale } from '../../lang/intl'; | ||
|
|
||
| const InstalledPopup = () => { | ||
| return ( | ||
| <div className="h-full flex flex-col justify-start"> | ||
| <div className="grid place-content-center"> | ||
| <img | ||
| alt="shinkai logo" | ||
| className="animate-spin-slow h-10 w-20" | ||
| data-cy="shinkai-logo" | ||
| src={srcUrlResolver(logo)} | ||
| /> | ||
| </div> | ||
| <div className="flex-1 flex flex-col space-y-3 justify-center items-center"> | ||
| <div className="p-3"> | ||
| <Player | ||
| autoplay | ||
| className="w-full" | ||
| loop | ||
| src={InstalledPopupAnimation} | ||
| ></Player> | ||
| </div> | ||
|
|
||
| <p className="text-md text-center text-white" data-cy="welcome-message"> | ||
| <FormattedMessage id="installed-sucessfully" /> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| const container = document.getElementById('root'); | ||
| if (!container) { | ||
| throw new Error('container not found'); | ||
| } | ||
| const root = createRoot(container); | ||
| root.render( | ||
| <React.StrictMode> | ||
| <IntlProvider locale={locale} messages={langMessages}> | ||
| <div className="w-full h-full font-inter overflow-hidden p-3 bg-secondary-600 bg-app-gradient shadow-xl"> | ||
| <InstalledPopup></InstalledPopup> | ||
| </div> | ||
| </IntlProvider> | ||
| </React.StrictMode> | ||
| ); |
4 changes: 2 additions & 2 deletions
4
apps/shinkai-visor/src/message/message.tsx → ...-visor/src/components/message/message.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,36 @@ | ||
| import { ContentScriptMessageType } from "./communication/content-script-message-type"; | ||
| import { sendContentScriptMessage } from "./communication/content-script-messages"; | ||
|
|
||
| chrome.action.onClicked.addListener((tab) => { | ||
| const isChromeInternalUrl = (urlString: string): boolean => { | ||
| const url = new URL(urlString); | ||
| return url.protocol === 'chrome:'; | ||
| } | ||
|
|
||
| const setDefaultPopup = (tabId: number, url: string): Promise<void> => { | ||
| if (!url || isChromeInternalUrl(url)) { | ||
| console.log('setting the default popup'); | ||
| return chrome.action.setPopup({ popup: 'src/components/installed-popup/installed-popup.html', tabId }); | ||
| } else { | ||
| console.log('setting undefined default popup'); | ||
| return chrome.action.setPopup({ popup: '', tabId }); | ||
| } | ||
| } | ||
|
|
||
| chrome.action.onClicked.addListener(async (tab) => { | ||
| console.log('actions.onClicked', tab?.id); | ||
| if (!tab?.id) { | ||
| return; | ||
| } | ||
| sendContentScriptMessage({ type: ContentScriptMessageType.TogglePopupVisibility }, tab?.id); | ||
| sendContentScriptMessage({ type: ContentScriptMessageType.TogglePopupVisibility }, tab.id); | ||
| }); | ||
|
|
||
| chrome.tabs.onUpdated.addListener((tabId, _, tab) => { | ||
| console.log('tabs.onUpdated', tabId); | ||
| setDefaultPopup(tabId, tab.url || ''); | ||
| }); | ||
|
|
||
| chrome.tabs.onActivated.addListener(async (activeInfo) => { | ||
| const tab = await chrome.tabs.get(activeInfo.tabId); | ||
| console.log('tabs.onActivated', tab.id, tab.url); | ||
| setDefaultPopup(activeInfo.tabId, tab.url || ''); | ||
| }); |