반응형
크롬 확장 플러그인을 만들기 위해서는 한 디렉토리에 관련된 모든파일들을 넣고
개발자 모드에서 "압축해제된 확장 프로그램 로드..." 버튼을 통해 등록 해주면 사용이 가능 하다.
Step 1. 우선 popup page를 사용하기 위해 manifest에 등록 해준다.
file : manifest.json
{
"name": "앱 이름",
"version": "앱 버전",
"manifest_version": 2,
"minimum_chrome_version": "23",
"description": "앱에 대한 설명",
"browser_action": {
"default_icon": "앱 아이콘",
"default_popup": "test.html(팝업 페이지 내용)"
},
"content_security_policy": "script-src 'self' https:⁄⁄; object-src 'self'",
"permissions": [ //사용할 권한만 기입하면 된다.
"tabs",
"activeTab",
"alarms",
"background",
"browsingData",
"fileBrowserHandler",
"storage",
"unlimitedStorage"
]
}
Step2. popup page 내용의 html을 작성 한다. (간단하게 버튼 하나만 만들도록 하겠다.)
버튼 이벤트로 발생할 내용이 작성된 test.js 도 기입 해 두도록 하겠다.
file : test.html
<!DOCTYPE html> <html> <head> <META http-equiv="Content-Type" content="text⁄html; charset=UTF-8"> <script src="⁄test.js"><⁄script> <⁄head> <body> <div width="500px" height="500px"> <input type="button" id="button1" value="click"> <⁄div> <⁄body> <⁄html>
Step3. 버튼 클릭시 발생할 이벤트 내용이 담긴 스크립트 파일을 작성하자.
file : test.js
document.addEventListener('DOMContentLoaded', function(){
var button1 = document.getElementById("button1");
button1.addEventListener("click", function(){
//버튼을 눌렀을때 발생할 이벤트 내용을 여기에 작성하면 된다.
}
);
});
반응형
'Chrome' 카테고리의 다른 글
| 크롬 확장프로그램 설치파일인 *.crx 파일로 바로 다운받는법 (0) | 2013.09.25 |
|---|---|
| chrome의 url 기능 (0) | 2013.09.25 |
| Chrome 버전별 다운 (0) | 2013.08.07 |
| chrome NACL 개발 하기! (0) | 2013.07.15 |
| [Manifest.json File Structure] Manifest 포맷 구조. (0) | 2013.07.09 |