Chrome extension 개발
공식 문서를 참고했다.
크롬 익스텐션을 개발하는 방법을 간단하게 정리한다.
Chrome Extension 요소
- manifest.json 개발할 익스텐션의 [소개, 권한, 자원]을 명세하는 파일
- background 크롬이 실행되어 익스텐션이 불려질 때 실행될 스크립트. 크롬 브라우저가 완전히 꺼질 때까지 유지된다
- browser action 주소창 오른쪽에 있는 익스텐션 아이템을 클릭했을 때 보여지는 팝업 윈도우
- content 웹 페이지가 열릴 때마다 실행될 스크립트로, 마치 해당 스크립트가 해당 페이지에 원래 포함되어 있었던 듯이 행동한다. 이 특징에 의해 해당 페이지의 모든 자원에 아무 문제 없이 접근할 수 있다는 장점이 있으나, 보안 정책1에 휘둘린다.
한 줄 요약 background==backend, browser action==control panel, content==frontend
따라서 정리하자면,
- manifest를 작성하고,
- browser action의 html, css, javascript를 작성하고,
- background를 작성해 backend를 만들고,
- content를 작성해 background의 클라이언트가 되게 만든다
는 것이다.
Chrome Extension Cheat Sheet
디렉토리 하나 만들고, 모든 파일을 집어넣고 개발하면 된다.
manifest.json
{
"manifest_version": 2,
"name": "recipes",
"description": "The programmable DOM manipulator",
"version": "1.0",
"author": "makerj (ohenwkgdj@gmail.com)",
"permissions": ["<all_urls>"],
"background": {
"scripts": ["jquery-1.12.0.min.js", "jquery-ui.min.js", "background.js"]
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png",
"256": "icon256.png"
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-1.12.0.min.js", "jquery-ui.min.js", "content.js"],
"css": ["content.css"],
"run_at": "document_end"
}
]
}
html, css, js의 이름은 자유다. 다만 보안 정책상 외부 라이브러리를 cdn에서 가져올 수 없다.
따라서 위의 예처럼 jquery와 같은 외부 라이브러리는 다운로드 받아 직접 사용해야 한다.
permissions는 공식 문서를 참조하자. 설명하기엔 너무 많다.
content_scripts
에서 "matches": ["<all_urls>"]
부분을 볼 수 있는데, 이 부분은 꼭 필요한 url서에만 작동하도록 지정할 수도 있다. 예를 들어 "matches": ["http://daum.net/*"]
- 예를 들어 frame간 origin이 다른 경우 Security Limitation에서 벗어날 수 없다. 프레임을 도배한 네이버 블로그 페이지를 가지고 놀다보면 이 경우를 체험할 수 있을 것이다. ↩
'WebDev' 카테고리의 다른 글
Require.js (0) | 2016.02.20 |
---|---|
tosync.js (0) | 2016.02.20 |
Web SQL (0) | 2016.02.15 |
django custom user (0) | 2016.02.07 |
django facebook login (0) | 2016.02.06 |