HowTo/MakeChromeApp - Revision history

Maintenance script: Repair batch-0002 pages from live compare

2026-03-27T00:16:05Z

Repair batch-0002 pages from live compare

← Older revision		Revision as of 00:16, 27 March 2026
Line 2:		Line 2:

	= ChromeApp 이란? =		= ChromeApp 이란? =
	구글의 [[Web ~~Browser]]인 [[Chrome]]에서~~ 동작하는 Web App을 말한다.		구글의 Web Browser인 Chrome에서 동작하는 Web App을 말한다.
	= 사전 지식 =		= 사전 지식 =
	* [[HTML]], [[:html5 HTML5]]		* HTML, :html5 HTML5
	* [[JavaScript]]		* [[JavaScript]]
	* 웹페이지에 대한 전반적인 이해		* 웹페이지에 대한 전반적인 이해
Line 10:		Line 10:
	== 준비물 ==		== 준비물 ==
	google chrome하나면 끝! 구글 크롬의 Development Tool이 왠만한 [[IDE]]를 빰친다.		google chrome하나면 끝! 구글 크롬의 Development Tool이 왠만한 [[IDE]]를 빰친다.
	== Chrome App의 종류[[* https://developers.google.com/chrome/web-store/articles/apps_vs_extensions?hl=ko]] ==		== Chrome App의 종류* https://developers.google.com/chrome/web-store/articles/apps_vs_extensions?hl=ko ==
	=== Packaged App ===		=== Packaged App ===
	사용자의 Local에 모든 데이터를 저장하는 앱. 무조건 별도의 창으로 뜨기 때문에 마치 native app을 사용하는 듯한 느낌을 받을수 있다. 또한 모든 코드가 사용자의 컴퓨터에 저장되기 때문에 오프라인 상태에서도 사용할수 있다는 장점이 있으나 native앱처럼 느껴지면서 native앱처럼 동작할수 없다는 점이 가장 큰 문제가 된다.		사용자의 Local에 모든 데이터를 저장하는 앱. 무조건 별도의 창으로 뜨기 때문에 마치 native app을 사용하는 듯한 느낌을 받을수 있다. 또한 모든 코드가 사용자의 컴퓨터에 저장되기 때문에 오프라인 상태에서도 사용할수 있다는 장점이 있으나 native앱처럼 느껴지면서 native앱처럼 동작할수 없다는 점이 가장 큰 문제가 된다.
	=== Hosted App ===		=== Hosted App ===
	일반 ~~[[WebApp]]과~~ 다를 것이 없으며 조금 다른점은 크롬에게 필요한 권한을 요청한뒤 [sandbox]를 약간 깨는 앱을 만들수 있다는 것이다. 이 때 Host App을 만든다는 것은 그냥 일반 웹페이지를 만드는 것과 다를게 없으며 Hosted App자체는 링크만 가지게 된다. 즉, 반드시 서버가 필요하다. 자세한 내용은 [https://developers.google.com/chrome/apps/docs/developers_guide?hl=ko#live 링크]참조		일반 WebApp과 다를 것이 없으며 조금 다른점은 크롬에게 필요한 권한을 요청한뒤 [sandbox]를 약간 깨는 앱을 만들수 있다는 것이다. 이 때 Host App을 만든다는 것은 그냥 일반 웹페이지를 만드는 것과 다를게 없으며 Hosted App자체는 링크만 가지게 된다. 즉, 반드시 서버가 필요하다. 자세한 내용은 [https://developers.google.com/chrome/apps/docs/developers_guide?hl=ko#live 링크]참조
	=== Extensions ===		=== Extensions ===
	앱과는 조금 차이가 있지만 비슷한 부류기에 여기에 적는다. Extension은 브라우져의 기능을 확장 하는 것이며 브라우져의 background에서 동작하게 된다. window로 치자면 일종의 [service]이며 리눅스로 치자면 [demon]이라 할수 있다. 별도의 창을 갖는 것도 가능하며 모든 페이지에 변화를 주는 것도 가능하다. 주로 캡쳐 프로그램이나 채팅 프로그램을 extension으로 제작하게 된다.		앱과는 조금 차이가 있지만 비슷한 부류기에 여기에 적는다. Extension은 브라우져의 기능을 확장 하는 것이며 브라우져의 background에서 동작하게 된다. window로 치자면 일종의 [service]이며 리눅스로 치자면 [demon]이라 할수 있다. 별도의 창을 갖는 것도 가능하며 모든 페이지에 변화를 주는 것도 가능하다. 주로 캡쳐 프로그램이나 채팅 프로그램을 extension으로 제작하게 된다.
Line 22:		Line 22:
	# 그 폴더안에 아래를 참고하여 manifest.json파일을 만든다.		# 그 폴더안에 아래를 참고하여 manifest.json파일을 만든다.
	# 크롬을 켠다.		# 크롬을 켠다.
	# 크롬메뉴의 도구의 확장 프로그램[[* chrome://extensions/]]을 켠다.		# 크롬메뉴의 도구의 확장 프로그램* chrome://extensions/을 켠다.
	## 개발자 모드를 체크하여 활성화 시킨다.		## 개발자 모드를 체크하여 활성화 시킨다.
	## 압축해제된 확장 프로그램 로드를 눌러 아까 폴더를 선택하여 확장 프로그램을 로드한다.		## 압축해제된 확장 프로그램 로드를 눌러 아까 폴더를 선택하여 확장 프로그램을 로드한다.
Line 42:		Line 42:
	"app": {		"app": {
	"background": {		"background": {
	"scripts": ["main.js"] //시작 스크립트		"scripts": ["main.js"] //시작 스크립트
	}		}
	}		}
Line 52:		Line 52:
	"version": "1", //버전		"version": "1", //버전
	"app": {		"app": {
	"urls": [ //해당하는 앱이 동작하는 url		"urls": [ //해당하는 앱이 동작하는 url
	"*://mail.google.com/mail/",		"*://mail.google.com/mail/",
	"*://www.google.com/mail/"		"*://www.google.com/mail/"
	],		],
	"launch": { //App의 Main Page		"launch": { //App의 Main Page
	"web_url": "http://mail.google.com/mail/"		"web_url": "http://mail.google.com/mail/"
Line 63:		Line 63:
	"128": "icon_128.png" //App이 표시되는 Icon		"128": "icon_128.png" //App이 표시되는 Icon
	},		},
	"permissions": [ //App에 요구되는 permission		"permissions": [ //App에 요구되는 permission
	"unlimitedStorage",		"unlimitedStorage",
	"notifications"		"notifications"
	]		]
	}		}
	일반적으로 Hosted App은 Chrome App전용으로 만들기 보다는 WebApp으로 만들어 여러 브라우져에서 모두 작동가능하도록 만든다. 따라서 Hosted App은 일반적으로 링크에 해당하는 기능 외에는 제공하지 않는 것이 보통이다. Chrome에서 Hosted App을 캐싱하여서 로컬에서도 동작할수 있게끔 하는 방법을 알고싶다면 [https://developers.google.com/chrome/apps/docs/background?hl=ko 링크]를 참조하자.		일반적으로 Hosted App은 Chrome App전용으로 만들기 보다는 WebApp으로 만들어 여러 브라우져에서 모두 작동가능하도록 만든다. 따라서 Hosted App은 일반적으로 링크에 해당하는 기능 외에는 제공하지 않는 것이 보통이다. Chrome에서 Hosted App을 캐싱하여서 로컬에서도 동작할수 있게끔 하는 방법을 알고싶다면 [https://developers.google.com/chrome/apps/docs/background?hl=ko 링크]를 참조하자.
Line 86:		Line 86:
	* [[Plugin/Chrome/네이버사전]]		* [[Plugin/Chrome/네이버사전]]
	----		----
	~~[[~~Navigation(HowTo)~~]]~~		<!-- MONIWIKI Navigation(HowTo) -->
			* [[C++HowToProgram]]
			* [[HowTo]]
			* [[HowTo/MakeChromeApp]]
			* [[HowTo/StartProject]]
			* [[HowTo/StudyProgrammingLanguage]]
			* [[HowTo/UseLinux]]
			* [[HowToBlockEmpas]]
			* [[HowToBuildConceptMap]]
			* [[HowToCodingWell]]
			* [[HowToCordingWell]]
			* [[HowToDiscussIt]]
			* [[HowToEscapeFromMoniWiki]]
			* [[HowToReadIt]]
			* [[HowToStudyDataStructureAndAlgorithms]]
			* [[HowToStudyDesignPatterns]]
			* [[HowToStudyInGroups]]
			* [[HowToStudyRefactoring]]
			* [[HowToStudyXp]]
			* [[PragmaticVersionControlWithCVS/HowTo]]
			* [[SeminarHowToProgramIt]]
			* [[SeminarHowToProgramIt/Pipe/VendingMachineParser.py]]
			* [[SeminarHowToProgramIt/Pipe/vendingmachine.py]]
			* [[SeminarHowToProgramItAfterwords]]
			* [[데블스캠프2011/다섯째날/HowToWriteCodeWell]]
			* [[데블스캠프2011/다섯째날/HowToWriteCodeWell/강소현,구자경]]
			* [[데블스캠프2011/다섯째날/HowToWriteCodeWell/권순의,김호동]]
			* [[데블스캠프2011/다섯째날/HowToWriteCodeWell/김준석,서영주]]
			* [[데블스캠프2011/다섯째날/HowToWriteCodeWell/박정근,김수경]]
			* [[데블스캠프2011/다섯째날/HowToWriteCodeWell/송지원,성화수]]
			* [[데블스캠프2011/다섯째날/HowToWriteCodeWell/임상현,서민관]]
			* [[데블스캠프2011/다섯째날/HowToWriteCodeWell/정의정,김태진]]

	'''contribute by : '''[[안혁준]]		'''contribute by : '''[[안혁준]]

Maintenance script: Repair MoniWiki formatting after migration

2026-03-26T14:01:38Z

Repair MoniWiki formatting after migration

← Older revision		Revision as of 14:01, 26 March 2026
Line 89:		Line 89:

	'''contribute by : '''[[안혁준]]		'''contribute by : '''[[안혁준]]

imported>qa22ahj at 01:11, 16 November 2013

2013-11-16T01:11:59Z

← Older revision		Revision as of 01:11, 16 November 2013
Line 69:		Line 69:
	}		}
	일반적으로 Hosted App은 Chrome App전용으로 만들기 보다는 WebApp으로 만들어 여러 브라우져에서 모두 작동가능하도록 만든다. 따라서 Hosted App은 일반적으로 링크에 해당하는 기능 외에는 제공하지 않는 것이 보통이다. Chrome에서 Hosted App을 캐싱하여서 로컬에서도 동작할수 있게끔 하는 방법을 알고싶다면 [https://developers.google.com/chrome/apps/docs/background?hl=ko 링크]를 참조하자.		일반적으로 Hosted App은 Chrome App전용으로 만들기 보다는 WebApp으로 만들어 여러 브라우져에서 모두 작동가능하도록 만든다. 따라서 Hosted App은 일반적으로 링크에 해당하는 기능 외에는 제공하지 않는 것이 보통이다. Chrome에서 Hosted App을 캐싱하여서 로컬에서도 동작할수 있게끔 하는 방법을 알고싶다면 [https://developers.google.com/chrome/apps/docs/background?hl=ko 링크]를 참조하자.
	=== ~~Pakaged~~ App : main.js ===		=== Packaged App : main.js ===
			Packaged App은 모든 동작이 js파일을 실행함으로써 일어난다. 즉 main.js를 Chrome에서 불러들여서 실행을 하면 그 코드대로 실행된다. 즉 크롬앱의 진입점이라 할수 있으며 파일 이름 자체는 manifest.json에서 수정이 가능하다. 아래 코드는 시작되었을때 새 창을 띄워주는 코드이다.
			chrome.app.runtime.onLaunched.addListener(function() {
			chrome.app.window.create('index.html', {
			bounds: {
			width: 500,
			height: 309
			}
			});
			});
			당연한 이야기이지만 여러개의 창을 띄우는 것도 가능하다. window.create를 여러번 해주면 여러창이 뜬다. 일단 창을 띄우고 나면 [html]과 JavaScript를 이용해서 index.html을 작성하면 된다.
	== 참고할만한 페이지 ==		== 참고할만한 페이지 ==
	* [http://developer.chrome.com/extensions/getstarted.html]		* [http://developer.chrome.com/extensions/getstarted.html]

imported>qa22ahj at 01:00, 16 November 2013

2013-11-16T01:00:37Z

← Older revision		Revision as of 01:00, 16 November 2013
Line 14:		Line 14:
	사용자의 Local에 모든 데이터를 저장하는 앱. 무조건 별도의 창으로 뜨기 때문에 마치 native app을 사용하는 듯한 느낌을 받을수 있다. 또한 모든 코드가 사용자의 컴퓨터에 저장되기 때문에 오프라인 상태에서도 사용할수 있다는 장점이 있으나 native앱처럼 느껴지면서 native앱처럼 동작할수 없다는 점이 가장 큰 문제가 된다.		사용자의 Local에 모든 데이터를 저장하는 앱. 무조건 별도의 창으로 뜨기 때문에 마치 native app을 사용하는 듯한 느낌을 받을수 있다. 또한 모든 코드가 사용자의 컴퓨터에 저장되기 때문에 오프라인 상태에서도 사용할수 있다는 장점이 있으나 native앱처럼 느껴지면서 native앱처럼 동작할수 없다는 점이 가장 큰 문제가 된다.
	=== Hosted App ===		=== Hosted App ===
	일반 [[WebApp]]과 다를 것이 없으며 조금 다른점은 크롬에게 필요한 권한을 요청한뒤 [sandbox]를 약간 깨는 앱을 만들수 있다는 것이다. 이 때 Host App을 만든다는 것은 그냥 일반 웹페이지를 만드는 것과 다를게 없으며 Hosted App자체는 링크만 가지게 된다. 즉, 반드시 서버가 필요하다.		일반 [[WebApp]]과 다를 것이 없으며 조금 다른점은 크롬에게 필요한 권한을 요청한뒤 [sandbox]를 약간 깨는 앱을 만들수 있다는 것이다. 이 때 Host App을 만든다는 것은 그냥 일반 웹페이지를 만드는 것과 다를게 없으며 Hosted App자체는 링크만 가지게 된다. 즉, 반드시 서버가 필요하다. 자세한 내용은 [https://developers.google.com/chrome/apps/docs/developers_guide?hl=ko#live 링크]참조
	=== Extensions ===		=== Extensions ===
	앱과는 조금 차이가 있지만 비슷한 부류기에 여기에 적는다. Extension은 브라우져의 기능을 확장 하는 것이며 브라우져의 background에서 동작하게 된다. window로 치자면 일종의 [service]이며 리눅스로 치자면 [demon]이라 할수 있다. 별도의 창을 갖는 것도 가능하며 모든 페이지에 변화를 주는 것도 가능하다. 주로 캡쳐 프로그램이나 채팅 프로그램을 extension으로 제작하게 된다.		앱과는 조금 차이가 있지만 비슷한 부류기에 여기에 적는다. Extension은 브라우져의 기능을 확장 하는 것이며 브라우져의 background에서 동작하게 된다. window로 치자면 일종의 [service]이며 리눅스로 치자면 [demon]이라 할수 있다. 별도의 창을 갖는 것도 가능하며 모든 페이지에 변화를 주는 것도 가능하다. 주로 캡쳐 프로그램이나 채팅 프로그램을 extension으로 제작하게 된다.
Line 68:		Line 68:
	]		]
	}		}
			일반적으로 Hosted App은 Chrome App전용으로 만들기 보다는 WebApp으로 만들어 여러 브라우져에서 모두 작동가능하도록 만든다. 따라서 Hosted App은 일반적으로 링크에 해당하는 기능 외에는 제공하지 않는 것이 보통이다. Chrome에서 Hosted App을 캐싱하여서 로컬에서도 동작할수 있게끔 하는 방법을 알고싶다면 [https://developers.google.com/chrome/apps/docs/background?hl=ko 링크]를 참조하자.
			=== Pakaged App : main.js ===
	== 참고할만한 페이지 ==		== 참고할만한 페이지 ==
	* [http://developer.chrome.com/extensions/getstarted.html]		* [http://developer.chrome.com/extensions/getstarted.html]
	* [http://developer.chrome.com/apps/about_apps.html]		* [http://developer.chrome.com/apps/about_apps.html]
			* [https://developers.google.com/chrome/apps/docs/?hl=ko]
	* [[Plugin/Chrome/네이버사전]]		* [[Plugin/Chrome/네이버사전]]
	----		----

imported>qa22ahj at 00:04, 16 November 2013

2013-11-16T00:04:35Z

← Older revision		Revision as of 00:04, 16 November 2013
Line 73:		Line 73:
	* [[Plugin/Chrome/네이버사전]]		* [[Plugin/Chrome/네이버사전]]
	----		----
			[[Navigation(HowTo)]]

	'''contribute by : '''[[안혁준]]		'''contribute by : '''[[안혁준]]

imported>qa22ahj at 08:17, 15 November 2013

2013-11-15T08:17:29Z

← Older revision		Revision as of 08:17, 15 November 2013
Line 33:		Line 33:
	== 만들기 ==		== 만들기 ==
	=== manifest.json ===		=== manifest.json ===
	Chorme App에는 반드시 manifest.json이 존재해야만 하며 이 파일을 기준으로 어떤 종류의 App인지 판단한다. manifest.json은 당연히 ~~json파일이므로~~ json형식을 따라야한다.		Chorme App에는 반드시 manifest.json이 존재해야만 하며 이 파일을 기준으로 어떤 종류의 App인지 판단한다. manifest.json은 당연히 [json]파일이므로 json형식을 따라야한다.

	==== Packaged App ====		==== Packaged App ====

imported>qa22ahj at 08:15, 15 November 2013

2013-11-15T08:15:48Z

@@ Line 34: / Line 34: @@
 === manifest.json ===
 Chorme App에는 반드시 manifest.json이 존재해야만 하며 이 파일을 기준으로 어떤 종류의 App인지 판단한다. manifest.json은 당연히 json파일이므로 json형식을 따라야한다.
 ==== Hosted Apps ====
+  {

imported>qa22ahj at 07:41, 15 November 2013

2013-11-15T07:41:46Z

← Older revision		Revision as of 07:41, 15 November 2013
Line 56:		Line 56:
	]		]
	}		}
	== ~~Link~~ ==		== 참고할만한 페이지 ==
			* [http://developer.chrome.com/extensions/getstarted.html]
			* [http://developer.chrome.com/apps/about_apps.html]
			* [[Plugin/Chrome/네이버사전]]
	----		----
	'''contribute by : '''[[안혁준]]		'''contribute by : '''[[안혁준]]

imported>qa22ahj at 07:32, 15 November 2013

2013-11-15T07:32:41Z

← Older revision		Revision as of 07:32, 15 November 2013
Line 14:		Line 14:
	사용자의 Local에 모든 데이터를 저장하는 앱. 무조건 별도의 창으로 뜨기 때문에 마치 native app을 사용하는 듯한 느낌을 받을수 있다. 또한 모든 코드가 사용자의 컴퓨터에 저장되기 때문에 오프라인 상태에서도 사용할수 있다는 장점이 있으나 native앱처럼 느껴지면서 native앱처럼 동작할수 없다는 점이 가장 큰 문제가 된다.		사용자의 Local에 모든 데이터를 저장하는 앱. 무조건 별도의 창으로 뜨기 때문에 마치 native app을 사용하는 듯한 느낌을 받을수 있다. 또한 모든 코드가 사용자의 컴퓨터에 저장되기 때문에 오프라인 상태에서도 사용할수 있다는 장점이 있으나 native앱처럼 느껴지면서 native앱처럼 동작할수 없다는 점이 가장 큰 문제가 된다.
	=== Hosted App ===		=== Hosted App ===
	일반 [[WebApp]]과 다를 것이 없으며 조금 다른점은 크롬에게 필요한 권한을 요청한뒤 ~~sandbox를~~ 약간 깨는 앱을 만들수 있다는 것이다. 이 때 Host App을 만든다는 것은 그냥 일반 웹페이지를 만드는 것과 다를게 없으며 Hosted App자체는 링크만 가지게 된다. 즉, 반드시 서버가 필요하다.		일반 [[WebApp]]과 다를 것이 없으며 조금 다른점은 크롬에게 필요한 권한을 요청한뒤 [sandbox]를 약간 깨는 앱을 만들수 있다는 것이다. 이 때 Host App을 만든다는 것은 그냥 일반 웹페이지를 만드는 것과 다를게 없으며 Hosted App자체는 링크만 가지게 된다. 즉, 반드시 서버가 필요하다.
	=== Extensions ===		=== Extensions ===
	앱과는 조금 차이가 있지만 비슷한 부류기에 여기에 적는다. Extension은 브라우져의 기능을 확장 하는 것이며 브라우져의 background에서 동작하게 된다. window로 치자면 일종의 [service]이며 리눅스로 치자면 [demon]이라 할수 있다. 별도의 창을 갖는 것도 가능하며 모든 페이지에 변화를 주는 것도 가능하다. 주로 캡쳐 프로그램이나 채팅 프로그램을 extension으로 제작하게 된다.		앱과는 조금 차이가 있지만 비슷한 부류기에 여기에 적는다. Extension은 브라우져의 기능을 확장 하는 것이며 브라우져의 background에서 동작하게 된다. window로 치자면 일종의 [service]이며 리눅스로 치자면 [demon]이라 할수 있다. 별도의 창을 갖는 것도 가능하며 모든 페이지에 변화를 주는 것도 가능하다. 주로 캡쳐 프로그램이나 채팅 프로그램을 extension으로 제작하게 된다.

imported>qa22ahj at 07:13, 15 November 2013

2013-11-15T07:13:35Z

← Older revision		Revision as of 07:13, 15 November 2013
Line 22:		Line 22:
	# 그 폴더안에 아래를 참고하여 manifest.json파일을 만든다.		# 그 폴더안에 아래를 참고하여 manifest.json파일을 만든다.
	# 크롬을 켠다.		# 크롬을 켠다.
	# 크롬메뉴의 도구의 확장 프로그램[* [[chrome://extensions/~~\|바로가기]~~]]을 켠다.		# 크롬메뉴의 도구의 확장 프로그램[[* chrome://extensions/]]을 켠다.
	## 개발자 모드를 체크하여 활성화 시킨다.		## 개발자 모드를 체크하여 활성화 시킨다.
	## 압축해제된 확장 프로그램 로드를 눌러 아까 폴더를 선택하여 확장 프로그램을 로드한다.		## 압축해제된 확장 프로그램 로드를 눌러 아까 폴더를 선택하여 확장 프로그램을 로드한다.