«   2019/02   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28    
Archives
Today
192
Total
1,199,095
안정적인 DNS서비스 DNSEver
관리 메뉴

Blue Breeze

Vue.js Chrome Extension Example 본문

FrontEnd

Vue.js Chrome Extension Example

푸른바람 C/H 2019.01.15 14:51

  • 크롬 확장프로그램(chrome://extensions/) > 압축해제된 확장 프로그램을 로드합니다. 클릭
  • 아래 ./vue-csp 폴더 선택
  • 크롬 앱 목록(chrome://apps/)에서 설치한 앱 선택
  • 새창에 앱이 실행된다.
./vue-csp
	assets/
		app.js
		vue.js # https://github.com/vuejs/vue/tree/csp/dist
	icon_16.png
	icon_128.png
	index.html
	main.js
	manifest.json

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue-CSP compliant</title>
</head>
<body>
<div id="app">
	<h1>{{ message}} </h1>
</div>
<script src="assets/vue.js"></script>
<script src="assets/app.js"></script>
</body>
</html>

main.js

chrome.app.runtime.onLaunched.addListener(function() {
	// 화면중심에 윈도우를 위치시킨다.
	var screenWidth = screen.availWidth;
	var screenHeight = screen.availHeight;
	var width = 500;
	var height = 300;

	chrome.app.window.create("index.html", {
		id: "learningVueID",
		outerBounds: {
			width: width,
			height: height,
			left: Math.round((screenWidth-width)/2),
			top: Math.round((screenHeight-height)/2)
		}
	});
});

manifest.json

{
	"manifest_version" : 2,
	"name" : "Learning Vue.js",
	"version" : "1.0",
	"minimum_chrome_version": "23",
	"icons": {
		"16": "icon_16.png",
		"128" : "icon_128.png"
	},
	"app" : {
		"background": {
		"scripts": ["main.js"]
		}
	}
}

assets/app.js

var data = {
	message: "Learning Vue.js"
};

new Vue({
	el: "#app",
	data: data
})


'FrontEnd' 카테고리의 다른 글

Vue.js Chrome Extension Example  (0) 2019.01.15
이미지 최적화.... 뭐가 이래 복잡해..  (0) 2018.08.16
Summernote WISWIG Editor  (0) 2018.07.12
Web application TEST  (0) 2012.01.17
IE7 파비콘 설정후 적용되지 않을 경우는?  (0) 2009.01.07
css, javascript 최적화 Tool  (0) 2008.09.11
0 Comments
댓글쓰기 폼