190511 크롬 확장 프로그램 제작 일지

전엔 그냥 "이런 거 만들고 있다!"라고만 쓰느라 제대로 정리 못 했던 걸 이번엔 좀 정리해보려고 합니다.

먼저, 이 사이트를 보며 크롬 익스텐션에 사용 가능한 APi등을 훑어봤습니다.

그리고 정적인 웹사이트를 보여주는 거니 굳이 라이브러리를 쓰지 않고 바닐라 자바스크립트로 작업하는 중입니다.

아무래도 새 탭을 조작하는 거다 보니 최대한 빠르게 진행됐으면 좋겠다는 생각이 강하게 들더군요.

"background": {

"scripts": ["background.js"],

"persistent": false

}

chrome.browserAction.onClicked.addListener(function(){chrome.tabs.create({url:"chrome://newtab"})});

먼저, 확장 프로그램 목록에 표시되는 아이콘을 클릭하면 새 탭이 열리도록 했습니다.

다음, 변경된 항목들입니다.

1. chrome storage api를 사용해 사용자가 로그인하면 자동으로 예전 브라우저에서 세팅한 값을 받아올 수 있도록 했습니다. 사용자의 이름, 할 일 목록(To Do List), D-day등 저장하는 모든 항목은 크롬 sync storage에 저장됩니다.

2. 랜덤 배경 추가 - Imgur에 업로드한 이미지를 랜덤으로 가져오도록 했습니다. 이미지 로딩이 완료되면 페이드인 됩니다.

3. D-Day 추가 - D-day 하나를 설정해 화면 상단에 표시할 수 있습니다.

4. 북마크 추가 - 트와이스 관련된 각종 링크를 모아봤습니다.

5. 할 일 목록 모두 삭제 버튼 추가

6. 할 일 목록 스크롤 바 추가 - 목록은 한 번에 3개까지 표시됩니다. 목록이 4개 이상이면 목록에 마우스를 올렸을 때 스크롤 바가 표시됩니다.

7. 드롭다운 추가 - 다양한 곳에 활용 가능한 드롭다운 메뉴를 추가했습니다. 현재는 북마크, 설정에 사용 중입니다.

8. 설정 추가 -손쉬운 커스터마이징을 위한 항목들이 들어갈 예정입니다.

할 일 목록에 표시되는 스크롤 바의 모습

현재 설정에는 간단한 D-day 저장 테스트용으로 이거 하나밖에 들어있질 않네요..ㅎㅎ

북마크 목록의 모습입니다.