크롬 익스텐션 튜토리얼 (8) Tabs Manager - 탭 기능 만들기

목표 : [시작하기], [그룹화하기] 기능을 탭으로 구분한다.

 

결과물 미리보기

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

변경점 요약

 

> 임의로 요약된 diff 파일입니다. 주석 위주로 읽어보시면 파악이 빠릅니다.

> 자세한 소스코드가 궁금하다면 위 hithub 링크를 참조 부탁드립니다.

diff --git a/tutorials/tabs-manager/popup.html b/tutorials/tabs-manager/popup.html
index 1c86e8b..6072841 100644
--- a/tutorials/tabs-manager/popup.html
+++ b/tutorials/tabs-manager/popup.html
@@ -18,17 +18,27 @@

// tabs__btn를 어떤 것을 선택했는지에 따라 tabs__content가 바뀌도록 구성
+  <div id="tabs">
+
+    <div id="top__container">
+      <div class="tabs__btn">Start</div>
+      <div class="tabs__btn">Group</div>
+    </div>
+
+    <div class="tabs__content">
+      <button id="start">Start</button>
+    </div>
+    <div class="tabs__content">
+      <div id="container">
+        <button id="group">Group Tabs</button>
+        <button id="ungroup">UnGroup Tabs</button>
+      </div>
+      <ul id="li_item"></ul>
+    </div>

   <script src="./popup.js" type="module"></script>
+  <script src="./tab.js" type="module"></script>
 </body>
 
 </html>

 

 

diff --git a/tutorials/tabs-manager/tab.js b/tutorials/tabs-manager/tab.js
new file mode 100644
index 0000000..81d5636
--- /dev/null
+++ b/tutorials/tabs-manager/tab.js
@@ -0,0 +1,33 @@
+const tabBody = document.querySelector("#tabs");
+const tabsBtns = tabBody.querySelectorAll(".tabs__btn");
+const tabsContents = tabBody.querySelectorAll(".tabs__content");

// 선택된 tab은 스타일의 display 속성을 block, 이외에는 none을 줌 
+function displayCurrentTab(current) {
+  for (let i = 0; i < tabsContents.length; i++) {
+    tabsContents[i].style.display = (current === i) ? "block" : "none";
+  }
+}

//tabsBtns 클릭 시 displayCurrentTab 호출 
//classList에 clicked를 추가함 ( 선택된 버튼을 구분하기 쉽게 스타일을 주기 위함 )
+for (let i = 0; i < tabsBtns.length; i++) {
+  tabsBtns[i].addEventListener("click", event => {
+    if (event.target.className === "tabs__btn") {
+      for (let i = 0; i < tabsBtns.length; i++) {
+        if (event.target === tabsBtns[i]) {
+          displayCurrentTab(i);
+          break;
+        }
+      }
+    }
+    for (let i = 0; i < tabsBtns.length; i++) {
+      tabsBtns[i].classList.remove("clicked");
+    }
+    event.target.classList.add("clicked");
+  });
+}

//최초에는 첫번째 탭이 선택됨
+function init() {
+  displayCurrentTab(0);
+  tabsBtns[0].classList.add("clicked");
+}
+
+init()

 

 

diff --git a/tutorials/tabs-manager/popup.css b/tutorials/tabs-manager/popup.css
index ff8b37d..d60b27e 100644
--- a/tutorials/tabs-manager/popup.css
+++ b/tutorials/tabs-manager/popup.css

//clicked 클래스에 color: gold 속성 부여하여
//clicked 된 버튼을 쉽게 알 수 있도록 함.
+.clicked {
+  color: gold;
+}

 

 

다음 목표 : 사용자로부터 [시작하기] 리스트를 입력 / 수정할 수 있는 기능 추가