refactor: sidebar, popup 페이지 제거

e2e/basic.spec.ts

@@ -9,11 +9,6 @@ test('example test', async ({ page }, testInfo) => {
   await expect(page.locator(`#${name} h1`)).toHaveText('Dynamic Scrollbar WebExt');
 });
 
-test('popup page', async ({ page, extensionId }) => {
-  await page.goto(`chrome-extension://${extensionId}/dist/popup/index.html`);
-  await expect(page.locator('button')).toHaveText('Open Options');
-});
-
 test('options page', async ({ page, extensionId }) => {
   await page.goto(`chrome-extension://${extensionId}/dist/options/index.html`);
   await expect(page.locator('img')).toHaveAttribute('alt', 'extension icon');

playwright.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
   webServer: {
     command: 'npm run dev',
     // start e2e test after the Vite server is fully prepared
-    url: 'http://localhost:3303/popup/main.ts',
+    url: 'http://localhost:3303/options/main.ts',
     reuseExistingServer: true,
   },
 });

scripts/prepare.ts

@@ -10,7 +10,7 @@ import { isDev, log, port, r } from './utils';
  * Stub index.html to use Vite in development
  */
 async function stubIndexHtml() {
-  const views = ['options', 'popup', 'background', 'sidebar'];
+  const views = ['options', 'background'];
 
   for (const view of views) {
     await fs.ensureDir(r(`extension/dist/${view}`));

src/background/main.ts

@@ -14,6 +14,10 @@ browser.runtime.onInstalled.addListener((): void => {
   console.log('Extension installed');
 });
 
+browser.action.onClicked.addListener(() => {
+  browser.runtime.openOptionsPage();
+});
+
 let previousTabId = 0;
 
 // communication example: send previous tab title from background page

src/contentScripts/index.ts

@@ -25,5 +25,5 @@ import { renderApp } from './render';
   shadowDOM.appendChild(root);
   document.body.appendChild(container);
   const appRoot = createRoot(root);
-  renderApp({ root: appRoot, frameUrl: browser.runtime.getURL('dist/sidebar/index.html') });
+  renderApp({ root: appRoot });
 })();

src/contentScripts/pages/App.tsx

@@ -1,33 +1,16 @@
-import IconPower from '~icons/pixelarticons/power';
-
+import IconCat from '~icons/arcticons/cats-and-soup';
 import 'uno.css';
 
-export default function App({ frameUrl }: { frameUrl: string }) {
-  const [open, setOpen] = useState(false);
-  const [openedOnce, setOpenedOnce] = useState(false);
+import { Button } from '~/shared/ui';
 
+export const App = () => {
   return (
     <div>
-      <div className="fixed left-0 bottom-0 m-5 z-100 flex font-sans select-none leading-1em">
-        <div
-          className="flex justify-center items-center w-10 h-10 rounded-full shadow cursor-pointer bg-blue-400 hover:bg-blue-600"
-          onClick={() => {
-            setOpen((open) => !open);
-            setOpenedOnce(true);
-          }}
-        >
-          <IconPower />
-        </div>
+      <div className="fixed right-0 bottom-0 m-5 z-99999 select-none">
+        <Button className="rounded-full">
+          <IconCat />
+        </Button>
       </div>
-      {openedOnce && (
-        <div
-          className={`fixed top-0 right-0 h-full w-1/4 z-50 drop-shadow-xl transition-transform ${
-            open ? 'translate-x-0' : 'translate-x-full'
-          }`}
-        >
-          <iframe src={frameUrl} className="w-full h-full border-0" />
-        </div>
-      )}
     </div>
   );
-}
+};

src/contentScripts/render.tsx

@@ -1,12 +1,12 @@
 import { StrictMode } from 'react';
 import type { Root } from 'react-dom/client';
 
-import App from './pages/App';
+import { App } from './pages/App';
 
-export const renderApp = ({ root, frameUrl }: { root: Root; frameUrl: string }) => {
+export const renderApp = ({ root }: { root: Root }) => {
   return root.render(
     <StrictMode>
-      <App frameUrl={frameUrl} />
+      <App />
     </StrictMode>,
   );
 };

src/manifest.ts

@@ -16,7 +16,6 @@ export async function getManifest(): Promise<Manifest.WebExtensionManifest> {
     default_locale: 'en',
     action: {
       default_icon: './assets/icon-512.png',
-      default_popup: './dist/popup/index.html',
     },
     options_ui: {
       page: './dist/options/index.html',

vite.config.mts

@@ -74,8 +74,6 @@ export default defineConfig(({ command }) => ({
     rollupOptions: {
       input: {
         options: r('src/options/index.html'),
-        popup: r('src/popup/index.html'),
-        sidebar: r('src/sidebar/index.html'),
       },
     },
   },