POMOTODO : 크롬 확장프로그램 배포

2022. 1. 18. 15:20ㆍ프로그래밍/개인프로젝트

POMOTODO를 만들면서 작성한 코드를 복습하기 위해 작성하는 글입니다.

 

 

POMOTODO.kr

 

 

What is POMOTODO?

POMOTODO를 완성하고 배포를 위해 고민했는데 여러 가지 장점이 있어서 크롬 확장 프로그램으로 정했다

생활코딩 을 많이 참고해서 만들었고 배포 과정에서 겪었던 어려움이나 느낀 점 등을 기록해두기 위해 글을 작성하기로 했다

크롬 확장프로그램 관련 파일 디렉토리 구조

 

최종 배포 코드

 

- manifest.json

   확장 프로그램에 대한 중요한 정보(이름, 권한 등등)를 크롬에 알리기 위함

<!-- manifest.json -->
{
  "manifest_version": 2,
   
  "name": "POMOTODO",
  "description": "Pomodoro Timer + To Do List + Not To Do List",
  "version": "1.6",
  "browser_action": {
    "default_title": "POMOTODO",
    "default_icon": "/icon.png",
    "default_popup": "CE-popup.html"
  },
  "chrome_url_overrides" : {
    "newtab": "CE-content-script.html"
  }
}

 

- CE-popup.html

   아이콘을 클릭해서 뜨는 '팝업창'에 POMOTODO에 대한 설명을 보여주고 실행할 수 있는 버튼을 제공하기 위함

<!-- CE-popup.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>New Tab</title>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

        body{
            zoom: 120%;
          width:600px;
          padding:1rem;
          /* border:1px solid gray; */
          border-radius: 10px;
        }
        .go-POMOTODO{
            font-family: 'Ubuntu', sans-serif;
            font-style: italic;
            position: relative;
            left: 35%;
            width: 200px;
            text-align: center;
            cursor: pointer;
            padding: 1px;
            margin-bottom: 50px;
            /* color: white; */
            color: rgb(255, 115, 60);
            /* border-radius: 20px; */
            border-radius: 20px;
            /* background-color: rgb(83, 211, 228); */
            box-shadow: 0px 3px 7px rgb(196, 186, 176);
        }
        .go-POMOTODO:hover{
            box-shadow: 0px 7px 13px rgb(238, 193, 172);
        }
        .go-POMOTODO:active{
            box-shadow: 0px 3px 7px rgb(238, 193, 172);
        }
        .click:hover{
            cursor: pointer;
            color: gray;
        }
        hr {
            border: 1px solid transparent;
            /* width: 0%; */
        }
    </style>
