.github/workflows/ci.yml

@@ -8,61 +8,40 @@ on:
 
 jobs:
   lint:
+    name: check the lint
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-      - name: pnpm install
-        run: pnpm install --frozen-lockfile --prefer-offline
+      - run: pnpm install --frozen-lockfile --prefer-offline
       - run: pnpm lint
 
   build:
+    name: check the build
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-      - name: pnpm install
-        run: pnpm install --frozen-lockfile --prefer-offline
       - name: build
         run: |
+          pnpm install --frozen-lockfile --prefer-offline
           echo VITE_OPENAI_API_KEY=${{ secrets.VITE_OPENAI_API_KEY }} >> chrome-extension/.env
           echo VITE_MAKE_WEBHOOK_NOTION_API=${{ secrets.VITE_MAKE_WEBHOOK_NOTION_API }} >> pages/side-panel/.env
           
           echo SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }} >> packages/shared/.env
           echo SENTRY_DSN=${{ secrets.SENTRY_DSN }} >> packages/shared/.env
           echo SUPABASE_URL=${{ secrets.SUPABASE_URL }} >> packages/shared/.env
           echo SUPABASE_ANON_KEY=${{ secrets.SUPABASE_ANON_KEY }}  >> packages/shared/.env
-          echo NODE_ENV=${{ secrets.NODE_ENV }}  >> packages/shared/.env
           
           echo WEB_URL=${{ secrets.WEB_URL }} >> packages/shared/.env
           
           echo NEXT_PUBLIC_SUPABASE_URL=${{ secrets.NEXT_PUBLIC_SUPABASE_URL }} >> packages/web/.env
           echo NEXT_PUBLIC_SUPABASE_ANON_KEY=${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }} >> packages/web/.env
 
-          pnpm build
-
-  # e2e-test:
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #     - uses: pnpm/action-setup@v4
-  #     - uses: actions/setup-node@v4
-  #       with:
-  #         node-version-file: '.nvmrc'
-  #     - name: pnpm install
-  #       run: |
-  #         pnpm install --frozen-lockfile --prefer-offline
-  #         pnpm exec playwright install --with-deps
-  #     - run: pnpm test
-  #     - uses: actions/upload-artifact@v4
-  #       if: ${{ !cancelled() }}
-  #       with:
-  #         name: playwright-report
-  #         path: playwright-report/
-  #         retention-days: 30
+          pnpm build

.github/workflows/release.yml

@@ -29,7 +29,6 @@ jobs:
           echo SENTRY_DSN=${{ secrets.SENTRY_DSN }} >> packages/shared/.env
           echo SUPABASE_URL=${{ secrets.SUPABASE_URL }} >> packages/shared/.env
           echo SUPABASE_ANON_KEY=${{ secrets.SUPABASE_ANON_KEY }}  >> packages/shared/.env
-          echo NODE_ENV=${{ secrets.NODE_ENV }}  >> packages/shared/.env
           
           echo WEB_URL=${{ secrets.WEB_URL }} >> packages/shared/.env
           

.gitignore

@@ -25,11 +25,5 @@ chrome-extension/public/manifest.json
 
 vite.config.**
 
-# playwright
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
-
 # next
-.next
+.next

chrome-extension/lib/background/index.ts

@@ -4,12 +4,8 @@ import {
   OptionStorage,
   requestObserverMemoPage,
   requestUpdateSidePanel,
-  responseOpenSidePanel,
   Storage,
   STORAGE_TYPE_OPTION_LANGUAGE,
-  Tab,
-  URL_GUIDE,
-  WEB_URL,
 } from '@extension/shared';
 import { getPrompt } from '@root/utils';
 import { openai } from '@root/utils/openai';
@@ -22,27 +18,6 @@ chrome.runtime.onInstalled.addListener(async () => {
   if (!language) Storage.set(STORAGE_TYPE_OPTION_LANGUAGE, LANGUAGE_MAP[I18n.getUiLanguage()]);
 });
 
