[FEAT] 현재 탭에서 데이터 가져오기

frontend/techpick-extension/package.json

@@ -35,6 +35,7 @@
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1",
-    "vite-plugin-static-copy": "^1.0.6"
+    "vite-plugin-static-copy": "^1.0.6",
+    "vite-tsconfig-paths": "^5.0.1"
   }
 }

frontend/techpick-extension/src/chrome-extension/manifest.json

@@ -0,0 +1,20 @@
+{
+  "manifest_version": 3,
+  "name": "TechPick Extension",
+  "description": "TechPick Extension description",
+  "version": "0.1",
+  "permissions": ["tabs", "activeTab", "scripting"],
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "content_scripts": [
+    {
+      "matches": ["https://*/*", "http://*/*"],
+      "js": ["contentscript.js"]
+    }
+  ],
+  "action": {
+    "default_popup": "index.html"
+  }
+}

frontend/techpick-extension/src/components/CurrentTabInfo.css.ts

@@ -1,3 +1,3 @@
 import { style } from '@vanilla-extract/css';
 
-export const container = style({ width: '300px', backgroundColor: 'red' });
+export const container = style({ width: '300px', backgroundColor: 'white' });

frontend/techpick-extension/src/components/CurrentTabInfo.tsx

@@ -1,33 +1,22 @@
-import React, { useEffect, useState } from 'react';
-import { container } from './CurrentTabInfo.css';
+import { useGetTabInfo } from '@/hooks';
 
-export const CurrentTabInfo: React.FC = () => {
-  const [tabInfo, setTabInfo] = useState<{ title: string; url: string } | null>(
-    null
-  );
-
-  useEffect(() => {
-    const getCurrentTab = async () => {
-      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-        if (tabs[0]) {
-          setTabInfo({
-            title: tabs[0].title || 'No Title',
-            url: tabs[0].url || 'No URL',
-          });
-        }
-      });
-    };
-
-    getCurrentTab();
-  }, []);
-
-  if (!tabInfo) return <div>Loading...</div>;
+export function CurrentTabInfo() {
+  const tabInfo = useGetTabInfo();
 
   return (
-    <div className={container}>
-      <h1>Current Tab Info</h1>
-      <p>Title: {tabInfo.title}</p>
-      <p>URL: {tabInfo.url}</p>
+    <div>
+      <h2>{tabInfo?.title}</h2>
+      <p>URL: {tabInfo?.url}</p>
+      {tabInfo?.favicon ? (
+        <img src={tabInfo?.favicon} alt="Favicon" />
+      ) : (
+        <p>No Favicon</p>
+      )}
+      {tabInfo.ogDescription ? (
+        <p>{tabInfo.ogDescription}</p>
+      ) : (
+        <p>No Og description</p>
+      )}
     </div>
   );
-};
+}

frontend/techpick-extension/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useGetTabInfo } from './useGetTabInfo/useGetTabInfo';

frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.lib.ts

@@ -0,0 +1,38 @@
+// executeScript는 전달된 함수의 실행 컨텍스트가 전역 스코프가 되기 때문에, 외부에서 정의한 함수에 접근할 수 없습니다.
+const getPageInfoFromDom = () => {
+  const getFaviconFromDom = () => {
+    const faviconLink =
+      document.querySelector("link[rel='icon']") ||
+      document.querySelector("link[rel='shortcut icon']") ||
+      document.querySelector('link');
+
+    return faviconLink instanceof HTMLLinkElement ? faviconLink.href : null;
+  };
+
+  const getOgDescriptionFromDom = () => {
+    const ogDescriptionMeta = document.querySelector(
+      "meta[property='og:description']"
+    );
+
+    return ogDescriptionMeta instanceof HTMLMetaElement
+      ? ogDescriptionMeta.content
+      : null;
+  };
+
+  const faviconUrl = getFaviconFromDom();
+  const ogDescription = getOgDescriptionFromDom();
+
+  return {
+    faviconUrl,
+    ogDescription,
+  };
+};
+
+export const fetchFaviconAndDescription = async (tabId: number) => {
+  const results = await chrome.scripting.executeScript({
+    target: { tabId },
+    func: getPageInfoFromDom,
+  });
+
+  return results[0].result;
+};

frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { fetchFaviconAndDescription } from './useGetTabInfo.lib';
+
+interface TabInfo {
+  title: string | undefined;
+  url: string | undefined;
+  favicon?: string | undefined | null;
+  ogDescription?: string | undefined | null;
+}
+
+export function useGetTabInfo() {
+  const [tabInfo, setTabInfo] = useState<TabInfo>({
+    title: undefined,
+    url: undefined,
+  });
+
+  useEffect(() => {
+    const getTabInfo = async () => {
+      // 현재 탭 정보 가져오기
+      const tabs = await chrome.tabs.query({
+        active: true,
+        currentWindow: true,
+      });
+      const tab = tabs[0];
+      setTabInfo({
+        title: tab.title,
+        url: tab.url,
+      });
+
+      // http가 아닌 다른 URL(ex: chrome)은 권한이 없어서 확장 프로그램에서 에러가 날 수 있습니다.
+      if (tab.url && !tab.url.startsWith('http')) {
+        return;
+      }
+
+      if (!tab.id) {
+        return;
+      }
+
+      const result = await fetchFaviconAndDescription(tab.id);
+
+      if (!result) {
+        return;
+      }
+
+      setTabInfo((prev) => ({
+        ...prev,
+        favicon: result?.faviconUrl,
+        ogDescription: result?.ogDescription,
+      }));
+    };
+
+    getTabInfo();
+  }, []);
+
+  return tabInfo;
+}

frontend/techpick-extension/src/pages/BookmarkPage.tsx

@@ -0,0 +1,10 @@
+import { CurrentTabInfo } from '@/components';
+
+export function BookmarkPage() {
+  return (
+    <>
+      <h1>Bookmark page</h1>
+      <CurrentTabInfo />
+    </>
+  );
+}

frontend/techpick-extension/src/pages/index.ts

@@ -0,0 +1 @@
+export { BookmarkPage } from './BookmarkPage';

frontend/techpick-extension/src/routers/index.tsx

@@ -1,15 +1,10 @@
 import { createMemoryRouter } from 'react-router-dom';
-import { CurrentTabInfo } from '../components';
+import { BookmarkPage } from '../pages';
 
 export const router = createMemoryRouter([
   {
     path: '/',
-    element: (
-      <>
-        <h1>Main Page</h1>
-        <CurrentTabInfo />
-      </>
-    ),
+    element: <BookmarkPage />,
   },
   {
     path: '/login',

frontend/techpick-extension/src/types/index.ts

@@ -0,0 +1 @@
+export * from './message';

frontend/techpick-extension/src/types/message.ts

@@ -0,0 +1,16 @@
+export type RequestMessageType = string;
+
+export type ResponseMessageType = {
+  type: string;
+};
+
+export type ResponseOgImageType = {
+  type: 'OG_IMAGE' | string;
+  ogImageUrl: string | null;
+};
+
+export const isResponseOgImageType = (
+  message: ResponseMessageType
+): message is ResponseOgImageType => {
+  return message.type === 'OG_IMAGE' && 'ogImageUrl' in message;
+};

frontend/techpick-extension/tsconfig.app.json

@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],

frontend/techpick-extension/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/chorme-extension/background.ts","./src/components/CurrentTabInfo.css.ts","./src/components/CurrentTabInfo.tsx","./src/components/index.ts","./src/features/index.ts","./src/hooks/index.ts","./src/lib/index.ts","./src/pages/index.ts","./src/routers/index.tsx","./src/widgets/index.ts"],"version":"5.6.2"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/chrome-extension/background.ts","./src/chrome-extension/contentscript.ts","./src/components/CurrentTabInfo.css.ts","./src/components/CurrentTabInfo.tsx","./src/components/index.ts","./src/constants/index.ts","./src/constants/message.ts","./src/features/index.ts","./src/hooks/index.ts","./src/hooks/useGetTabInfo/useGetTabInfo.lib.ts","./src/hooks/useGetTabInfo/useGetTabInfo.tsx","./src/lib/index.ts","./src/pages/BookmarkPage.tsx","./src/pages/index.ts","./src/routers/index.tsx","./src/types/index.ts","./src/types/message.ts","./src/widgets/index.ts"],"version":"5.6.2"}

frontend/techpick-extension/tsconfig.node.json

@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
     "target": "ES2022",
     "lib": ["ES2023"],
     "module": "ESNext",

frontend/techpick-extension/vite.config.ts

@@ -3,18 +3,19 @@ import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
-    watch: {
-      include: 'src/**',
-      exclude: 'node_modules/**',
-    },
     rollupOptions: {
       input: {
-        background: resolve(__dirname, 'src/chorme-extension/background.ts'),
+        background: resolve(__dirname, 'src/chrome-extension/background.ts'),
         popup: resolve(__dirname, './index.html'),
+        contentscript: resolve(
+          __dirname,
+          './src/chrome-extension/contentscript.ts'
+        ),
       },
       output: {
         entryFileNames: '[name].js',
@@ -25,8 +26,9 @@ export default defineConfig({
   plugins: [
     react(),
     viteStaticCopy({
-      targets: [{ src: './src/chorme-extension/manifest.json', dest: '.' }],
+      targets: [{ src: './src/chrome-extension/manifest.json', dest: '.' }],
     }),
     vanillaExtractPlugin(),
+    tsconfigPaths(),
   ],
 });