</head>
<body>
    
    <div class="go-POMOTODO"><h3>  Start POMOTODO </h3></div>

    <article class="markdown-body entry-content container-lg" itemprop="text"><p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815368-b5ed5144-d747-480b-bb5c-88b7b5c7d4ff.png"><img width="1440" alt="스크린샷 2021-12-31 오후 6 31 10" src="https://user-images.githubusercontent.com/81023768/147815368-b5ed5144-d747-480b-bb5c-88b7b5c7d4ff.png" style="max-width: 100%;"></a></p>
        <hr>
        <h3 dir="auto"><a id="user-content--what-is-pomotodo--eng" class="anchor" aria-hidden="true" href="#-what-is-pomotodo--eng">  </a><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/149079377-6413424b-919b-4dba-bf49-fabf0843150c.png"><img src="https://user-images.githubusercontent.com/81023768/149079377-6413424b-919b-4dba-bf49-fabf0843150c.png" alt="tomato(0)" style="max-width: 100%;"></a> What is POMOTODO ? (ENG)</h3>
        <details>
        <summary class="click"> click  </summary>
        <h1 dir="auto"><a id="user-content-what-is-pomotodo--" class="anchor" aria-hidden="true" href="#what-is-pomotodo--">  </a><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147905737-86695e69-1b87-4676-a723-8c2fd58ee7a4.png"><img src="https://user-images.githubusercontent.com/81023768/147905737-86695e69-1b87-4676-a723-8c2fd58ee7a4.png" alt="tomato(1)" style="max-width: 100%;"></a>	What is POMOTODO ? </h1>
        <p dir="auto"><b>POMOTODO</b> is a web application that combines various functions specialized in schedule management.</p>
        <p dir="auto"><b>The function of POMOTODO.</b></p>
        <ol dir="auto">
        <li>Google search.</li>
        <li>Pomodoro timer.</li>
        <li>TO-DO-list.</li>
        <li>Not-to-do-list.</li>
        <li>Visualize past records.</li>
        <li>Living noise that helps you concentrate.</li>
        <li>Chrome expansion program.</li>
        </ol>
        <br>
        <h3 dir="auto"><a id="user-content-1-google-search" class="anchor" aria-hidden="true" href="#1-google-search">  </a>1. Google search.</h3>
        <a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815216-09a64e39-d038-4d93-a346-b60eca0e2b07.png"><img width="502" alt="스크린샷 2021-12-31 오후 5 13 18" src="https://user-images.githubusercontent.com/81023768/147815216-09a64e39-d038-4d93-a346-b60eca0e2b07.png" style="max-width: 100%;"></a>
        <ul dir="auto">
        <li>You can google search it without having to go to another page.</li>
        <li>You can go to the browser address bar through <b>shift+tab</b><code>shortening key</code> while focused on the search box.</li>
        <li>If you click outside the search box, the search box closes.<br>
        You can open the search box at any time through <b>'shift + center'</b> <code>shortening key</code></li>
        </ul>
        <br>
        <h3 dir="auto"><a id="user-content-2-pomodoro-timer" class="anchor" aria-hidden="true" href="#2-pomodoro-timer">  </a>2. Pomodoro timer.</h3>
        <p dir="auto"><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815637-0de043d3-ce88-4093-ba38-1644739c0b53.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 12 23" src="https://user-images.githubusercontent.com/81023768/147815637-0de043d3-ce88-4093-ba38-1644739c0b53.png" style="max-width: 100%;"></a><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815665-f45d31b7-578d-40a2-839c-c1bb6bcb5e08.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 55 59" src="https://user-images.githubusercontent.com/81023768/147815665-f45d31b7-578d-40a2-839c-c1bb6bcb5e08.png" style="max-width: 100%;"></a><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815660-ee4b9644-5859-42de-8506-518c95559a07.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 59 05" src="https://user-images.githubusercontent.com/81023768/147815660-ee4b9644-5859-42de-8506-518c95559a07.png" style="max-width: 100%;"></a></p>
        <ul dir="auto">
        <li>When the Pomodoro timer is played, it alternately shows the working time/rest time.</li>
        <li>When the timer ends, the <code>time</code> and <code>Text input space</code> are automatically generated.
        <ul dir="auto">
        <li>You can write simple text through the <code>Text input space</code></li>
        </ul>
        </li>
        </ul>
        <br> 
        <h3 dir="auto"><a id="user-content-3-to-do-list" class="anchor" aria-hidden="true" href="#3-to-do-list">  </a>3. TO-DO-list.</h3>
        <ul dir="auto">
        <li>Enter TO-DO-list.</li>
        </ul>
        <a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815859-98a9d889-516c-4bfa-9528-e766ade97c4c.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 33 02" src="https://user-images.githubusercontent.com/81023768/147815859-98a9d889-516c-4bfa-9528-e766ade97c4c.png" style="max-width: 100%;"></a>   
        <ul dir="auto">
        <li>Color change.</li>
        </ul>
        <a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815856-89b52b38-0af9-40b8-9537-df9cb641a22c.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 33 34" src="https://user-images.githubusercontent.com/81023768/147815856-89b52b38-0af9-40b8-9537-df9cb641a22c.png" style="max-width: 100%;"></a>  
        <ul dir="auto">
        <li>Change the location to drag &amp; drop.</li>
        </ul>
        <a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815853-d1a5398b-f68d-4402-84bf-2742d63eec05.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 33 53" src="https://user-images.githubusercontent.com/81023768/147815853-d1a5398b-f68d-4402-84bf-2742d63eec05.png" style="max-width: 100%;"></a>  
        <ul dir="auto">
        <li>Completed mark/aligned.</li>
        </ul>
        <a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815849-a05b3533-f6f4-4fc3-997a-b0b9a367f9b7.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 34 19" src="https://user-images.githubusercontent.com/81023768/147815849-a05b3533-f6f4-4fc3-997a-b0b9a367f9b7.png" style="max-width: 100%;"></a>  
        <ul dir="auto">
        <li>Delete.</li>
        </ul>
        <a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815844-01e9c35c-9ea2-43af-80ca-c5f66830f820.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 34 41" src="https://user-images.githubusercontent.com/81023768/147815844-01e9c35c-9ea2-43af-80ca-c5f66830f820.png" style="max-width: 100%;"></a>  
        <ul dir="auto">
        <li>This is a list where you can write down what You have to do today.
        <ul dir="auto">
        <li>You can move through the <code>drag button</code></li>
        <li>You can change the color by clicking <code>list</code></li>
        <li>You can delete the list through the <code>delete button</code></li>
        </ul>
        </li>
        </ul>
        <br> 
        <h3 dir="auto"><a id="user-content-4-not-to-do-list" class="anchor" aria-hidden="true" href="#4-not-to-do-list">  </a>4. NOT-To-Do-list.</h3>
        <p dir="auto"><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147816158-4cd7d5d1-9798-4e52-97be-bcc128dbe7c2.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 36 06" src="https://user-images.githubusercontent.com/81023768/147816158-4cd7d5d1-9798-4e52-97be-bcc128dbe7c2.png" style="max-width: 100%;"></a><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147816156-df9d04cc-82b5-42e4-b0a3-ae6fee4575ad.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 36 18" src="https://user-images.githubusercontent.com/81023768/147816156-df9d04cc-82b5-42e4-b0a3-ae6fee4575ad.png" style="max-width: 100%;"></a></p>
        <ul dir="auto">
        <li>This is a list where you can write what you shouldn't do today.
        <ul dir="auto">
        <li>It functions like TO-DO-list.</li>
        </ul>
        </li>
        </ul>
        <br> 
        <h3 dir="auto"><a id="user-content-5-visualize-past-records" class="anchor" aria-hidden="true" href="#5-visualize-past-records">  </a>5. Visualize past records.</h3>
        <a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147816202-80b5ecd4-182a-47e3-bb1b-60406ceac159.png"><img width="600" alt="스크린샷 2021-12-31 오후 5 37 37" src="https://user-images.githubusercontent.com/81023768/147816202-80b5ecd4-182a-47e3-bb1b-60406ceac159.png" style="max-width: 100%;"></a>
        <ul dir="auto">
        <li>Check the completed Pomodoro timer and mark it with color and text on the calendar.</li>
        <li>It shows the TO-DO-list and NOT-TO-DO-list of the date.</li>
        <li>look up DB and show you past records.</li>
        </ul>
        <br> 
        <h3 dir="auto"><a id="user-content-6-living-noise-that-helps-you-concentrate" class="anchor" aria-hidden="true" href="#6-living-noise-that-helps-you-concentrate">  </a>6. Living noise that helps you concentrate.</h3>
        <ul dir="auto">
        <li>
        <p dir="auto">Playing audio files and pausing.<br>
        <a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147816227-0380a92b-f577-4591-b9eb-89c697b5e068.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 32 28" src="https://user-images.githubusercontent.com/81023768/147816227-0380a92b-f577-4591-b9eb-89c697b5e068.png" style="max-width: 100%;"></a><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147816222-71f2c3be-57db-4dcf-a3f6-e6227bca2900.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 32 48" src="https://user-images.githubusercontent.com/81023768/147816222-71f2c3be-57db-4dcf-a3f6-e6227bca2900.png" style="max-width: 100%;"></a></p>
        </li>
        <li>
        <p dir="auto">Audio file list.</p>
        </li>
        </ul>
        <a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147816224-3ced3d96-1fbd-4b52-a6e5-448a731c9733.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 32 41" src="https://user-images.githubusercontent.com/81023768/147816224-3ced3d96-1fbd-4b52-a6e5-448a731c9733.png" style="max-width: 100%;"></a>
        <ul dir="auto">
        <li>You can play audio that living noise that helps you concentrate.
        <ul dir="auto">
        <li>You can select one of the 7 audio files and play it.</li>
        </ul>
        </li>
        </ul>
        <br> 
        <br>    
    
    </details>
        <hr>
        <h1 dir="auto"><a id="user-content-what-is-pomotodo-" class="anchor" aria-hidden="true" href="#what-is-pomotodo-">  </a><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147905737-86695e69-1b87-4676-a723-8c2fd58ee7a4.png"><img src="https://user-images.githubusercontent.com/81023768/147905737-86695e69-1b87-4676-a723-8c2fd58ee7a4.png" alt="tomato(1)" style="max-width: 100%;"></a>	What is POMOTODO ?</h1>
        <h4 dir="auto"><a id="user-content-pomotodo는-일정-관리에-특화된-여러기능을-한데-묶은-웹애플리케이션입니다" class="anchor" aria-hidden="true" href="#pomotodo는-일정-관리에-특화된-여러기능을-한데-묶은-웹애플리케이션입니다">  </a>POMOTODO는 일정 관리에 특화된 여러기능을 한데 묶은 웹애플리케이션입니다</h4>
        <h4 dir="auto"><a id="user-content-pomotodo의-기능" class="anchor" aria-hidden="true" href="#pomotodo의-기능">  </a>POMOTODO의 기능</h4>
        <h6 dir="auto"><a id="user-content-1-구글-검색" class="anchor" aria-hidden="true" href="#1-구글-검색">  </a>1. 구글 검색</h6>
        <h6 dir="auto"><a id="user-content-2-포모도로-타이머" class="anchor" aria-hidden="true" href="#2-포모도로-타이머">  </a>2. 포모도로 타이머</h6>
        <h6 dir="auto"><a id="user-content-3-투두-리스트" class="anchor" aria-hidden="true" href="#3-투두-리스트">  </a>3. 투두 리스트</h6>
        <h6 dir="auto"><a id="user-content-4-낫투두-리스트" class="anchor" aria-hidden="true" href="#4-낫투두-리스트">  </a>4. 낫투두 리스트</h6>
        <h6 dir="auto"><a id="user-content-5-과거-기록-시각화" class="anchor" aria-hidden="true" href="#5-과거-기록-시각화">  </a>5. 과거 기록 시각화</h6>
        <h6 dir="auto"><a id="user-content-6-집중에-도움이-되는-생활-소음" class="anchor" aria-hidden="true" href="#6-집중에-도움이-되는-생활-소음">  </a>6. 집중에 도움이 되는 생활 소음</h6>
        <h6 dir="auto"><a id="user-content-7-크롬-확장-프로그램" class="anchor" aria-hidden="true" href="#7-크롬-확장-프로그램">  </a>7. 크롬 확장 프로그램</h6>
        <br>
        <h3 dir="auto"><a id="user-content-1구글-검색창" class="anchor" aria-hidden="true" href="#1구글-검색창">  </a>1.구글 검색창</h3>
        <p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815216-09a64e39-d038-4d93-a346-b60eca0e2b07.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 13 18" src="https://user-images.githubusercontent.com/81023768/147815216-09a64e39-d038-4d93-a346-b60eca0e2b07.png" style="max-width: 100%;"></a></p>
        <ul dir="auto">
        <li>다른 페이지로 이동할 필요 없이 구글 검색을 할 수 있습니다</li>
        <li>검색창 외부를 클릭하면 검색창은 닫히고,<br>
        <b><code>shift + enter</code></b> <code>단축키</code>를 통해 언제든 검색창을 열 수 있습니다</li>
        <li>검색창에 포커스 된 상태로 <b>shift+tab</b><code>단축키</code>를 통해 주소 검색창으로 이동할 수 있습니다</li>
        </ul>
        <br>
        <h3 dir="auto"><a id="user-content-2-포모도로-타이머-1" class="anchor" aria-hidden="true" href="#2-포모도로-타이머-1">  </a>2. 포모도로 타이머</h3>
        <p dir="auto"><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815637-0de043d3-ce88-4093-ba38-1644739c0b53.png"><img width="300" alt="스크린샷 2021-12-31 오후 5 12 23" src="https://user-images.githubusercontent.com/81023768/147815637-0de043d3-ce88-4093-ba38-1644739c0b53.png" style="max-width: 100%;"></a><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815665-f45d31b7-578d-40a2-839c-c1bb6bcb5e08.png"><img width="300" alt="스크린샷 2021-12-31 오후 5 55 59" src="https://user-images.githubusercontent.com/81023768/147815665-f45d31b7-578d-40a2-839c-c1bb6bcb5e08.png" style="max-width: 100%;"></a><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815660-ee4b9644-5859-42de-8506-518c95559a07.png"><img width="300" alt="스크린샷 2021-12-31 오후 5 59 05" src="https://user-images.githubusercontent.com/81023768/147815660-ee4b9644-5859-42de-8506-518c95559a07.png" style="max-width: 100%;"></a></p>
        <ul dir="auto">
        <li>시간을 설정해서 <b>작업 시간 / 휴식 시간</b> 교차로 진행되는 포모도로 타이머입니다</li>
        <li>타이머가 종료되면 <code>시간</code>과 <code>입력창</code>이 자동으로 생성됩니다
        <ul dir="auto">
        <li><code>입력창</code>을 통해 간단한 텍스트를 작성할 수 있습니다</li>
        </ul>
        </li>
        </ul>
        <br> 
        <h3 dir="auto"><a id="user-content-3-투두리스트" class="anchor" aria-hidden="true" href="#3-투두리스트">  </a>3. 투두리스트</h3>
        <ul dir="auto">
        <li>투두리스트 입력</li>
        </ul>
        <p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815859-98a9d889-516c-4bfa-9528-e766ade97c4c.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 33 02" src="https://user-images.githubusercontent.com/81023768/147815859-98a9d889-516c-4bfa-9528-e766ade97c4c.png" style="max-width: 100%;"></a></p>   
        <ul dir="auto">
        <li>색상변경</li>
        </ul>
        <p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815856-89b52b38-0af9-40b8-9537-df9cb641a22c.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 33 34" src="https://user-images.githubusercontent.com/81023768/147815856-89b52b38-0af9-40b8-9537-df9cb641a22c.png" style="max-width: 100%;"></a></p>  
        <ul dir="auto">
        <li>위치변경</li>
        </ul>
        <p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815853-d1a5398b-f68d-4402-84bf-2742d63eec05.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 33 53" src="https://user-images.githubusercontent.com/81023768/147815853-d1a5398b-f68d-4402-84bf-2742d63eec05.png" style="max-width: 100%;"></a></p>  
        <ul dir="auto">
        <li>완료표시/정렬</li>
        </ul>
        <p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815849-a05b3533-f6f4-4fc3-997a-b0b9a367f9b7.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 34 19" src="https://user-images.githubusercontent.com/81023768/147815849-a05b3533-f6f4-4fc3-997a-b0b9a367f9b7.png" style="max-width: 100%;"></a></p>  
        <ul dir="auto">
        <li>삭제</li>
        </ul>
        <p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147815844-01e9c35c-9ea2-43af-80ca-c5f66830f820.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 34 41" src="https://user-images.githubusercontent.com/81023768/147815844-01e9c35c-9ea2-43af-80ca-c5f66830f820.png" style="max-width: 100%;"></a></p>  
        <ul dir="auto">
        <li>오늘 해야 할 일을 작성할 수 있는 투두리스트 입니다
        <ul dir="auto">
        <li><code>드래그버튼</code>을 통해 이동이 가능합니다</li>
        <li><code>리스트</code>를 클릭해서 색상을 변경할 수 있습니다</li>
        <li><code>삭제버튼</code>을 통해 리스트를 삭제할 수 있습니다</li>
        </ul>
        </li>
        </ul>
        <br> 
        <h3 dir="auto"><a id="user-content-4-낫투두리스트" class="anchor" aria-hidden="true" href="#4-낫투두리스트">  </a>4. 낫투두리스트</h3>
        <p dir="auto"><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147816158-4cd7d5d1-9798-4e52-97be-bcc128dbe7c2.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 36 06" src="https://user-images.githubusercontent.com/81023768/147816158-4cd7d5d1-9798-4e52-97be-bcc128dbe7c2.png" style="max-width: 100%;"></a><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147816156-df9d04cc-82b5-42e4-b0a3-ae6fee4575ad.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 36 18" src="https://user-images.githubusercontent.com/81023768/147816156-df9d04cc-82b5-42e4-b0a3-ae6fee4575ad.png" style="max-width: 100%;"></a></p>
        <ul dir="auto">
        <li>오늘 하지 말아야 할 일을 작성할 수 있는 낫투두리스트입니다.
        <ul dir="auto">
        <li>투두리스트와 같은 기능을 합니다</li>
        </ul>
        </li>
        </ul>
        <br> 
        <h3 dir="auto"><a id="user-content-5-과거-기록-시각화-1" class="anchor" aria-hidden="true" href="#5-과거-기록-시각화-1"> </a>5. 과거 기록 시각화</h3>
        <p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147816202-80b5ecd4-182a-47e3-bb1b-60406ceac159.png"><img width="600" alt="스크린샷 2021-12-31 오후 5 37 37" src="https://user-images.githubusercontent.com/81023768/147816202-80b5ecd4-182a-47e3-bb1b-60406ceac159.png" style="max-width: 100%;"></a></p>
        <ul dir="auto">
        <li>완료한 포모도로 타이머를 체크해서 달력에 색깔로 표시합니다</li>
        <li>DB를 조회해서 과거의 기록을 보여줍니다</li>
        </ul>
        <br> 
        <h3 dir="auto"><a id="user-content-6-집중에-도움이-되는-생활-소음-1" class="anchor" aria-hidden="true" href="#6-집중에-도움이-되는-생활-소음-1">  </a>6. 집중에 도움이 되는 생활 소음</h3>
        <ul dir="auto">
        <li>
        <p dir="auto">오디오 파일 재생 및 일시정지<br>
        <a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147816227-0380a92b-f577-4591-b9eb-89c697b5e068.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 32 28" src="https://user-images.githubusercontent.com/81023768/147816227-0380a92b-f577-4591-b9eb-89c697b5e068.png" style="max-width: 100%;"></a><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147816222-71f2c3be-57db-4dcf-a3f6-e6227bca2900.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 32 48" src="https://user-images.githubusercontent.com/81023768/147816222-71f2c3be-57db-4dcf-a3f6-e6227bca2900.png" style="max-width: 100%;"></a></p>
        </li>
        <li>
        <p dir="auto">오디오파일 리스트</p>
        </li>
        </ul>
        <p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/81023768/147816224-3ced3d96-1fbd-4b52-a6e5-448a731c9733.png"><img   width="300" alt="스크린샷 2021-12-31 오후 5 32 41" src="https://user-images.githubusercontent.com/81023768/147816224-3ced3d96-1fbd-4b52-a6e5-448a731c9733.png" style="max-width: 100%;"></a></p>
        <ul dir="auto">
        <li>집중에 도움이 되는 생활소음을 재생할 수 있습니다
        <ul dir="auto">
        <li>총 7개의 오디오파일중 하나를 선택해서 재생 할 수 있습니다</li>
        </ul>
        </li>
        </ul>
        <br> 
        </article>
