From aa0687b5324b9d350f41782ec3fd83173763f126 Mon Sep 17 00:00:00 2001 From: Lewis JooHyeong Lee Date: Thu, 27 Jul 2023 11:28:55 +0900 Subject: [PATCH] FEAT: #11 bookmark tagging result shows in extension --- web/extension/background/background.js | 20 ++++++++-- web/extension/contentScript.js | 40 ++++++++++++++----- web/extension/popup.html | 3 +- web/extension/popup.js | 53 ++++++++++++++++++-------- 4 files changed, 86 insertions(+), 30 deletions(-) diff --git a/web/extension/background/background.js b/web/extension/background/background.js index 9739e6a..77332a3 100644 --- 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 index 17bc634..7b167b4 100644 --- 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 index d69ac8c..ee45170 100644 --- a/web/extension/popup.html +++ b/web/extension/popup.html @@ -1,6 +1,7 @@ + @@ -25,7 +26,7 @@ - + Tags
diff --git a/web/extension/popup.js b/web/extension/popup.js index 4b077e4..9e352aa 100644 --- 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) + }) }); });