이번엔 크롬 주소창 옆에서 정말 200% 활용을 하고 있는 구글 확장프로그램을 직접 만들고 싶어서 끄적인다.
잘만 만들면 업무도 연관지어서 능률이 막 솟아날 것 같았다.
막연하게 '만들고 싶다' 라는 생각이 들어서 구글 개발자사이트 들어가서 예제를 돌려보고 하니 '금방 만들 수 있겠는데?' 싶을 정도로 간결하더라 !!
구글 확장프로그램은 로컬에서 설치가 가능하며, 외부공개를 하고 싶다면 마켓에 올릴 수도 있는데
나는 회사에서 업무용으로 사용하기 위해 '로컬' 에서 사용할 예정이라, 이 방법에 대해서만 끄적일 생각이다.
로컬에서 확장프로그램을 설치하기 위해서는 3가지 파일이 필요하다.
1. 확장프로그램 아이콘으로 사용 할 .png 파일
2. 타이틀, 설명, 명령어 등 확장프로그램에서 사용할 기능을 다룰 manifest.json 파일
3. 확장프로그램을 클릭 했을 때 노출시킬 화면을 담은 .html 파일
물론, 더 자세한 내용은 구글 확장프로그램 개발자 사이트(https://developer.chrome.com/extensions) 에 들어가서 확인하면 되고
해당 페이지에 나와있는 Hello Extension 예제를 구현해보았다 😀.
먼저, 아이콘을 노출 할 예제 .png 파일을 다운로드 하고 아래와 같이 manifest.json 와 hello.html 을 작성하면 !!! 99% 끝났다 ... ㅎㅎ
* .png 파일 :
* manifest.json 파일 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | { "name": "Hello Extention", "description" : "test Extension", "version": "1.0", "manifest_version": 1, "browser_action": { "default_popup": "hello.html", "default_icon": "hello_extensions.png" }, "commands": { "_execute_browser_action": { "suggested_key": { "default": "Ctrl+Shift+F", "mac": "MacCtrl+Shift+F" }, "description": "Opens hello.html" } } } | cs |
* hello.html 파일 :
1 2 3 4 5 | <html> <body> <h1>Hello Extensions</h1> </body> </html> | cs |
위 폴더 구조처럼 3개 파일이 모두 준비가 되었다면,
구글 확장프로그램 홈(chrome://extensions/) 으로 방문하여 오른쪽 상단에 '개발자 모드' 를 ON 하고
[압축해제된 확장프로그램을 로드합니다.] 버튼을 클릭하여 3개 파일이 존재하는 폴더를 클릭하면 ! 확장프로그램이 뿅하면서 생긴다 !
끝 :)
'Self Dev.' 카테고리의 다른 글
| 청춘, 영화 꽃을 핌(film) 방문기 (0) | 2018.09.08 |
|---|---|
| 2018.02.26~2018.08.20 교육 이수 (0) | 2018.09.03 |
| 2018 BLOCKCHAIN FAIR 방문기 (0) | 2018.07.13 |
| The 4th Graph Database Meetup 방문기 (0) | 2018.05.02 |
댓글