chrome extensions 만드는 법, chrome 확장 프로그램 만드는 법, google chrome extensions 만드는 법, 간단한 크롬 확장 프로그램, 구글, 구글 크롬 확장 프로그램, 크롬, 크롬 확장 프로그램 따라하기, 크롬 확장 프로그램 만드는 법, 확장 프로그램, 확장 프로그램 만드는 법
반응형
구글 크롬 확장 프로그램 만드는 방법이 궁금해서..
인터넷을 찾아보니..
출처: http://code.google.com/chrome/extensions/getstarted.html
에서 친절하게 사용방법이 나와있네요 ㅎㅎ.. Step 들을 따라 해보니 바로 하나가 만들어지네요 :)
간단한 설명 함꼐 올려드립니다.
1. 폴더를 하나 만든 뒤 폴더 안에 manifest.json 이란 파일을 만든 뒤 아래의 코드를 넣어 줍니다.
{ "name": "My First Extension", "version": "1.0", "description": "The first extension that I made.", "browser_action": { "default_icon": "icon.png" }, "permissions": [ "http://api.flickr.com/" ] }
2. 아이콘을 다운 받아 같은 폴더 안에 넣어 줍니다.
(http://code.google.com/chrome/extensions/examples/tutorials/getstarted/icon.png)
3. 크롬의 확장프로그램 메뉴로 들어갑니다. (chrome://extensions/#)
4. 개발자 모드 옆의 아이콘이 + 로 되어 있다면 클릭하여 - 로 만든 뒤, 압축 해제된 확장 프로그램 로드 를 눌러 파일 다이얼로그를 엽니다. 다이얼로그에서 위에 만든 파일들이 들어가 있는 폴더를 클릭 후 선택을 눌러줍니다.
(정상적으로 작동한다면, 아이콘이 확장 프로그램 옆에 생성이 되고 아래와 같이 확장 프로그램이 등록됩니다.)
5. 이 시점에서는 아이콘을 눌러도 아무런 작동을 안합니다.
6. manifest.json 파일을 열어 아래 라인을 추가해 줍니다.
... "browser_action": { "default_icon": "icon.png", "popup": "popup.html" }, ...
7. 이제 자바 스크립트와 css 가 포함된 popup.html 파일을 폴더 내에 만들어줍니다.
여기에 있는 내용을 그대로 html 파일에 넣어줍니다.
8. 이제 확장 프로그램 관리 페이지에서 새로고침을 눌러준 뒤 아이콘을 눌러보세요.. :) 아래의 그림과 같이 확장 프로그램이 flickr 에서 그램들을 불러 옵니다. :)
:) 모두 성공적 완료!!!
구글에서 크롬 관련 확장 프로그램에 대한 튜토리얼이 아주 자세하게 잘 나와 있습니다.
여기 -> Overview 페이지에서 시작하여 멋진 확장 프로그램을 하나 만들어 봐야 겠네요 ㅎㅎ
반응형
'초짜 IT보이 서바이벌 스토리' 카테고리의 다른 글
MacBook Pro 에 home brew 를 사용하여 apache, php, 그리고 mysql 설치하기 (1) | 2017.04.17 |
---|---|
여러 플랫폼으로 개발된 POS system (1) | 2014.06.28 |
#ubuntu #11.10 에서 #classic #desktop 보기 (0) | 2011.10.18 |
각 SNS 공유 버튼 URL (0) | 2011.07.28 |
MS SQL - With (NOLOCK) (2) | 2008.01.24 |