FEAT: #11 bookmark tagging result shows in extension

boostcampaitech5 · Jul 27, 2023 · aa0687b · aa0687b
1 parent 222ae1f
commit aa0687b
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 30 deletions.
diff --git a/web/extension/background/background.js b/web/extension/background/background.js
@@ -10,8 +10,9 @@ chrome.bookmarks.onCreated.addListener(function (bookmark) {
   });
 });
 
-// message listener  
+// 북마크 추가 버튼 클릭과 관련된 이벤트 반응 함수
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  // 단일 북마크 추가 시
   if (request.message === 'collect_page_info') {
     let pageInfo = request.pageInfo;
 
@@ -24,22 +25,30 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       console.log(totalInfo)
       console.log(typeof totalInfo)
 
-      // 북마크 정보 전송
+      // 북마크 정보를 서버로 전송
       simpleFetcher(SERVER_URL, totalInfo)
         .then(responseData => {
           if (responseData) {
             console.log("Sending bookmark is done!, ", responseData);
+
+            // contentScript.js 로 태그 결과를 응답으로 전송
+            sendResponse({ tags_result:responseData['tags_result'] });
           }
         })
+        .catch((error) =>{
+          console.log("error in background...")
+        })
     });
+
+    return true;
   }
-
+  
   if (request.anotherPage) {
     // Handle the extracted content here
     console.log("background, ", request.anotherPage);
   }
 
-  // 북마크 정보 수신 후 fetch
+  // 북마크 모두 내보내기 버튼 클릭시 수행하는 함수
   if (request.message === 'export_bookmark_history'){
     // console.log("export_bookmark_history message received!")  // 동작 확인 완료
 
@@ -50,6 +59,9 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       .then(responseData => {
         if (responseData) {
           console.log("Sending bookmarkHistory is done!, ", responseData);
+
+          // contentScript.js 로 태그 결과를 응답으로 전송
+          sendResponse({ tags_result:responseData['tags_result'] });
         }
       })
   }

diff --git a/web/extension/contentScript.js b/web/extension/contentScript.js
@@ -89,16 +89,38 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
 
     const pageInfo = Object.assign(urlInfo, sourceInfo);
     console.log("hd", pageInfo);
-    // Send response to the popup script - 이게 애초부터 계속 undefined이다...
-    sendResponse({ pageInfo: pageInfo });
 
-    // Send the data to the background script
-    chrome.runtime.sendMessage(
-      { message: "collect_page_info", pageInfo: pageInfo },
-      function (response) {
-        console.log(response);
-      }
-    );
+    ////// 북마크 태그 정보 송수신 파트 //////
+    // Send response to the popup script -> 시퀀스 변경. 백그라운드에서 response 획득 시 보내는 것으로.
+    // sendResponse({ pageInfo: pageInfo });
+
+    // 함수 선언 - 백그라운드로 메세지 보내고 대기
+    function sendMessageToBackground(message){
+      return new Promise( function(resolve, reject) {
+        chrome.runtime.sendMessage(message, function(response) {
+          if (response){
+            resolve(response);
+          } else {
+            reject();
+          }
+        })
+      })
+    }
+
+    // 송신 함수 수행 - 백그라운드로부터 메세지를 받았다면
+    sendMessageToBackground({
+      message: "collect_page_info",
+      pageInfo: pageInfo,
+    })
+      .then((responseData) =>{
+        console.log("Response from background script:", responseData);
+        sendResponse( { tags_result: responseData['tags_result'], pageInfo: pageInfo })
+      })
+      .catch((error) =>{
+        console.error("ERROR in contentScript.js, ", error);
+      })
+
+  return true;  
   }
 
   // collect only page's content

diff --git a/web/extension/popup.html b/web/extension/popup.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter&display=swap" />
     <link rel="stylesheet" href="./css/main.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,-25" />
@@ -25,7 +26,7 @@
       <button id="openAppPage", class="app_button", title="App">App</button>
       <button id="exportBookmarkHistory", class="export_button", title="Export">Export</button>
 
-      <input type="text" class="flexible-textbox" />
+      <input type="text" class="flexible-textbox" id="tagsInput" />
       <span class="NAME">Tags</span>
 
       <div id="selectedFolderName" class="flexible-textbox2"></div>

diff --git a/web/extension/popup.js b/web/extension/popup.js
@@ -196,8 +196,14 @@ document.addEventListener("DOMContentLoaded", function () {
       });
   });
 
-  // When button is pushed...
+  ////// 북마크 추가 버튼 관련 시퀀스 함수 //////
+  // 변수 선언
+  const tagsInput = document.getElementById("tagsInput");
+
+  // 북마크 추가 버튼('collect page info') 를 눌렀을 때의 Event Handler
   collectInfoButton.addEventListener("click", function () {
+    tagsInput.value = "적절한 태그를 추론하는 중...";
+
     // Get current tab
     chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
       var activeTab = tabs[0];
@@ -216,21 +222,36 @@ document.addEventListener("DOMContentLoaded", function () {
         }
       );
 
-      // Send a message to the current tab to collect page info
-      chrome.tabs.sendMessage(
-        activeTab.id,
-        { message: "collect_page_info" },
-        function (response) {
-          if (response && response.pageInfo) {
-            console.log(response);
-            // let pageInfo = response.pageInfo;
-            // alert(pageInfo);
-          }
-          else {
-            console.log("Something went wrong.");
-          }
-        }
-      );
+      // 탭 정보를 획득하기 위해 메세지 전송
+      function sendMessageToContent(){
+        return new Promise((resolve, reject) => {
+          chrome.tabs.sendMessage(
+            activeTab.id,
+            { message: "collect_page_info" },
+            function (response) {
+              if (response) { // && response.pageInfo) {
+                resolve(response);
+              }
+              else {
+                reject();
+                console.log("Something went wrong.");
+              }
+            }
+          );
+        })
+      }
+
+      // 함수 실행 및 콘솔 로그 확인 부분
+      sendMessageToContent()
+        .then(response => {
+          console.log(response)
+          tags_result = response.tags_result
+
+          tagsInput.value = tags_result;  // 태그 추론 결과가 익스텐션에 나타나게 된다.
+        })
+        .catch(error => {
+          console.error(error)
+        })
     });
   });