크롬익스텐션 맛보기
-
Upload
ohgyun-ahn -
Category
Documents
-
view
1.968 -
download
1
description
Transcript of 크롬익스텐션 맛보기
![Page 1: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/1.jpg)
크롬����������� ������������������ 익스텐션����������� ������������������ 맛보기����������� ������������������
안오균����������� ������������������
![Page 2: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/2.jpg)
오늘은?����������� ������������������
익스텐션����������� ������������������ 간단����������� ������������������ 소개����������� ������������������
가볍게����������� ������������������ 콘솔����������� ������������������ 찍어����������� ������������������ 보기����������� ������������������
디버깅하려면?����������� ������������������
어떤����������� ������������������ 게����������� ������������������ 되고����������� ������������������ 어떤����������� ������������������ 게����������� ������������������ 안����������� ������������������ 되나?����������� ������������������
웹스토어에����������� ������������������ 등록하기����������� ������������������
![Page 3: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/3.jpg)
익스텐션에는-����������� ������������������
패키지앱����������� ������������������ UI가����������� ������������������ 있어요.����������� ������������������
익스텐션����������� ������������������ UI와,����������� ������������������
![Page 4: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/4.jpg)
익스텐션����������� ������������������ UI에는-����������� ������������������
브라우저����������� ������������������ 액션,����������� ������������������
페이지����������� ������������������ 액션,����������� ������������������
팝업이����������� ������������������ 있는데,����������� ������������������
![Page 5: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/5.jpg)
HTML,����������� ������������������ CSS,����������� ������������������ JavaScript����������� ������������������ 라는����������� ������������������ 거-����������� ������������������
여튼,����������� ������������������ 모든����������� ������������������ 것은-����������� ������������������
![Page 6: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/6.jpg)
익스텐션����������� ������������������ 만들기����������� ������������������
1. manifest.json����������� ������������������ 파일과,����������� ������������������ 2. HTML����������� ������������������ 파일을����������� ������������������ 만들고,����������� ������������������ 3. 익스텐션으로����������� ������������������ 로드.����������� ������������������ 끝.����������� ������������������
![Page 7: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/7.jpg)
manifest.json����������� ������������������
![Page 8: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/8.jpg)
백그라운드����������� ������������������ 페이지����������� ������������������
팝업����������� ������������������ 페이지����������� ������������������
컨텐츠����������� ������������������ 스크립트����������� ������������������
익스텐션의����������� ������������������ 대표적인����������� ������������������ 구성����������� ������������������ 요소로는,����������� ������������������
![Page 9: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/9.jpg)
백그라운드����������� ������������������ 페이지는-����������� ������������������
HTML����������� ������������������ 또는����������� ������������������ JavaScript����������� ������������������ 파일로����������� ������������������ 되어����������� ������������������ 있고,����������� ������������������ 주로����������� ������������������ 익스텐션의����������� ������������������ 로직을����������� ������������������ 담당합니다.����������� ������������������ 이름처럼����������� ������������������ 브라우저����������� ������������������ ‘뒷단’에서����������� ������������������ 돌아요.����������� ������������������
![Page 10: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/10.jpg)
익스텐션은����������� ������������������ 브라우저와����������� ������������������ 별도의����������� ������������������ 프로세스로����������� ������������������ 동작하고����������� ������������������
![Page 11: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/11.jpg)
프로세스를����������� ������������������ 죽일����������� ������������������ 경우,����������� ������������������ 익스텐션이����������� ������������������ 깨졌다는����������� ������������������ 얼럿이����������� ������������������ 뜹니다.����������� ������������������
![Page 12: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/12.jpg)
팝업����������� ������������������ 페이지는-����������� ������������������ 익스텐션����������� ������������������ 아이콘을����������� ������������������ 클릭했을����������� ������������������ 때����������� ������������������ 나타나는����������� ������������������ 페이지를����������� ������������������ 가리키고요.����������� ������������������
![Page 13: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/13.jpg)
백그라운드����������� ������������������ 페이지와����������� ������������������ 팝업����������� ������������������ 페이지는����������� ������������������ 서로����������� ������������������ 커뮤니케이션����������� ������������������ 할����������� ������������������ 수����������� ������������������ 있습니다.����������� ������������������
![Page 14: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/14.jpg)
컨텐츠����������� ������������������ 스크립트는-����������� ������������������
페이지에����������� ������������������ 삽입하는����������� ������������������ 스크립트이고,����������� ������������������ 마찬가지로����������� ������������������ 백그라운드����������� ������������������ 페이지와����������� ������������������ 통신할����������� ������������������ 수����������� ������������������ 있습니다.����������� ������������������
![Page 15: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/15.jpg)
백그라운드����������� ������������������ 페이지����������� ������������������
팝업����������� ������������������ 페이지����������� ������������������
컨텐츠����������� ������������������ 스크립트����������� ������������������
익스텐션의����������� ������������������ 대표적인����������� ������������������ 구성����������� ������������������ 요소!����������� ������������������
![Page 16: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/16.jpg)
실습…⋯����������� ������������������
콘솔����������� ������������������ 찍기와����������� ������������������ 디버깅.����������� ������������������
![Page 17: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/17.jpg)
어떤����������� ������������������ 걸����������� ������������������ 할����������� ������������������ 수����������� ������������������ 있나?����������� ������������������
• 원하는����������� ������������������ 페이지에����������� ������������������ 스크립트����������� ������������������ 삽입����������� ������������������ • 컨텍스트����������� ������������������ 메뉴����������� ������������������ 컨트롤����������� ������������������ • 크로스����������� ������������������ 도메인����������� ������������������ 비동기����������� ������������������ 요청����������� ������������������ • 윈도우,����������� ������������������ 탭,����������� ������������������ 북마크����������� ������������������ 컨트롤����������� ������������������ • 옴니����������� ������������������ 박스����������� ������������������ 컨트롤����������� ������������������ ����������� ������������������
![Page 18: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/18.jpg)
조금����������� ������������������ 더����������� ������������������ 나아가서.����������� ������������������
• 개발자����������� ������������������ 도구����������� ������������������ 컨트롤����������� ������������������ • 페이지����������� ������������������ 캡처(mhtml����������� ������������������ 형식)����������� ������������������ • 프록시,����������� ������������������ 웹리퀘스트����������� ������������������ 조작����������� ������������������ • Text-To-Speech����������� ������������������ 기능����������� ������������������ • 네이티브����������� ������������������ 연동(NaCl,����������� ������������������ NPAPI)����������� ������������������
![Page 19: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/19.jpg)
할����������� ������������������ 수����������� ������������������ 없는����������� ������������������ 것.����������� ������������������
• 스크립트로����������� ������������������ 로컬����������� ������������������ 파일����������� ������������������ 시스템����������� ������������������ 조작.����������� ������������������ • 페이지����������� ������������������ 내����������� ������������������ 자바스크립트����������� ������������������ 객체����������� ������������������ 접근.����������� ������������������ • 단축키로����������� ������������������ 익스텐션����������� ������������������ 팝업����������� ������������������ 열기.����������� ������������������
![Page 20: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/20.jpg)
웹스토어����������� ������������������ 등록����������� ������������������ 준비물����������� ������������������
zip으로����������� ������������������ 압축한����������� ������������������ 익스텐션.����������� ������������������
아이콘����������� ������������������ 준비(48px,����������� ������������������ 128px)����������� ������������������
스크린샷����������� ������������������ 준비(1280x800)����������� ������������������
홍보����������� ������������������ 이미지(440x280)����������� ������������������
5달러…⋯����������� ������������������
![Page 21: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/21.jpg)
7,000����������� ������������������ 다운로드!����������� ������������������
![Page 22: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/22.jpg)
나머지����������� ������������������ 자세한����������� ������������������ 사항은,����������� ������������������
http://code.google.com/chrome/extensions/����������� ������������������
![Page 23: 크롬익스텐션 맛보기](https://reader034.fdocument.pub/reader034/viewer/2022042606/54878aa8b4af9f5f388b5956/html5/thumbnails/23.jpg)
끝!����������� ������������������