Initial commit

pages/popup/src/Popup.css

@@ -0,0 +1,30 @@
+.App {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  height: 100%;
+  padding: 1rem;
+}
+
+.App-logo {
+  height: 50vmin;
+  margin-bottom: 1rem;
+}
+
+.App-header {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: 0.75rem;
+}
+
+code {
+  background: rgba(148, 163, 184, 0.5);
+  border-radius: 0.25rem;
+  padding: 0.2rem 0.5rem;
+}

pages/popup/src/Popup.tsx

@@ -0,0 +1,63 @@
+import '@src/Popup.css';
+import { t } from '@extension/i18n';
+import { PROJECT_URL_OBJECT, useStorage, withErrorBoundary, withSuspense } from '@extension/shared';
+import { exampleThemeStorage } from '@extension/storage';
+import { cn, ErrorDisplay, LoadingSpinner, ToggleButton } from '@extension/ui';
+
+const notificationOptions = {
+  type: 'basic',
+  iconUrl: chrome.runtime.getURL('icon-34.png'),
+  title: 'Injecting content script error',
+  message: 'You cannot inject script here!',
+} as const;
+
+const Popup = () => {
+  const { isLight } = useStorage(exampleThemeStorage);
+  const logo = isLight ? 'popup/logo_vertical.svg' : 'popup/logo_vertical_dark.svg';
+
+  const goGithubSite = () => chrome.tabs.create(PROJECT_URL_OBJECT);
+
+  const injectContentScript = async () => {
+    const [tab] = await chrome.tabs.query({ currentWindow: true, active: true });
+
+    if (tab.url!.startsWith('about:') || tab.url!.startsWith('chrome:')) {
+      chrome.notifications.create('inject-error', notificationOptions);
+    }
+
+    await chrome.scripting
+      .executeScript({
+        target: { tabId: tab.id! },
+        files: ['/content-runtime/example.iife.js', '/content-runtime/all.iife.js'],
+      })
+      .catch(err => {
+        // Handling errors related to other paths
+        if (err.message.includes('Cannot access a chrome:// URL')) {
+          chrome.notifications.create('inject-error', notificationOptions);
+        }
+      });
+  };
+
+  return (
+    <div className={cn('App', isLight ? 'bg-slate-50' : 'bg-gray-800')}>
+      <header className={cn('App-header', isLight ? 'text-gray-900' : 'text-gray-100')}>
+        <button onClick={goGithubSite}>
+          <img src={chrome.runtime.getURL(logo)} className="App-logo" alt="logo" />
+        </button>
+        <p>
+          Edit <code>pages/popup/src/Popup.tsx</code>
+        </p>
+        <button
+          className={cn(
+            'mt-4 rounded px-4 py-1 font-bold shadow hover:scale-105',
+            isLight ? 'bg-blue-200 text-black' : 'bg-gray-700 text-white',
+          )}
+          onClick={injectContentScript}>
+          {t('injectButton')}
+        </button>
+        <ToggleButton>{t('toggleTheme')}</ToggleButton>
+      </header>
+    </div>
+  );
+};
+
+export default withErrorBoundary(withSuspense(Popup, <LoadingSpinner />), ErrorDisplay);

pages/popup/src/index.css

@@ -0,0 +1,6 @@
+@import '@extension/ui/global.css';
+
+body {
+  width: 300px;
+  height: 260px;
+}

pages/popup/src/index.tsx

@@ -0,0 +1,15 @@
+import '@src/index.css';
+import Popup from '@src/Popup';
+import { createRoot } from 'react-dom/client';
+
+const init = () => {
+  const appContainer = document.querySelector('#app-container');
+  if (!appContainer) {
+    throw new Error('Can not find #app-container');
+  }
+  const root = createRoot(appContainer);
+
+  root.render(<Popup />);
+};
+
+init();