2012. 9. 5. 17:41 PROGRAMMING
[CHROME/JS] 크롬 익스텐션 사용자 변수 저장/로드 샘플 예제

크롬 익스텐션 개발시 사용자 변수를 저장하거나 로드하는 예제 입니다.

 

익스텐션 특성상 사용자가 입력한값을 저장해놨다가

다시 꺼내서 불러내어놔야 할 경우가 많이 있습니다.

 

나름 쿠키를 사용해도 별 문제는 없지만,

크롬에서는 localStorage라는 저장소가 있습니다.

 

 

저장하기 [SAVE]

localStorage["변수명"]=값; (popup.html 8줄)

 

불러오기 [LOAD]

var 변수=localStorage["변수명"]; (popup.html 15줄)

 

 

샘플 프로젝트(?)

 

1. 익스텐션에서 사용할 디렉토리를 만듭니다.

 

2. manifest.json 작성

{
	"name": "kaudo chrome extension sample",
	"version": "1.0",
	"description": "blog.nachal.com",
	"browser_action": {
		"popup": "popup.html"
	},
	"permissions": [
	],
	"background": {
	}
}

 

3. popup.html 작성

<html>
<style>
textarea{width:300px;height:50px}
input{width:300px}
</style>
<script type="text/javascript">
var update=function(str){
	localStorage["source"]=str;
	result.value=str.toLowerCase().replace(/(\_[a-z])/g, function($1){
		return $1.toUpperCase().replace('_','');
	});
}

var load=function(){
	if(localStorage['source']) source.value=localStorage['source'];
	update(source.value);
}
</script>
<body onload="load()">
<textarea id="source" onkeyup="update(this.value)" onfocus="update(this.value)" onblur="update(this.value)">
AHNDOORI DOORI AHN
</textarea><br/>
<textarea id="result"></textarea>
</body>
</html>

 

 

 

최근에 올라온 글

최근에 달린 댓글