이번 시간에는 지금까지 개발한 웹 페이지를 크롬 익스텐션으로 적용해서 시작화면으로 사용해보는 방법을 배워보도록 하겠습니다.
우선 웹 페이지에 배경색을 입혀주기 위해 css에서 원하는 이미지의 주소를 body에 background-image로 넣어주겠습니다.
제가 넣은 이 https://source.unsplash.com/user/hbin12212/likes 주소는 unsplash 라는 무료 이미지 사이트에서 제공하는 이미지 주소로, 사이트에 가입 후 원하는 이미지에 좋아요 표시를 누르면, 본인이 좋아요를 누른 사진을 랜덤으로 적용할 수 있습니다.
랜덤한 이미지를 원하는 분들은 해당 주소에 “user/본인아이디” 를 입력 후 사용하면 되고, 별도의 이미지 url을 넣어도 됩니다.
그 다음, background-repeat 속성을 no-repeat으로, background-attachment는 fixed로, background-position은 center로, 그리고 background-size는 cover로 설정해주겠습니다.
마지막으로 color를 white로 변경해 글자 색상을 흰색으로 바꿔주면 원하는 배경이 적용된 웸 페이지를 완성할 수 있습니다.
이제 해당 페이지를 크롬 익스텐션으로 적용해주기 위해 index.html 파일 아래에 manifest.json 이라는 파일을 생성한 다음, 다음과 같이 작성해주겠습니다.
이 설정은, 우리가 개발한 웹페이지를 크롬 익스텐션으로 사용할 수 있게 하는 설정이고, name과 description은 원하는 것으로 변경해주셔도 됩니다.
그 다음 이제 크롬에 chrome://extensions/ 을 검색해서 이동해주겠습니다.
화면에 보이는 “압축해제된 확장 프로그램을 로드합니다” 버튼을 눌러 우리가 개발한 폴더를 선택해주면,
다음과 같이 웹 페이지가 추가 되고, 크롬 탭을 새로 추가해보면 우리가 개발한 웹페이지가 나오는 것을 볼 수 있습니다.
적용된 크롬 시작 화면에서 북마크 추가 버튼을 눌러, 이름에는 인프런을, 주소에는 https://www.inflearn.com/ 를 입력해 북마크로 추가해보겠습니다.
그 다음 추가된 북마크를 눌러보면, 우리가 작성한 주소로 이동하고, 창을 종료했다가 다시 실행해도 동일하게 추가된 아이템이 그대로 저장되어 있는 것을 볼 수 있습니다.
이렇게 자바스크립트의 개념부터 시작해, 자바스크립트의 여러 문법들에 대해 배우면서, 최종 프로젝트까지 개발해보았습니다.
본 강의는 입문자용 강의로 최대한 쉽게 설명하려고 노력한 강의이지만, 많은 내용들을 다루고 있기 때문에 강의를 한 번 만 듣고 모든 내용을 완벽하게 이해하기는 조금 어려울 수도 있습니다.
그렇기 때문에 강의가 어렵게 느껴졌더라도, 어려웠던 부분들은 질문을 통해 해결하거나, 다시 여러번 반복해서 들어보시고, 최종 프로젝트였던 이 크롬 시작화면을 스스로 개발해보면서 복습까지 해보시는 것을 추천드립니다.
본 강의를 통해 자바스크립트를 잘 다룰 수 있는 개발자가 되셨다면, 이제는 자바스크립트를 더 깊게 학습하거나, 자바스크립트 기반의 라이브러리 혹은 프레임워크들을 배워보면서 실력을 쌓아 나가셨으면 좋겠습니다.
여기까지 따라 오신 분들 모두 정말 고생 많으셨습니다.
지금까지 강사 효빈이였습니다. 감사합니다.