</body>
<script src="CE-popup.js"></script>
</html>

 

 

- CE-popup.js

   '팝업창'에서 동작을 담당함

// CE-popup.js
let goPOMO = document.querySelector('.go-POMOTODO');

goPOMO.addEventListener("click", go); 
function go(){
    console.log('asd')
    window.open('https://POMOTODO.kr/');
}

 

- CE-content-script.html

   크롬에서 '새 탭' 버튼을 눌렀을 때 pomotodo.kr로 이동시켜주기 위함

<!-- CE-content-script.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>New Tab</title>
</head>
    <script src="CE-content-script.js"></script>
</html>

 

- CE-content-script.js

     '새 탭' 버튼을 눌렀을 때 동작을 담당함

// CE-content-script.js
window.open('https://POMOTODO.kr/',"_self");

검토 과정에서 반려받은 이유, 해결법

 

1. 사용하지 않는 권한

 

<!-- 기존에는 manifest.json 파일에  activeTab 권한을 요청하는 코드가 작성 되어있었다 -->
  "permissions" : [
    "activeTab"
  ]

탭을 눌러서 pomotodo.kr로 이동시키기 위한 확장 프로그램이라 activeTab 권한을 요청했지만

실제로는 사용하지 않는 권한이었고 구글 측에서는 다음과 같은 해결방법을 제시하고 반려시켰다

 

 

