lang/vue

Vue.js Chrome Extension Example

C/H 2019. 1. 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
})


반응형

'lang > vue' 카테고리의 다른 글

Vue.js Tutorials Todos  (0) 2019.04.10
sdras(Sarah Drasner) Introduction Vue.js  (0) 2019.04.05
Vue Mastery Free Lecture  (0) 2019.02.15