▶이동
  • 상구너 닷컴 블로그를 방문하신 여러분을 환영합니다 :)
  • 스팸 정책에 의해 일부 덧글·방명록차단될 수 있습니다.

크롬 확장앱 만들어보기 (2/3)

Challenge 상구너(smokingbird) 2018.06.05 12:14

안녕하세요 상구너입니다.


이번시간에는 크롬 확장앱의 실질적인 동작부분을 작성해보려고 합니다.




이전 강좌 보기


크롬 확장앱 만들어보기 (프롤로그)

크롬 확장앱 만들어보기 (1/3)

크롬 확장앱 만들어보기 (3/3)





지난시간에 이어 크롬 확장앱의 실제 동작부를 개발해보겠습니다.





지난시간에 완성된 폴더 구조입니다.

VS Code로 여니까 알록달록 이쁘네요

(.vscode와 code-workspace 는 프로젝트 용 파일이므로 강좌와 무관합니다.)




우선 manifest.json 파일을 수정합니다.

우리의 목표는 타겟 페이지에 css를 삽입하고

js를 실행하는 매우 간단한 작업이므로 저대로 해줍니다.




우선 권한부분입니다.

기본적인 웹 리퀴스트 권한이 없을 수 있습니다. 추가해주세요.

탭은 추후 개발을 위해 넣었습니다. 필요없으신 분들은 제거하셔도 좋습니다.

바로아래는 해당 서버 url 입니다.





웹을 엑세스 할 수 있는 리소스들의 목록입니다.

위 대로 진행하시면 되고, 추가파일이 생기면 추가합니다.






컨텐츠 스크립트입니다.

matches에는 이 앱을 실행할 url을 적었습니다

* 와일드 카드 문자를 지원합니다.

이것을 지정해두면 타겟url을 벗어나면 실행되지 않습니다.




디렉토리를 펼쳐보면 위와같습니다.

png파일로 아이콘을 제작할수있지만, 아이콘을 가린 백그라운드 확장을 만드시면 필요없습니다.




CSS와 JS를 삽입하는 inject.js 입니다.

삽입이 제대로 될때까지 삽입을 시도합니다.


여기선 content.css, js 를 삽입하도록 했습니다. (18, 19 라인)




content.js 부분입니다.

저는 확장으로 버튼을 삽입할건데요, 

이 버튼을 클릭하면 실행할 함수를 구현했습니다.




버튼을 만드는 부분입니다.

삽입된 js에서 html 엘리먼트를 생성해 특정위치에 집어넣고 함수를 바인딩하는 작업을 하였습니다.




삽입하려고 하는 버튼을 꾸미는 스타일시트입니다.

다른 기본 엘리먼트들의 스타일을 꾸미는등의 응용도 가능합니다.



이로써 모든 개발이 완료되었습니다.


그런데, 이걸 어떻게 써먹냐구요?


이렇게 만들면 배포는 어떻게 하냐구요?



걱정마세요 3강에서 사용법과 배포방법을 알려드릴 예정입니다.

곧 3강을 업로드할 예정이니 기대해주세요 !






0 0
  • 공지사항
    중요한 개인정보필요한 경우가 아닌 경우 적지 마시고, 적으셨다면 비밀글 설정을 꼭 해주시기 바랍니다.
    스팸 필터 정책에 의해 영문만으로 작성된 글이나 무의미한 내용의 글은 등록이 되지 않을 수도 있습니다.