-// 확장 프로그램이 설치되었을 때 가이드 페이지로 이동한다.
-chrome.runtime.onInstalled.addListener(async () => {
-  Tab.create({ url: URL_GUIDE });
-});
-
-// 확장 프로그램이 설치되었을 때 contextMenus를 설정한다.
-const CONTEXT_MENU_ID_CHECK_MEMO = 'CONTEXT_MENU_ID_CHECK_MEMO';
-chrome.runtime.onInstalled.addListener(async () => {
-  chrome.contextMenus.create({
-    title: I18n.get('context_menus_check_memo'),
-    id: CONTEXT_MENU_ID_CHECK_MEMO,
-    contexts: ['action'],
-  });
-  chrome.contextMenus.onClicked.addListener(async item => {
-    switch (item.menuItemId) {
-      case CONTEXT_MENU_ID_CHECK_MEMO:
-        await Tab.create({ url: `${WEB_URL}/memo` });
-    }
-  });
-});
-
 // chatGPT에게서 메시지를 받아서 다시 전달한다.
 chrome.runtime.onConnect.addListener(async port => {
   port.onMessage.addListener(async message => {
@@ -76,6 +51,3 @@ chrome.tabs.onUpdated.addListener(async () => {
   // 페이지를 이동했을 때 메모를 보여주는 페이지인지 체크한다.
   requestObserverMemoPage();
 });
-
-// content-ui에서 메시지를 전달받아 사이드 패널을 연다.
-responseOpenSidePanel();

chrome-extension/manifest.js

@@ -23,7 +23,7 @@ const manifest = deepmerge(
     version: packageJson.version,
     description: '__MSG_extensionDescription__',
     default_locale: 'en',
-    permissions: ['sidePanel', 'storage', 'tabs', 'contextMenus'],
+    permissions: ['sidePanel', 'storage', 'tabs'],
     host_permissions: ['<all_urls>'],
     options_page: 'options/index.html',
     background: {

chrome-extension/package.json

@@ -10,6 +10,7 @@
     "build:firefox:watch": "cross-env __DEV__=true __FIREFOX__=true vite build --mode development",
     "dev": "pnpm build:watch",
     "dev:firefox": "pnpm build:firefox:watch",
+    "test": "vitest run",
     "lint": "eslint ./ --ext .ts,.js,.tsx,.jsx",
     "lint:fix": "pnpm lint --fix",
     "prettier": "prettier . --write --ignore-path ../.prettierignore",

chrome-extension/public/_locales/en/messages.json

@@ -52,8 +52,5 @@
   },
   "error_get_storage": {
     "message": "Failed to retrieve storage data."
-  },
-  "context_menus_check_memo": {
-    "message": "Check memo"
   }
 }

chrome-extension/public/_locales/ko/messages.json

@@ -52,8 +52,5 @@
   },
   "error_get_storage": {
     "message": "스토리지 데이터를 가져오는데 실패했습니다."
-  },
-  "context_menus_check_memo": {
-    "message": "메모 확인하기"
   }
 }

package.json

@@ -19,13 +19,12 @@
     "dev": "turbo ready && turbo watch dev --concurrency 20",
     "dev:firefox": "turbo ready && cross-env __FIREFOX__=true turbo watch dev --concurrency 20",
     "dev:web": "turbo run --filter web",
+    "test": "turbo test",
     "type-check": "turbo type-check",
     "lint": "turbo lint --continue -- --fix --cache --cache-location node_modules/.cache/.eslintcache",
     "lint:fix": "turbo lint:fix --continue -- --fix --cache --cache-location node_modules/.cache/.eslintcache",
     "prettier": "turbo prettier --continue -- --cache --cache-location node_modules/.cache/.prettiercache",
     "prepare": "husky",
-    "test": "exec playwright test",
-    "test-report": "exec playwright show-report",
     "update-version": "run-script-os",
     "update-version:win32": "bash update_version.sh",
     "update-version:default": "./update_version.sh",
@@ -45,7 +44,6 @@
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.47.0",
     "@sentry/vite-plugin": "^2.22.4",
     "@types/chrome": "^0.0.268",
     "@types/node": "^20.14.10",

packages/shared/src/constants/config.ts

@@ -5,4 +5,3 @@ export const SUPABASE_URL = getSafeConfig('SUPABASE_URL', process.env.SUPABASE_U
 export const SUPABASE_ANON_KEY = getSafeConfig('SUPABASE_ANON_KEY', process.env.SUPABASE_ANON_KEY);
 export const SENTRY_DSN = getSafeConfig('SENTRY_DSN', process.env.SENTRY_DSN);
 export const SENTRY_AUTH_TOKEN = getSafeConfig('SENTRY_DSN', process.env.SENTRY_AUTH_TOKEN);
-export const NODE_ENV = getSafeConfig('SENTRY_DSN', process.env.NODE_ENV) as 'development' | 'production';

packages/shared/src/constants/index.ts

@@ -1,5 +1,3 @@
 export * from './language';
 export * from './supabase';
 export * from './config';
-export * from './memo';
-export * from './url';

packages/shared/src/utils/extension/bridge/openSidePanel.ts

@@ -1,7 +1,6 @@
-import { Runtime } from '../module';
+import { Runtime, SidePanel, Tab } from '../module';
 
 export const BRIDGE_TYPE_OPEN_SIDE_PANEL = 'OPEN_SIDE_PANEL';
-export const OPEN_SIDE_PANEL_ID = 'OPEN_SIDE_PANEL';
 
 /**
  * servicer worker에게 SidePanel을 열도록 요청한다.
@@ -12,13 +11,8 @@ export const requestOpenSidePanel = () => Runtime.sendMessage(BRIDGE_TYPE_OPEN_S
  * servicer worker가 SidePanel을 연다.
  */
 export const responseOpenSidePanel = async () => {
-  chrome.runtime.onMessage.addListener((request, sender) => {
-    console.log(1);
-    console.log(request.type);
-    if (request.type === BRIDGE_TYPE_OPEN_SIDE_PANEL) {
-      console.log(sender.tab?.windowId);
-      if (!sender.tab?.windowId) return;
-      chrome.sidePanel.open({ windowId: sender.tab.windowId });
-    }
+  await Runtime.onMessage(BRIDGE_TYPE_OPEN_SIDE_PANEL, async () => {
+    const tab = await Tab.get();
+    SidePanel.open(tab.id, tab.windowId);
   });
 };

packages/shared/src/utils/extension/getIsProduction.ts

@@ -0,0 +1,4 @@
+export const getIsProduction = async () => {
+  const self = await chrome.management.getSelf();
+  return self.installType !== 'development';
+};

packages/shared/src/utils/extension/index.ts

@@ -1,3 +1,4 @@
+export * from './getIsProduction';
 export * from './getSession';
 export * from './initSentry';
 export * from './supabase';

packages/shared/src/utils/extension/initSentry.ts

@@ -1,9 +1,10 @@
 /* eslint-disable import/namespace */
 import * as Sentry from '@sentry/react';
+import { getIsProduction } from './getIsProduction';
 import { SENTRY_DSN } from '../../constants';
-import { isProduction } from '../isProduction';
 
 export const initSentry = async () => {
+  const isProduction = await getIsProduction();
   Sentry.init({
     dsn: SENTRY_DSN,
     integrations: [

packages/shared/src/utils/extension/module/tab.ts

@@ -17,8 +17,4 @@ export class Tab {
     if (!message) throw new Error('Message not found');
     return message;
   }
-
-  static async create(props: chrome.tabs.CreateProperties) {
-    await chrome.tabs.create(props);
-  }
 }

packages/shared/src/utils/index.ts

@@ -3,4 +3,3 @@ export * from './url';
 export * from './testSentry';
 export * from './config';
 export * from './theme';
-export * from './isProduction';

packages/web/src/app/memo/components/Memo.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import { MEMO_TABLE_WRAPPER_ID } from '@extension/shared';
-
 export default function Memo() {
-  return <main id={MEMO_TABLE_WRAPPER_ID} />;
+  return <main id="memo" />;
 }

packages/web/src/app/memo/page.tsx

@@ -1,4 +1,4 @@
-import { Memo } from './components';
+import Memo from './components/Memo';
 
 export default function Page() {
   return <Memo />;

pages/content-ui/src/components/index.ts

@@ -1,2 +1 @@
 export { default as MemoTable } from './MemoTable';
-export { default as OpenSidePanelButton } from './OpenSidePanelButton';

pages/content-ui/src/index.tsx

@@ -2,65 +2,31 @@ import { createRoot } from 'react-dom/client';
 // eslint-disable-next-line
 // @ts-ignore
 import tailwindcssOutput from '@src/tailwind-output.css?inline';
-import {
-  isProduction,
-  MEMO_TABLE_ID,
-  MEMO_TABLE_WRAPPER_ID,
-  OPEN_SIDE_PANEL_ID,
-  responseObserverMemoPage,
-  responsePageContent,
-  WEB_URL,
-} from '@extension/shared';
-import { MemoTable, OpenSidePanelButton } from './components';
+import { responseObserverMemoPage, responsePageContent, WEB_URL } from '@extension/shared';
+import { MemoTable } from './components';
 
-interface AttachShadowTree {
-  shadowTreeWrapper?: HTMLElement;
-  shadowTree: JSX.Element;
-  shadowHostId: string;
-}
+const initMemoList = () => {
+  if (location.href !== `${WEB_URL}/memo`) return;
 
-const attachShadowTree = ({ shadowTreeWrapper, shadowTree, shadowHostId }: AttachShadowTree) => {
-  if (!shadowTreeWrapper) {
-    shadowTreeWrapper = document.createElement('div');
-    shadowTreeWrapper.id = shadowHostId;
-    document.body.appendChild(shadowTreeWrapper);
-  }
+  const memoRoot = document.getElementById('memo');
+  const memoTable = document.getElementById('memo-table');
+  if (!memoRoot || memoTable) return;
 
-  const shadowRoot = shadowTreeWrapper.attachShadow({ mode: 'open' });
+  document.body.append(memoRoot);
+  const rootIntoShadow = document.createElement('div');
+  rootIntoShadow.id = 'shadow-root';
+
+  const shadowRoot = memoRoot.attachShadow({ mode: 'open' });
 
   const globalStyleSheet = new CSSStyleSheet();
   globalStyleSheet.replaceSync(tailwindcssOutput);
   shadowRoot.adoptedStyleSheets = [globalStyleSheet];
 
-  createRoot(shadowRoot).render(shadowTree);
-  return shadowRoot;
-};
-
-const renderMemoList = () => {
-  const memoTableWrapper = document.getElementById(MEMO_TABLE_WRAPPER_ID);
-  const memoTable = document.getElementById(MEMO_TABLE_ID);
-  const isMemoPage = location.href === `${WEB_URL}/memo`;
+  shadowRoot.appendChild(rootIntoShadow);
 
-  if (isMemoPage && memoTableWrapper && !memoTable) {
-    attachShadowTree({
-      shadowTreeWrapper: memoTableWrapper,
-      shadowHostId: MEMO_TABLE_ID,
-      shadowTree: <MemoTable />,
-    });
-  }
+  createRoot(rootIntoShadow).render(<MemoTable />);
 };
 
-const renderOpenSidePanelButton = async () => {
-  if (isProduction) return;
-
-  attachShadowTree({
-    shadowHostId: OPEN_SIDE_PANEL_ID,
-    shadowTree: <OpenSidePanelButton />,
-  });
-};
-
-responseObserverMemoPage(renderMemoList);
-renderMemoList();
-renderOpenSidePanelButton();
-
+initMemoList();
 responsePageContent();
+responseObserverMemoPage(initMemoList);

pages/side-panel/src/components/Memo.tsx

@@ -50,7 +50,7 @@ export default function Memo() {
   );
 
   const handleMemoClick = () => {
-    Tab.create({ url: `${WEB_URL}/memo` });
+    chrome.tabs.create({ url: `${WEB_URL}/memo` });
   };
 
   const handleTextAreaChange = () => {