2. 구글 정책상 반려

 

단순 링크 이동을 위한 프로그램은 구글 정책상 반려된다

그래서 다른 기능도 구현해야겠다고 판단했지만 마땅히 떠오르는 기능이 없었다

괜히 이것저것 더 추가하면 오히려 더 복잡하고 의미가 모호해질 것이라고 판단했고,

팝업창을 통해 어떤 서비스인지 설명 + 이동시키기 위한 버튼을 구현하기로 했다

  <!-- manifest.json 코드추가 : 아이콘을 눌렀을 때 팝업창을 통해 제공하고자 하는 html파일 연결  -->
  "browser_action": {
    "default_title": "POMOTODO",
    "default_icon": "/icon.png",
    "default_popup": "CE-popup.html"
  },

CE-popup.html 파일은 깃허브에 미리 작성해둔 마크다운 문서를 개발자 도구로 긁어와서 사용했고

필요 없는 부분은 삭제, 추가해야 할 부분을 추가 작성해서 준비했다

버튼을 통한 동작을 위해 CE-popup.js파일도 추가로 작성했다

 

 

3. 2에서 빼먹은 부분 수정

 

POMOTODO로 이동시키는 주소를 http로 지정해서 반려가 떴다.

https로 변경해서 검토 요청했고 배포할 수 있었다

 

 

