[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>