티스토리 뷰

Project

Memo - Chrome Extension - 2020-03-12

J3SUNG 2020. 3. 12. 19:39

친구와 크롬 확장프로그램을 만들어보기로 했습니다.

웹개발에 아직 익숙하지 않아서 간단한 것으로 만들기로 했고 우선 아이디어 회의를 했습니다.
주제는 크게 4가지로 메모, 번역, 환율, 매크로에 대한 프로그램을 생각했고,
고민 끝에 웹페이지에 메모를 할 수 있는 프로그램을 만들기로 했습니다.

기능으로는
우클릭을 해서 메모장을 생성할 수 있으며, 메모장 크기조정, 이동, 종료를 할 수 있습니다.
확장프로그램 아이콘을 눌러서 메모장의 글자와 배경에 대한 속성을 조절할 수 있게 하였습니다.

개발보다 확장프로그램 개발에 대해서 아는것이 없어서 이 부분에 대해서 알아보는데 시간이 많이 들었습니다.

manifest.json : 확장 프로그램의 기본 정보와 기능을 정의하는 파일입니다.
icon 파일 : 확장 프로그램의 로고입니다.
html 파일 : 확장 프로그램의 메인 파일입니다.
js 파일 : 확장 프로그램의 동적 기능을 필요로 할 때 사용합니다.

Page script : 현재 열려있는 페이지에서 실행되고 있는 일반적인 스크립트를 의미
Background script : background에서 실행되는 스크립트
Content script : 현재 페이지의 컨텍스트에서 실행되는 스크립트
Injected script : 현재 페이지에 스크립트를 주입하여 웹페이지로부터 원하는 기능을 추가함


우리는 메모장을 웹페이지에 띄우는 것이기에, Content script를 작성했습니다.

사용한 언어는 HTML, CSS, JavaScript, JQuery로 
어떤 언어를 사용하자고 정하지는 않았는데, 만들다보니 필요했고 구글링을 하면서 사용했습니다.


HTML, CSS
전체적인 메모장의 디자인

Javascript, JQuery
크기조정, 이동, 창닫기
글자 속성, 배경 속성 변경


Git : https://github.com/J3SUNG/Notepad

728x90
댓글
댓글쓰기 폼
공지사항