크롬 익스텐션 튜토리얼 (7) Tabs Manager - 새 창에 지정한 URL 띄우기

목표 : 새 창에 지정한 URL 리스트를 띄울 수 있는 지 확인한다

 

이번 포스팅은 새창에 URL이 띄우는게 가능한 지 프로토타입 모델의 테스트 과정을 기록하였다. 

 

결과물 미리보기

소스코드 : https://github.com/junsungc/chrome-extensions-samples/commit/58f1e27189d2532358ec90747568e9b5e79e26fa

 

58f1e27189d2532358ec90747568e9b5e79e26fa

diff --git a/tutorials/tabs-manager/popup.html b/tutorials/tabs-manager/popup.html
index 04d2600..1c86e8b 100644
--- a/tutorials/tabs-manager/popup.html
+++ b/tutorials/tabs-manager/popup.html
@@ -23,6 +23,9 @@
//새창 start 버튼추가
+  <div id="container">
+    <button id="start">Start</button>
+  </div>

 

diff --git a/tutorials/tabs-manager/popup.js b/tutorials/tabs-manager/popup.js
index cb79eba..edb3cee 100644
--- a/tutorials/tabs-manager/popup.js
+++ b/tutorials/tabs-manager/popup.js

//start 버튼 클릭 시 chrome 새창에 지정한 url 배열 생성
+const startButton = document.querySelector("#start");
+startButton.addEventListener("click", async () => {
+  chrome.windows.create({"focused":true, "url":["https://www.naver.com", "https://www.daum.net"]})
+});

 

 

 

다음 목표 : [새로 시작하기] 기능과 이전의 [그룹화] 기능 탭으로 분리

 

하드 코딩된 URL 리스트 대신 유저로부터 input을 입력받는 기능을 추가하기 전에 손보고싶은 부분이 있다.

그것은..

이번에 개발중인 [새로 시작하기] 기능과 이전의 [그룹화 기능] UI를 분리하는 것이다.

분류는 탭(tab) 기능을 통해서 진행할 계획이다.