배포 중에 느낀 점

 

1. 생각보다 배포에 오랜 시간이 필요하다

검토 요청한다고 바로 처리되는 게 아니라 짧게는 1일 길게는 4일까지도 소요되기도 했다

플랫폼을 통한 배포 경험이 처음이라 기획단계에 배포에 대한 시간을 체크하지 못해서 20일 정도 더 시간을 소모하게 되었다

다음 프로젝트는 기획 단계에서부터 배포에 대한 시간을 염두에 둬야겠다고 생각했다

 

2. 플랫폼을 통한 배포를 통해 얻은 것이 많다

 

첫 번째로 취준생의 입장에서 하기 힘든 '검토 요청'과 '수정'을 반복하는 과정, '승인'이 났을 때 얻을 수 있는 쾌감,

이 과정에서 쌓인 '경험'들이 앞으로 많은 도움이 될 것 같다고 생각했고

왜 이런 과정이 필요한지, 어떻게 준비해야 하며 내가 얻는 것이 무엇인지 알 수 있었다

 

3. 실감이 나고 동시에 책임감도 생겼다

 

저번 달에 잠시 공부용으로 먼저 배포를 했다가 아직 완성된 상태가 아닌데 사용자수가 늘어나는 걸 보고 걱정이 되어 내렸었다.

도메인은 .kr이지만 크롬 확장 프로그램을 통해 전 세계의 사용자에게 배포할 수 있다고 판단해서 what is POMOTODO문서를 영어 버전도  작성해서 대비했다

어제 배포 완료 후에 통계를 보니 예전에 설치했던 사용자들의 국적이 다양한 것을 확인할 수 있었고 조금 늦었지만 영어문서를 잘 준비했다고 생각했다

통계를 통해 눈으로 확인을 하니깐 더 실감 나고 책임감도 생겼다

 

'프로그래밍 > 개인프로젝트' 카테고리의 다른 글

세번째 프로젝트 기획 - React Native를 이용한 모바일 앱  (0) 2022.03.03
POMOTODO : 신규가입계정 502 bad gateway issue  (0) 2022.01.24
POMOTODO : issue (조건에 따른 홈페이지 새로고침)  (0) 2022.01.13
POMOTODO : DB설계 시각화  (0) 2022.01.11
POMOTODO : issue (502 bad gateway)  (0) 2022.01.11

관련글

댓글 0

티스토리툴바