Loading...
;
+ // 2. 응답 기다리기.
+ console.log('waiting message');
+ chrome.runtime.onMessage.addListener((message: ResponseOgImageType) => {
+ if (message.type === 'OG_IMAGE_TO_COMPONENT') {
+ console.log('get message on CurrentTabInfo', message);
+
+ setTabInfo((prev) => {
+ if (prev) {
+ return {
+ ...prev,
+ ogImage: message.ogImageUrl,
+ };
+ }
+ return prev;
+ });
+ }
+ });
+ }, []);
return (
-
-
Current Tab Info
-
Title: {tabInfo.title}
-
URL: {tabInfo.url}
+
+
{tabInfo?.title}
+
URL: {tabInfo?.url}
+ {tabInfo?.ogImage ? (
+
+ ) : (
+
No OG Image
+ )}
);
};
diff --git a/frontend/techpick-extension/src/constants/index.ts b/frontend/techpick-extension/src/constants/index.ts
new file mode 100644
index 000000000..f54558745
--- /dev/null
+++ b/frontend/techpick-extension/src/constants/index.ts
@@ -0,0 +1 @@
+export * from './message';
diff --git a/frontend/techpick-extension/src/constants/message.ts b/frontend/techpick-extension/src/constants/message.ts
new file mode 100644
index 000000000..e46d6da57
--- /dev/null
+++ b/frontend/techpick-extension/src/constants/message.ts
@@ -0,0 +1 @@
+export const REQUEST_OG_IMAGE = 'REQUEST_OG_IMAGE';
diff --git a/frontend/techpick-extension/src/types/index.ts b/frontend/techpick-extension/src/types/index.ts
new file mode 100644
index 000000000..f54558745
--- /dev/null
+++ b/frontend/techpick-extension/src/types/index.ts
@@ -0,0 +1 @@
+export * from './message';
diff --git a/frontend/techpick-extension/src/types/message.ts b/frontend/techpick-extension/src/types/message.ts
new file mode 100644
index 000000000..b9a00b361
--- /dev/null
+++ b/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;
+};
diff --git a/frontend/techpick-extension/tsconfig.app.tsbuildinfo b/frontend/techpick-extension/tsconfig.app.tsbuildinfo
index 241e35bb4..cb48780d7 100644
--- a/frontend/techpick-extension/tsconfig.app.tsbuildinfo
+++ b/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/BookmarkPage.tsx","./src/pages/index.ts","./src/routers/index.tsx","./src/widgets/index.ts"],"version":"5.6.2"}
\ No newline at end of file
+{"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/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"}
\ No newline at end of file
From 7d512920d95f85966716cfbdfd75ffb14c460001 Mon Sep 17 00:00:00 2001
From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com>
Date: Tue, 24 Sep 2024 20:38:19 +0900
Subject: [PATCH 05/13] =?UTF-8?q?feat:=20tab=20=EC=97=B4=20=EB=95=8C=20?=
=?UTF-8?q?=EB=A7=88=EB=8B=A4=20og=20image=20=EA=B0=80=EC=A0=B8=EC=98=A4?=
=?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/chrome-extension/background.ts | 49 +++++++-------
.../src/chrome-extension/contentscript.ts | 28 ++++----
.../src/components/CurrentTabInfo.tsx | 67 +++++++++++++------
3 files changed, 84 insertions(+), 60 deletions(-)
diff --git a/frontend/techpick-extension/src/chrome-extension/background.ts b/frontend/techpick-extension/src/chrome-extension/background.ts
index 5a99daac1..9df7e6ee4 100644
--- a/frontend/techpick-extension/src/chrome-extension/background.ts
+++ b/frontend/techpick-extension/src/chrome-extension/background.ts
@@ -1,29 +1,28 @@
-import { RequestMessageType, ResponseOgImageType } from '@/types';
+// import { RequestMessageType, ResponseOgImageType } from '@/types';
-// TODO: 1. 현재는, 촤초 불러올 시에만 og:image를 가져오는 코드를 동작하게 할 수 있다. 공식 문서를 찾아보고 왜 안되는지 원인을 찾아보기.
-// TODO:
+// // TODO: 1. 현재는, 촤초 불러올 시에만 og:image를 가져오는 코드를 동작하게 할 수 있다. 공식 문서를 찾아보고 왜 안되는지 원인을 찾아보기.
-// 1. script에서 og image를 받아온다.
-let ResponseOgImage: ResponseOgImageType = {
- type: '',
- ogImageUrl: null,
-};
+// // 1. script에서 og image를 받아온다.
+// let ResponseOgImage: ResponseOgImageType = {
+// type: '',
+// ogImageUrl: null,
+// };
-chrome.runtime.onMessage.addListener((response: ResponseOgImageType) => {
- if (response.type === 'OG_IMAGE_FROM_SCRIPT') {
- console.log('get message from script', response);
- ResponseOgImage = response;
- }
-});
+// chrome.runtime.onMessage.addListener((response: ResponseOgImageType) => {
+// if (response.type === 'OG_IMAGE_FROM_SCRIPT') {
+// console.log('get message from script', response);
+// ResponseOgImage = response;
+// }
+// });
-// 2. popup에서 요청을 받는다.
-chrome.runtime.onMessage.addListener((message: RequestMessageType) => {
- if (message === 'REQUEST_OG_IMAGE_TO_BACK') {
- console.log('get message on background', message);
- // 3. script에 요청을 보낸다.
- chrome.runtime.sendMessage
({
- type: 'OG_IMAGE_TO_COMPONENT',
- ogImageUrl: ResponseOgImage.ogImageUrl,
- });
- }
-});
+// // 2. popup에서 요청을 받는다.
+// chrome.runtime.onMessage.addListener((message: RequestMessageType) => {
+// if (message === 'REQUEST_OG_IMAGE_TO_BACK') {
+// console.log('get message on background', message);
+// // 3. script에 요청을 보낸다.
+// chrome.runtime.sendMessage({
+// type: 'OG_IMAGE_TO_COMPONENT',
+// ogImageUrl: ResponseOgImage.ogImageUrl,
+// });
+// }
+// });
diff --git a/frontend/techpick-extension/src/chrome-extension/contentscript.ts b/frontend/techpick-extension/src/chrome-extension/contentscript.ts
index 43730f582..0bebed04b 100644
--- a/frontend/techpick-extension/src/chrome-extension/contentscript.ts
+++ b/frontend/techpick-extension/src/chrome-extension/contentscript.ts
@@ -1,19 +1,17 @@
-// import { REQUEST_OG_IMAGE } from '@/constants';
-import { ResponseOgImageType } from '@/types';
+window.addEventListener('message', (event) => {
+ // 다른 페이지에서 오는 메시지는 무시
+ if (event.source !== window || event.data.type !== 'GET_OG_IMAGE') return;
-console.log('adadadas');
+ // Open Graph 이미지 추출
+ const ogImageTag =
+ document.querySelector("meta[property='og:image']") ||
+ document.querySelector("meta[name='og:image']");
+ const ogImageUrl =
+ ogImageTag instanceof HTMLMetaElement ? ogImageTag.content : null;
-const ogImageTag =
- document.querySelector("meta[property='og:image']") ||
- document.querySelector("meta[name='og:image']");
+ console.log('script work!!! ogImageUrl:', ogImageUrl);
-const ogImageUrl =
- ogImageTag instanceof HTMLMetaElement ? ogImageTag.content : null;
-
-console.log('ogImageUrl', ogImageUrl);
-
-// 1. back에 응답을 보내준다.
-chrome.runtime.sendMessage({
- type: 'OG_IMAGE_FROM_SCRIPT',
- ogImageUrl,
+ // Open Graph 이미지 추출 후 메시지를 페이지에 다시 보냄
+ window.postMessage({ type: 'FROM_CONTENT', ogImage: ogImageUrl }, '*');
+ chrome.runtime.sendMessage({ type: 'FROM_SCRIPT', ogImage: ogImageUrl });
});
diff --git a/frontend/techpick-extension/src/components/CurrentTabInfo.tsx b/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
index cab2e7fe1..6f030b375 100644
--- a/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
+++ b/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
@@ -1,6 +1,4 @@
import React, { useEffect, useState } from 'react';
-// import { REQUEST_OG_IMAGE } from '@/constants';
-import { ResponseOgImageType } from '@/types';
interface TabInfo {
title: string;
@@ -15,31 +13,60 @@ export const CurrentTabInfo: React.FC = () => {
// 현재 탭 정보 가져오기
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const tab = tabs[0];
- setTabInfo({ title: tab.title || 'No Title', url: tab.url || 'No URL' });
- return;
+ setTabInfo({
+ title: tab.title || 'No Title',
+ url: tab.url || 'No URL',
+ });
+
+ // // 현재 탭의 content_script에 postMessage를 통해 Open Graph 이미지 요청
+ chrome.scripting.executeScript({
+ target: { tabId: tab.id || 0 },
+ func: () => {
+ console.log('post message');
+ window.postMessage({ type: 'GET_OG_IMAGE' }, '*');
+ },
+ });
+
+ chrome.runtime.sendMessage({ greeting: 'hello' });
});
- // 1. 요청 보내기
- console.log('send message');
- chrome.runtime.sendMessage('REQUEST_OG_IMAGE_TO_BACK');
+ const messageListener = (event: MessageEvent) => {
+ console.log('listen!!!', event.data); // 로그 추가
+ if (event.source !== window || event.data.type !== 'FROM_CONTENT') return;
+
+ // 기존 상태와 병합하여 새로운 상태 설정
+ setTabInfo((prev) => {
+ if (!prev) return null; // prev가 null일 경우 처리
+ return {
+ ...prev,
+ ogImage: event.data.ogImage, // 여기서 ogImage를 설정
+ };
+ });
+ };
- // 2. 응답 기다리기.
- console.log('waiting message');
- chrome.runtime.onMessage.addListener((message: ResponseOgImageType) => {
- if (message.type === 'OG_IMAGE_TO_COMPONENT') {
- console.log('get message on CurrentTabInfo', message);
+ window.addEventListener('message', messageListener);
+ chrome.runtime.onMessage.addListener(
+ (message: { type: string; ogImage: string | null }) => {
+ if (message.type !== 'FROM_SCRIPT') {
+ console.log('is not FROM_SCRIPT');
+ return;
+ }
+
+ // 기존 상태와 병합하여 새로운 상태 설정
setTabInfo((prev) => {
- if (prev) {
- return {
- ...prev,
- ogImage: message.ogImageUrl,
- };
- }
- return prev;
+ if (!prev) return null; // prev가 null일 경우 처리
+ return {
+ ...prev,
+ ogImage: message.ogImage, // 여기서 ogImage를 설정
+ };
});
}
- });
+ );
+
+ return () => {
+ window.removeEventListener('message', messageListener);
+ };
}, []);
return (
From 8acb8bc83a03116b8b09a86dfd13416abff575ab Mon Sep 17 00:00:00 2001
From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com>
Date: Tue, 24 Sep 2024 20:43:57 +0900
Subject: [PATCH 06/13] =?UTF-8?q?refactor:=20=EC=93=B0=EC=A7=80=20?=
=?UTF-8?q?=EC=95=8A=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/chrome-extension/contentscript.ts | 1 -
.../src/components/CurrentTabInfo.tsx | 22 ++-----------------
2 files changed, 2 insertions(+), 21 deletions(-)
diff --git a/frontend/techpick-extension/src/chrome-extension/contentscript.ts b/frontend/techpick-extension/src/chrome-extension/contentscript.ts
index 0bebed04b..46fe94551 100644
--- a/frontend/techpick-extension/src/chrome-extension/contentscript.ts
+++ b/frontend/techpick-extension/src/chrome-extension/contentscript.ts
@@ -12,6 +12,5 @@ window.addEventListener('message', (event) => {
console.log('script work!!! ogImageUrl:', ogImageUrl);
// Open Graph 이미지 추출 후 메시지를 페이지에 다시 보냄
- window.postMessage({ type: 'FROM_CONTENT', ogImage: ogImageUrl }, '*');
chrome.runtime.sendMessage({ type: 'FROM_SCRIPT', ogImage: ogImageUrl });
});
diff --git a/frontend/techpick-extension/src/components/CurrentTabInfo.tsx b/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
index 6f030b375..6be7f2f6a 100644
--- a/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
+++ b/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
@@ -18,7 +18,7 @@ export const CurrentTabInfo: React.FC = () => {
url: tab.url || 'No URL',
});
- // // 현재 탭의 content_script에 postMessage를 통해 Open Graph 이미지 요청
+ // 현재 탭의 content_script에 postMessage를 통해 Open Graph 이미지 요청
chrome.scripting.executeScript({
target: { tabId: tab.id || 0 },
func: () => {
@@ -27,24 +27,10 @@ export const CurrentTabInfo: React.FC = () => {
},
});
+ // contentScript로부터 응답을 받는다.
chrome.runtime.sendMessage({ greeting: 'hello' });
});
- const messageListener = (event: MessageEvent) => {
- console.log('listen!!!', event.data); // 로그 추가
- if (event.source !== window || event.data.type !== 'FROM_CONTENT') return;
-
- // 기존 상태와 병합하여 새로운 상태 설정
- setTabInfo((prev) => {
- if (!prev) return null; // prev가 null일 경우 처리
- return {
- ...prev,
- ogImage: event.data.ogImage, // 여기서 ogImage를 설정
- };
- });
- };
-
- window.addEventListener('message', messageListener);
chrome.runtime.onMessage.addListener(
(message: { type: string; ogImage: string | null }) => {
if (message.type !== 'FROM_SCRIPT') {
@@ -63,10 +49,6 @@ export const CurrentTabInfo: React.FC = () => {
});
}
);
-
- return () => {
- window.removeEventListener('message', messageListener);
- };
}, []);
return (
From bc26a87ce20a3c573ade3d469c25948062e508a8 Mon Sep 17 00:00:00 2001
From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com>
Date: Tue, 24 Sep 2024 20:45:00 +0900
Subject: [PATCH 07/13] =?UTF-8?q?chore:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?=
=?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../techpick-extension/src/chrome-extension/contentscript.ts | 2 --
frontend/techpick-extension/src/components/CurrentTabInfo.tsx | 3 ---
2 files changed, 5 deletions(-)
diff --git a/frontend/techpick-extension/src/chrome-extension/contentscript.ts b/frontend/techpick-extension/src/chrome-extension/contentscript.ts
index 46fe94551..3e059aab8 100644
--- a/frontend/techpick-extension/src/chrome-extension/contentscript.ts
+++ b/frontend/techpick-extension/src/chrome-extension/contentscript.ts
@@ -9,8 +9,6 @@ window.addEventListener('message', (event) => {
const ogImageUrl =
ogImageTag instanceof HTMLMetaElement ? ogImageTag.content : null;
- console.log('script work!!! ogImageUrl:', ogImageUrl);
-
// Open Graph 이미지 추출 후 메시지를 페이지에 다시 보냄
chrome.runtime.sendMessage({ type: 'FROM_SCRIPT', ogImage: ogImageUrl });
});
diff --git a/frontend/techpick-extension/src/components/CurrentTabInfo.tsx b/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
index 6be7f2f6a..08b711f3f 100644
--- a/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
+++ b/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
@@ -22,7 +22,6 @@ export const CurrentTabInfo: React.FC = () => {
chrome.scripting.executeScript({
target: { tabId: tab.id || 0 },
func: () => {
- console.log('post message');
window.postMessage({ type: 'GET_OG_IMAGE' }, '*');
},
});
@@ -34,8 +33,6 @@ export const CurrentTabInfo: React.FC = () => {
chrome.runtime.onMessage.addListener(
(message: { type: string; ogImage: string | null }) => {
if (message.type !== 'FROM_SCRIPT') {
- console.log('is not FROM_SCRIPT');
-
return;
}
From f982bb23584fe794520573b042b266aa5d6ac8b6 Mon Sep 17 00:00:00 2001
From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com>
Date: Tue, 24 Sep 2024 21:25:32 +0900
Subject: [PATCH 08/13] =?UTF-8?q?feat:=20=ED=8C=8C=EB=B9=84=EC=BD=98=20?=
=?UTF-8?q?=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/chrome-extension/contentscript.ts | 16 ++++++++--------
.../src/components/CurrentTabInfo.tsx | 15 ++++++---------
2 files changed, 14 insertions(+), 17 deletions(-)
diff --git a/frontend/techpick-extension/src/chrome-extension/contentscript.ts b/frontend/techpick-extension/src/chrome-extension/contentscript.ts
index 3e059aab8..458686227 100644
--- a/frontend/techpick-extension/src/chrome-extension/contentscript.ts
+++ b/frontend/techpick-extension/src/chrome-extension/contentscript.ts
@@ -1,14 +1,14 @@
window.addEventListener('message', (event) => {
// 다른 페이지에서 오는 메시지는 무시
- if (event.source !== window || event.data.type !== 'GET_OG_IMAGE') return;
+ if (event.source !== window || event.data.type !== 'REQUEST_FAVICON') return;
- // Open Graph 이미지 추출
- const ogImageTag =
- document.querySelector("meta[property='og:image']") ||
- document.querySelector("meta[name='og:image']");
- const ogImageUrl =
- ogImageTag instanceof HTMLMetaElement ? ogImageTag.content : null;
+ // 파비콘 추출
+ const faviconLink =
+ document.querySelector("link[rel='icon']") ||
+ document.querySelector("link[rel='shortcut icon']");
+ const faviconUrl =
+ faviconLink instanceof HTMLLinkElement ? faviconLink.href : null;
// Open Graph 이미지 추출 후 메시지를 페이지에 다시 보냄
- chrome.runtime.sendMessage({ type: 'FROM_SCRIPT', ogImage: ogImageUrl });
+ chrome.runtime.sendMessage({ type: 'RESPONSE_FAVICON', ogImage: faviconUrl });
});
diff --git a/frontend/techpick-extension/src/components/CurrentTabInfo.tsx b/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
index 08b711f3f..8e9289278 100644
--- a/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
+++ b/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
interface TabInfo {
title: string;
@@ -6,7 +6,7 @@ interface TabInfo {
ogImage?: string | null;
}
-export const CurrentTabInfo: React.FC = () => {
+export function CurrentTabInfo() {
const [tabInfo, setTabInfo] = useState(null);
useEffect(() => {
@@ -18,21 +18,18 @@ export const CurrentTabInfo: React.FC = () => {
url: tab.url || 'No URL',
});
- // 현재 탭의 content_script에 postMessage를 통해 Open Graph 이미지 요청
+ // 현재 탭의 content_script에 postMessage를 통해 파비콘 이미지 요청
chrome.scripting.executeScript({
target: { tabId: tab.id || 0 },
func: () => {
- window.postMessage({ type: 'GET_OG_IMAGE' }, '*');
+ window.postMessage({ type: 'REQUEST_FAVICON' }, '*');
},
});
-
- // contentScript로부터 응답을 받는다.
- chrome.runtime.sendMessage({ greeting: 'hello' });
});
chrome.runtime.onMessage.addListener(
(message: { type: string; ogImage: string | null }) => {
- if (message.type !== 'FROM_SCRIPT') {
+ if (message.type !== 'RESPONSE_FAVICON') {
return;
}
@@ -59,4 +56,4 @@ export const CurrentTabInfo: React.FC = () => {
)}
{tabInfo?.title}
URL: {tabInfo?.url}
+ {tabInfo?.favicon ? (
+
+ ) : (
+
No Favicon
+ )}
{tabInfo?.ogImage ? (
) : (
From fe9aad3513e5348dc082aed5c4c6d9dc9140d58f Mon Sep 17 00:00:00 2001
From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com>
Date: Wed, 25 Sep 2024 11:15:30 +0900
Subject: [PATCH 10/13] =?UTF-8?q?refactor:=20useGetTabInfo=20hook=EC=9C=BC?=
=?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/chrome-extension/background.ts | 65 +++++++++----------
.../src/chrome-extension/manifest.json | 5 +-
.../src/components/CurrentTabInfo.tsx | 62 +-----------------
.../src/constants/message.ts | 2 +-
.../techpick-extension/src/hooks/index.ts | 1 +
.../src/hooks/useGetTabInfo.tsx | 46 +++++++++++++
.../tsconfig.app.tsbuildinfo | 2 +-
7 files changed, 87 insertions(+), 96 deletions(-)
create mode 100644 frontend/techpick-extension/src/hooks/useGetTabInfo.tsx
diff --git a/frontend/techpick-extension/src/chrome-extension/background.ts b/frontend/techpick-extension/src/chrome-extension/background.ts
index 61b99b6bd..dd3d51eae 100644
--- a/frontend/techpick-extension/src/chrome-extension/background.ts
+++ b/frontend/techpick-extension/src/chrome-extension/background.ts
@@ -1,4 +1,5 @@
-// background.js
+import { REQUEST_FAVICON } from '@/constants';
+
const getFavicon = () => {
const faviconLink =
document.querySelector("link[rel='icon']") ||
@@ -6,41 +7,39 @@ const getFavicon = () => {
const faviconUrl =
faviconLink instanceof HTMLLinkElement ? faviconLink.href : null;
- console.log('faviconUrl', faviconUrl);
-
return faviconUrl; // 파비콘 URL 반환
};
// 메시지를 수신하여 파비콘을 가져오는 리스너
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
- if (message.type === 'REQUEST_FAVICON') {
- console.log('sender', sender);
-
- const tabId = message.tabId; // optional chaining 사용
-
- console.log('background work', tabId);
-
- if (tabId) {
- // tabId가 정의된 경우에만 실행
- chrome.scripting.executeScript(
- {
- target: { tabId: tabId },
- func: getFavicon,
- },
- (results) => {
- console.log('background results', results);
-
- if (results && results[0]) {
- const faviconUrl = results[0].result;
- sendResponse({ favicon: faviconUrl }); // 응답으로 파비콘 URL 반환
- } else {
- sendResponse({ favicon: null }); // 파비콘을 찾지 못했을 경우
- }
- }
- );
- } else {
- sendResponse({ favicon: null }); // tabId가 없을 경우 응답
- }
- return true; // 비동기 응답을 위해 true를 반환
+chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+ if (message.type !== REQUEST_FAVICON || !message.tabId) {
+ return;
+ }
+
+ const tabId = message.tabId;
+
+ if (!tabId) {
+ sendResponse({ favicon: null }); // tabId가 없을 경우 응답
}
+
+ // tabId가 정의된 경우에만 실행
+ chrome.scripting.executeScript(
+ {
+ target: { tabId: tabId },
+ func: getFavicon,
+ },
+ (results) => {
+ // 파비콘을 찾지 못했을 경우
+ if (!results || !results[0]) {
+ sendResponse({ favicon: null });
+ }
+
+ const faviconUrl = results[0].result;
+ sendResponse({ favicon: faviconUrl });
+ }
+ );
+
+ return true;
+ // 비동기 응답을 위해 true를 반환
+ // chrome.scripting.executeScript가 비동기적이다.
});
diff --git a/frontend/techpick-extension/src/chrome-extension/manifest.json b/frontend/techpick-extension/src/chrome-extension/manifest.json
index 58352b4e3..7c65df198 100644
--- a/frontend/techpick-extension/src/chrome-extension/manifest.json
+++ b/frontend/techpick-extension/src/chrome-extension/manifest.json
@@ -5,11 +5,12 @@
"version": "0.1",
"permissions": ["tabs", "activeTab", "scripting"],
"background": {
- "service_worker": "background.js"
+ "service_worker": "background.js",
+ "type": "module"
},
"content_scripts": [
{
- "matches": ["https://*/*", "http://*/*", "file://*/*"],
+ "matches": ["https://*/*", "http://*/*"],
"js": ["contentscript.js"]
}
],
diff --git a/frontend/techpick-extension/src/components/CurrentTabInfo.tsx b/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
index 1a15eb60f..5c77b9ea4 100644
--- a/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
+++ b/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
@@ -1,73 +1,17 @@
-import { useEffect, useState } from 'react';
-
-interface TabInfo {
- title: string;
- url: string;
- ogImage?: string | null;
- favicon?: string | null; // favicon 속성 추가
-}
+import { useGetTabInfo } from '@/hooks';
export function CurrentTabInfo() {
- const [tabInfo, setTabInfo] = useState
(null);
-
- useEffect(() => {
- // 현재 탭 정보 가져오기
- chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
- const tab = tabs[0];
- setTabInfo({
- title: tab.title || 'No Title',
- url: tab.url || 'No URL',
- });
-
- console.log('tab.url', tab.url);
-
- if (
- tab.url &&
- !(tab.url.startsWith('http://') || tab.url.startsWith('https://'))
- ) {
- return;
- }
-
- // 현재 탭의 content_script에 postMessage를 통해 파비콘 이미지 요청
- console.log('send message REQUEST_FAVICON');
- chrome.runtime.sendMessage(
- { type: 'REQUEST_FAVICON', tabId: tab.id },
- (response) => {
- console.log('response', response);
-
- // 이전 상태를 기반으로 새로운 상태를 설정
- setTabInfo((prev) => {
- if (prev === null)
- return {
- title: 'No Title',
- url: 'No URL',
- favicon: response.favicon || null,
- }; // prev가 null인 경우 초기값 설정
-
- return {
- ...prev,
- favicon: response.favicon || null, // 응답에서 받은 파비콘 URL 설정
- };
- });
- }
- );
- });
- }, []);
+ const tabInfo = useGetTabInfo();
return (
{tabInfo?.title}
URL: {tabInfo?.url}
{tabInfo?.favicon ? (
-
+
) : (
No Favicon
)}
- {tabInfo?.ogImage ? (
-
- ) : (
-
No OG Image
- )}
);
}
diff --git a/frontend/techpick-extension/src/constants/message.ts b/frontend/techpick-extension/src/constants/message.ts
index e46d6da57..ab002bd44 100644
--- a/frontend/techpick-extension/src/constants/message.ts
+++ b/frontend/techpick-extension/src/constants/message.ts
@@ -1 +1 @@
-export const REQUEST_OG_IMAGE = 'REQUEST_OG_IMAGE';
+export const REQUEST_FAVICON = 'REQUEST_FAVICON';
diff --git a/frontend/techpick-extension/src/hooks/index.ts b/frontend/techpick-extension/src/hooks/index.ts
index e69de29bb..7480e9ee3 100644
--- a/frontend/techpick-extension/src/hooks/index.ts
+++ b/frontend/techpick-extension/src/hooks/index.ts
@@ -0,0 +1 @@
+export { useGetTabInfo } from './useGetTabInfo';
diff --git a/frontend/techpick-extension/src/hooks/useGetTabInfo.tsx b/frontend/techpick-extension/src/hooks/useGetTabInfo.tsx
new file mode 100644
index 000000000..8a3157fec
--- /dev/null
+++ b/frontend/techpick-extension/src/hooks/useGetTabInfo.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import { REQUEST_FAVICON } from '@/constants';
+
+interface TabInfo {
+ title: string | undefined;
+ url: string | undefined;
+ favicon?: string | undefined | null;
+}
+
+export function useGetTabInfo() {
+ const [tabInfo, setTabInfo] = useState({
+ title: undefined,
+ url: undefined,
+ favicon: undefined,
+ });
+
+ useEffect(() => {
+ // 현재 탭 정보 가져오기
+ chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+ const tab = tabs[0];
+ setTabInfo({
+ title: tab.title,
+ url: tab.url,
+ });
+
+ // http가 아닌 다른 url(ex: chrome)은 권한이 없어서 확장 프로그램에서 에러가 날 수 있습니다.
+ if (tab.url && !tab.url.startsWith('http')) {
+ return;
+ }
+
+ chrome.runtime.sendMessage(
+ { type: REQUEST_FAVICON, tabId: tab.id },
+ (response: { favicon: string | null | undefined }) => {
+ setTabInfo((prev) => {
+ return {
+ ...prev,
+ favicon: response.favicon,
+ };
+ });
+ }
+ );
+ });
+ }, []);
+
+ return tabInfo;
+}
diff --git a/frontend/techpick-extension/tsconfig.app.tsbuildinfo b/frontend/techpick-extension/tsconfig.app.tsbuildinfo
index cb48780d7..c0eddbf94 100644
--- a/frontend/techpick-extension/tsconfig.app.tsbuildinfo
+++ b/frontend/techpick-extension/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"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/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"}
\ No newline at end of file
+{"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.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"}
\ No newline at end of file
From 65f1e5e01bcec993c234898787005363a3351fbe Mon Sep 17 00:00:00 2001
From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com>
Date: Wed, 25 Sep 2024 12:04:56 +0900
Subject: [PATCH 11/13] =?UTF-8?q?refactor:=20background.ts=20=EC=A0=9C?=
=?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/chrome-extension/background.ts | 45 -------------------
.../src/chrome-extension/contentscript.ts | 14 ------
.../techpick-extension/src/hooks/index.ts | 2 +-
.../hooks/useGetTabInfo/useGetTabInfo.lib.ts | 18 ++++++++
.../{ => useGetTabInfo}/useGetTabInfo.tsx | 36 ++++++++-------
5 files changed, 39 insertions(+), 76 deletions(-)
create mode 100644 frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.lib.ts
rename frontend/techpick-extension/src/hooks/{ => useGetTabInfo}/useGetTabInfo.tsx (53%)
diff --git a/frontend/techpick-extension/src/chrome-extension/background.ts b/frontend/techpick-extension/src/chrome-extension/background.ts
index dd3d51eae..e69de29bb 100644
--- a/frontend/techpick-extension/src/chrome-extension/background.ts
+++ b/frontend/techpick-extension/src/chrome-extension/background.ts
@@ -1,45 +0,0 @@
-import { REQUEST_FAVICON } from '@/constants';
-
-const getFavicon = () => {
- const faviconLink =
- document.querySelector("link[rel='icon']") ||
- document.querySelector("link[rel='shortcut icon']");
- const faviconUrl =
- faviconLink instanceof HTMLLinkElement ? faviconLink.href : null;
-
- return faviconUrl; // 파비콘 URL 반환
-};
-
-// 메시지를 수신하여 파비콘을 가져오는 리스너
-chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
- if (message.type !== REQUEST_FAVICON || !message.tabId) {
- return;
- }
-
- const tabId = message.tabId;
-
- if (!tabId) {
- sendResponse({ favicon: null }); // tabId가 없을 경우 응답
- }
-
- // tabId가 정의된 경우에만 실행
- chrome.scripting.executeScript(
- {
- target: { tabId: tabId },
- func: getFavicon,
- },
- (results) => {
- // 파비콘을 찾지 못했을 경우
- if (!results || !results[0]) {
- sendResponse({ favicon: null });
- }
-
- const faviconUrl = results[0].result;
- sendResponse({ favicon: faviconUrl });
- }
- );
-
- return true;
- // 비동기 응답을 위해 true를 반환
- // chrome.scripting.executeScript가 비동기적이다.
-});
diff --git a/frontend/techpick-extension/src/chrome-extension/contentscript.ts b/frontend/techpick-extension/src/chrome-extension/contentscript.ts
index 77d915d0d..e69de29bb 100644
--- a/frontend/techpick-extension/src/chrome-extension/contentscript.ts
+++ b/frontend/techpick-extension/src/chrome-extension/contentscript.ts
@@ -1,14 +0,0 @@
-// window.addEventListener('message', (event) => {
-// // 다른 페이지에서 오는 메시지는 무시
-// if (event.source !== window || event.data.type !== 'REQUEST_FAVICON') return;
-
-// // 파비콘 추출
-// const faviconLink =
-// document.querySelector("link[rel='icon']") ||
-// document.querySelector("link[rel='shortcut icon']");
-// const faviconUrl =
-// faviconLink instanceof HTMLLinkElement ? faviconLink.href : null;
-
-// // Open Graph 이미지 추출 후 메시지를 페이지에 다시 보냄
-// chrome.runtime.sendMessage({ type: 'RESPONSE_FAVICON', ogImage: faviconUrl });
-// });
diff --git a/frontend/techpick-extension/src/hooks/index.ts b/frontend/techpick-extension/src/hooks/index.ts
index 7480e9ee3..c070287e2 100644
--- a/frontend/techpick-extension/src/hooks/index.ts
+++ b/frontend/techpick-extension/src/hooks/index.ts
@@ -1 +1 @@
-export { useGetTabInfo } from './useGetTabInfo';
+export { useGetTabInfo } from './useGetTabInfo/useGetTabInfo';
diff --git a/frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.lib.ts b/frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.lib.ts
new file mode 100644
index 000000000..9bd9042ff
--- /dev/null
+++ b/frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.lib.ts
@@ -0,0 +1,18 @@
+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;
+};
+
+export const fetchFavicon = async (tabId: number) => {
+ const results = await chrome.scripting.executeScript({
+ target: { tabId },
+ func: getFaviconFromDom,
+ });
+
+ // 결과에서 파비콘 URL을 반환
+ return results && results[0] ? results[0].result : null;
+};
diff --git a/frontend/techpick-extension/src/hooks/useGetTabInfo.tsx b/frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.tsx
similarity index 53%
rename from frontend/techpick-extension/src/hooks/useGetTabInfo.tsx
rename to frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.tsx
index 8a3157fec..a3a71a748 100644
--- a/frontend/techpick-extension/src/hooks/useGetTabInfo.tsx
+++ b/frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.tsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
-import { REQUEST_FAVICON } from '@/constants';
+import { fetchFavicon } from './useGetTabInfo.lib';
interface TabInfo {
title: string | undefined;
@@ -15,31 +15,35 @@ export function useGetTabInfo() {
});
useEffect(() => {
- // 현재 탭 정보 가져오기
- chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+ 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)은 권한이 없어서 확장 프로그램에서 에러가 날 수 있습니다.
+ // http가 아닌 다른 URL(ex: chrome)은 권한이 없어서 확장 프로그램에서 에러가 날 수 있습니다.
if (tab.url && !tab.url.startsWith('http')) {
return;
}
- chrome.runtime.sendMessage(
- { type: REQUEST_FAVICON, tabId: tab.id },
- (response: { favicon: string | null | undefined }) => {
- setTabInfo((prev) => {
- return {
- ...prev,
- favicon: response.favicon,
- };
- });
- }
- );
- });
+ if (!tab.id) {
+ return;
+ }
+
+ const faviconUrl = await fetchFavicon(tab.id);
+ setTabInfo((prev) => ({
+ ...prev,
+ favicon: faviconUrl,
+ }));
+ };
+
+ getTabInfo();
}, []);
return tabInfo;
From 35b145cabe3fe928cd041eef6af88cb885e9c766 Mon Sep 17 00:00:00 2001
From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com>
Date: Wed, 25 Sep 2024 12:32:31 +0900
Subject: [PATCH 12/13] =?UTF-8?q?feat:=20og:description=20=EA=B0=80?=
=?UTF-8?q?=EC=A0=B8=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/CurrentTabInfo.tsx | 5 +++
.../hooks/useGetTabInfo/useGetTabInfo.lib.ts | 40 ++++++++++++++-----
.../src/hooks/useGetTabInfo/useGetTabInfo.tsx | 14 +++++--
.../tsconfig.app.tsbuildinfo | 2 +-
4 files changed, 46 insertions(+), 15 deletions(-)
diff --git a/frontend/techpick-extension/src/components/CurrentTabInfo.tsx b/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
index 5c77b9ea4..7205435dd 100644
--- a/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
+++ b/frontend/techpick-extension/src/components/CurrentTabInfo.tsx
@@ -12,6 +12,11 @@ export function CurrentTabInfo() {
) : (
No Favicon
)}
+ {tabInfo.ogDescription ? (
+ {tabInfo.ogDescription}
+ ) : (
+ No Og description
+ )}
);
}
diff --git a/frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.lib.ts b/frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.lib.ts
index 9bd9042ff..f4bc7f99e 100644
--- a/frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.lib.ts
+++ b/frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.lib.ts
@@ -1,18 +1,38 @@
-const getFaviconFromDom = () => {
- const faviconLink =
- document.querySelector("link[rel='icon']") ||
- document.querySelector("link[rel='shortcut icon']") ||
- document.querySelector('link');
+// 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;
+ 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 fetchFavicon = async (tabId: number) => {
+export const fetchFaviconAndDescription = async (tabId: number) => {
const results = await chrome.scripting.executeScript({
target: { tabId },
- func: getFaviconFromDom,
+ func: getPageInfoFromDom,
});
- // 결과에서 파비콘 URL을 반환
- return results && results[0] ? results[0].result : null;
+ return results[0].result;
};
diff --git a/frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.tsx b/frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.tsx
index a3a71a748..5a04eb8ce 100644
--- a/frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.tsx
+++ b/frontend/techpick-extension/src/hooks/useGetTabInfo/useGetTabInfo.tsx
@@ -1,17 +1,17 @@
import { useEffect, useState } from 'react';
-import { fetchFavicon } from './useGetTabInfo.lib';
+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({
title: undefined,
url: undefined,
- favicon: undefined,
});
useEffect(() => {
@@ -36,10 +36,16 @@ export function useGetTabInfo() {
return;
}
- const faviconUrl = await fetchFavicon(tab.id);
+ const result = await fetchFaviconAndDescription(tab.id);
+
+ if (!result) {
+ return;
+ }
+
setTabInfo((prev) => ({
...prev,
- favicon: faviconUrl,
+ favicon: result?.faviconUrl,
+ ogDescription: result?.ogDescription,
}));
};
diff --git a/frontend/techpick-extension/tsconfig.app.tsbuildinfo b/frontend/techpick-extension/tsconfig.app.tsbuildinfo
index c0eddbf94..b71980104 100644
--- a/frontend/techpick-extension/tsconfig.app.tsbuildinfo
+++ b/frontend/techpick-extension/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"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.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"}
\ No newline at end of file
+{"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"}
\ No newline at end of file
From 9f7705766c97736871828722460601b44ddc6100 Mon Sep 17 00:00:00 2001
From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com>
Date: Wed, 25 Sep 2024 12:37:23 +0900
Subject: [PATCH 13/13] =?UTF-8?q?chore:=20=EC=93=B0=EC=A7=80=20=EC=95=8A?=
=?UTF-8?q?=EB=8A=94=20=EC=83=81=EC=88=98=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
frontend/techpick-extension/src/constants/index.ts | 1 -
frontend/techpick-extension/src/constants/message.ts | 1 -
2 files changed, 2 deletions(-)
delete mode 100644 frontend/techpick-extension/src/constants/message.ts
diff --git a/frontend/techpick-extension/src/constants/index.ts b/frontend/techpick-extension/src/constants/index.ts
index f54558745..e69de29bb 100644
--- a/frontend/techpick-extension/src/constants/index.ts
+++ b/frontend/techpick-extension/src/constants/index.ts
@@ -1 +0,0 @@
-export * from './message';
diff --git a/frontend/techpick-extension/src/constants/message.ts b/frontend/techpick-extension/src/constants/message.ts
deleted file mode 100644
index ab002bd44..000000000
--- a/frontend/techpick-extension/src/constants/message.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const REQUEST_FAVICON = 'REQUEST_FAVICON';