diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 24a05a8..03aa56c 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1,166 +1,174 @@
 {
-	"extName": {
-		"message": "Authenticator",
-		"description": "Extension Name."
-	},
-	"extShortName": {
-		"message": "Authenticator",
-		"description": "Extension Short Name."
-	},
-	"extDesc": {
-		"message": "For Google Authenticator and Battle.net Authenticator.",
-		"description": "Extension Description."
-	},
-	"added": {
-		"message": " has been added.",
-		"description": "Added Account."
-	},
-	"errorqr": {
-		"message": "Unrecognized QR code.",
-		"description": "QR Error."
-	},
-	"errorsecret": {
-		"message": "Secret Error. Only Base32(A-Z, 2-7 and =) and HEX(0-9 and A-F) are supported. However, your secret is: ",
-		"description": "Secret Error."
-	},
-	"info": {
-		"message": "<p><strong>Authenticator</strong> for Google&trade; Authenticator,<br/>&copy; 2014 <a target='_blank' href='http://sneezry.com'>Sneezry</a>. Released under the Apache License 2.0.</p><p>Google&trade; is Google's trademark, Google Authenticator is Google’s trade name, those rights of ownership belong with Google Inc.</p><p><a target='_blank' href='https://github.com/LazarSoft/jsqrcode'>jsqrcode</a> Copyright jsqrcode authors. Licensed under the Apache License.</p><p><a target='_blank' href='https://github.com/zxing/zxing'>ZXing</a> Copyright ZXing authors. Licensed under the Apache License.</p><p><a target='_blank' href='http://blog.tinisles.com/2011/10/google-authenticator-one-time-password-algorithm-in-javascript/'>totp.js</a> Copyright its author. Licensed under the MIT License.</p><p><a target='_blank' href='http://caligatio.github.com/jsSHA/'>jsSHA</a> Copyright jsSHA authors. Licensed under the BSD License.</p><p><a target='_blank' href='http://davidshimjs.github.io/qrcodejs/'>qrcode.js</a> Copyright qrcode.js author. Licensed under the MIT License.</p><p><a target='_blank' href='https://code.google.com/p/crypto-js/'>crypto-js</a> Copyright crypto-js author. Licensed under the BSD License.</p><p><a target='_blank' href='https://www.google.com/fonts/specimen/Droid+Sans+Mono'>Droid Sans Mono</a> Copyright Steve Matteson. Licensed under the Apache License.</p><p><a target='_blank' href='http://fontawesome.io'>Font Awesome</a> Copyright Dave Gandy. Licensed under the SIL OFL License 1.1.</p><p>Thanks to Mike Robinson &lt;3</p>",
-		"description": "Information."
-	},
-	"add_qr": {
-		"message": "Scan QR Code",
-		"description": "Scan QR Code."
-	},
-	"add_secret": {
-		"message": "Manual Entry",
-		"description": "Manual Entry."
-	},
-	"close": {
-		"message": "Close",
-		"description": "Close."
-	},
-	"ok": {
-		"message": "OK",
-		"description": "OK."
-	},
-	"err_acc_sec": {
-		"message": "Please input Account and Secret.",
-		"description": "Input Account and Secret."
-	},
-	"account": {
-		"message": "Account",
-		"description": "Account."
-	},
-	"secret": {
-		"message": "Secret",
-		"description": "Secret."
-	},
-	"updateSuccess": {
-		"message": "Success.",
-		"description": "Update Success."
-	},
-	"updateFailure": {
-		"message": "Failure.",
-		"description": "Update Failure."
-	},
-	"about": {
-		"message": "About",
-		"description": "About."
-	},
-	"export_import": {
-		"message": "Export / Import",
-		"description": "Export and Import."
-	},
-	"settings": {
-		"message": "Settings",
-		"description": "Settings."
-	},
-	"security": {
-		"message": "Security",
-		"description": "Security."
-	},
-	"current_phrase": {
-		"message": "Current Passphrase",
-		"description": "Current Passphrase."
-	},
-	"new_phrase": {
-		"message": "New Passphrase",
-		"description": "New Passphrase."
-	},
-	"phrase": {
-		"message": "Passphrase",
-		"description": "Passphrase."
-	},
-	"confirm_phrase": {
-		"message": "Confirm Passphrase",
-		"description": "Confirmm Passphrase."
-	},
-	"security_warning": {
-		"message": "This passphrase will be used to encrypt your secrets. No one can help you if you forget the passphrase.",
-		"description": "Passphrase Warning."
-	},
-	"update": {
-		"message": "Update",
-		"description": "Update."
-	},
-	"phrase_incorrect": {
-		"message": "Some accounts and passphrase do not match.",
-		"description": "Passphrase Incorrect."
-	},
-	"phrase_not_match": {
-		"message": "Two passphrases do not match.",
-		"description": "Passphrase Not Match."
-	},
-	"encrypted": {
-		"message": "Encrypted",
-		"description": "Encrypted."
-	},
-	"copied": {
-		"message": "Copied",
-		"description": "Copied."
-	},
-	"feedback": {
-		"message": "Feedback",
-		"description": "Feedback."
-	},
-	"source": {
-		"message": "Source Code",
-		"description": "Source Code."
-	},
-	"passphrase_info": {
-		"message": "Input passphrase to decrypt account data.",
-		"description": "Passphrase Info"
-	},
-	"sync_clock": {
-		"message": "Sync Clock with Google",
-		"description": "Sync Clock"
-	},
-	"remeber_phrase": {
-		"message": "Remeber Passphrase",
-		"description": "Remeber Passphrase"
-	},
-	"clock_too_far_off": {
-		"message": "Caution! Your local clock is too far off, please fix it before continuing.",
-		"description": "Local Time is Too Far Off"
-	},
-	"remind_backup": {
-		"message": "Do you have a backup for your secrets? Please note that no one can help you with getting back locked account, don't wait until it's too late. We will remind you to make a backup again after 30 days.",
-		"description": "Remind Backup"
-	},
-	"capture_failed": {
-		"message": "Capture failed, please reload the page you are veiwing and try again.",
-		"description": "Capture Failed"
-	},
-	"unencrypted_secret_warning": {
-		"message": "This secret is not encrypted! Click here to set a passphrase to fix this issue.",
-		"description": "Unencrypted Secret Warning"
-	},
-	"based_on_time": {
-		"message": "Time Based",
-		"description": "Time Based"
-	},
-	"based_on_counter": {
-		"message": "Counter Based",
-		"description": "Counter Based"
-	}
+    "extName": {
+        "message": "Authenticator",
+        "description": "Extension Name."
+    },
+    "extShortName": {
+        "message": "Authenticator",
+        "description": "Extension Short Name."
+    },
+    "extDesc": {
+        "message": "For Google Authenticator and Battle.net Authenticator.",
+        "description": "Extension Description."
+    },
+    "added": {
+        "message": " has been added.",
+        "description": "Added Account."
+    },
+    "errorqr": {
+        "message": "Unrecognized QR code.",
+        "description": "QR Error."
+    },
+    "errorsecret": {
+        "message": "Secret Error. Only Base32(A-Z, 2-7 and =) and HEX(0-9 and A-F) are supported. However, your secret is: ",
+        "description": "Secret Error."
+    },
+    "info": {
+        "message": "<p><strong>Authenticator</strong> for Google&trade; Authenticator,<br/>&copy; 2014 <a target='_blank' href='http://sneezry.com'>Sneezry</a>. Released under the Apache License 2.0.</p><p>Google&trade; is Google's trademark, Google Authenticator is Google’s trade name, those rights of ownership belong with Google Inc.</p><p><a target='_blank' href='https://github.com/LazarSoft/jsqrcode'>jsqrcode</a> Copyright jsqrcode authors. Licensed under the Apache License.</p><p><a target='_blank' href='https://github.com/zxing/zxing'>ZXing</a> Copyright ZXing authors. Licensed under the Apache License.</p><p><a target='_blank' href='http://blog.tinisles.com/2011/10/google-authenticator-one-time-password-algorithm-in-javascript/'>totp.js</a> Copyright its author. Licensed under the MIT License.</p><p><a target='_blank' href='http://caligatio.github.com/jsSHA/'>jsSHA</a> Copyright jsSHA authors. Licensed under the BSD License.</p><p><a target='_blank' href='http://davidshimjs.github.io/qrcodejs/'>qrcode.js</a> Copyright qrcode.js author. Licensed under the MIT License.</p><p><a target='_blank' href='https://code.google.com/p/crypto-js/'>crypto-js</a> Copyright crypto-js author. Licensed under the BSD License.</p><p><a target='_blank' href='https://www.google.com/fonts/specimen/Droid+Sans+Mono'>Droid Sans Mono</a> Copyright Steve Matteson. Licensed under the Apache License.</p><p><a target='_blank' href='http://fontawesome.io'>Font Awesome</a> Copyright Dave Gandy. Licensed under the SIL OFL License 1.1.</p><p>Thanks to Mike Robinson &lt;3</p>",
+        "description": "Information."
+    },
+    "add_qr": {
+        "message": "Scan QR Code",
+        "description": "Scan QR Code."
+    },
+    "add_secret": {
+        "message": "Manual Entry",
+        "description": "Manual Entry."
+    },
+    "close": {
+        "message": "Close",
+        "description": "Close."
+    },
+    "ok": {
+        "message": "OK",
+        "description": "OK."
+    },
+    "err_acc_sec": {
+        "message": "Please input Account and Secret.",
+        "description": "Input Account and Secret."
+    },
+    "account": {
+        "message": "Account",
+        "description": "Account."
+    },
+    "secret": {
+        "message": "Secret",
+        "description": "Secret."
+    },
+    "updateSuccess": {
+        "message": "Success.",
+        "description": "Update Success."
+    },
+    "updateFailure": {
+        "message": "Failure.",
+        "description": "Update Failure."
+    },
+    "about": {
+        "message": "About",
+        "description": "About."
+    },
+    "export_import": {
+        "message": "Export / Import",
+        "description": "Export and Import."
+    },
+    "settings": {
+        "message": "Settings",
+        "description": "Settings."
+    },
+    "security": {
+        "message": "Security",
+        "description": "Security."
+    },
+    "current_phrase": {
+        "message": "Current Passphrase",
+        "description": "Current Passphrase."
+    },
+    "new_phrase": {
+        "message": "New Passphrase",
+        "description": "New Passphrase."
+    },
+    "phrase": {
+        "message": "Passphrase",
+        "description": "Passphrase."
+    },
+    "confirm_phrase": {
+        "message": "Confirm Passphrase",
+        "description": "Confirmm Passphrase."
+    },
+    "security_warning": {
+        "message": "This passphrase will be used to encrypt your secrets. No one can help you if you forget the passphrase.",
+        "description": "Passphrase Warning."
+    },
+    "update": {
+        "message": "Update",
+        "description": "Update."
+    },
+    "phrase_incorrect": {
+        "message": "Some accounts and passphrase do not match.",
+        "description": "Passphrase Incorrect."
+    },
+    "phrase_not_match": {
+        "message": "Two passphrases do not match.",
+        "description": "Passphrase Not Match."
+    },
+    "encrypted": {
+        "message": "Encrypted",
+        "description": "Encrypted."
+    },
+    "copied": {
+        "message": "Copied",
+        "description": "Copied."
+    },
+    "feedback": {
+        "message": "Feedback",
+        "description": "Feedback."
+    },
+    "source": {
+        "message": "Source Code",
+        "description": "Source Code."
+    },
+    "passphrase_info": {
+        "message": "Input passphrase to decrypt account data.",
+        "description": "Passphrase Info"
+    },
+    "sync_clock": {
+        "message": "Sync Clock with Google",
+        "description": "Sync Clock"
+    },
+    "remeber_phrase": {
+        "message": "Remeber Passphrase",
+        "description": "Remeber Passphrase"
+    },
+    "clock_too_far_off": {
+        "message": "Caution! Your local clock is too far off, please fix it before continuing.",
+        "description": "Local Time is Too Far Off"
+    },
+    "remind_backup": {
+        "message": "Do you have a backup for your secrets? Please note that no one can help you with getting back locked account, don't wait until it's too late. We will remind you to make a backup again after 30 days.",
+        "description": "Remind Backup"
+    },
+    "capture_failed": {
+        "message": "Capture failed, please reload the page you are veiwing and try again.",
+        "description": "Capture Failed"
+    },
+    "unencrypted_secret_warning": {
+        "message": "This secret is not encrypted! Click here to set a passphrase to fix this issue.",
+        "description": "Unencrypted Secret Warning"
+    },
+    "based_on_time": {
+        "message": "Time Based",
+        "description": "Time Based"
+    },
+    "based_on_counter": {
+        "message": "Counter Based",
+        "description": "Counter Based"
+    },
+    "resize_popup_page": {
+        "message": "Resize Popup Page",
+        "description": "Resize Popup Page"
+    },
+    "scale": {
+        "message": "Scale",
+        "description": "Scale"
+    }
 }
\ No newline at end of file
diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json
index df8a028..1ba3650 100644
--- a/_locales/zh_CN/messages.json
+++ b/_locales/zh_CN/messages.json
@@ -162,5 +162,13 @@
 	"based_on_counter": {
 		"message": "基于计数器",
 		"description": "Counter Based"
+	},
+	"resize_popup_page": {
+		"message": "调整弹出页面尺寸",
+		"description": "Resize Popup Page"
+	},
+	"scale": {
+		"message": "比例",
+		"description": "Scale"
 	}
 }
\ No newline at end of file
diff --git a/css/popup.css b/css/popup.css
index 3178e56..d317e0c 100644
--- a/css/popup.css
+++ b/css/popup.css
@@ -7,312 +7,312 @@
 }
 
 @-webkit-keyframes twinkling{
-	0%{
-		color:#DD4B39;
-	}
-	100%{
-		color:#EEA59C;
-	}
+    0%{
+        color:#DD4B39;
+    }
+    100%{
+        color:#EEA59C;
+    }
 }
 
 @-webkit-keyframes fadeshow{
-	0%{
-		opacity:0;
-	}
-	100%{
-		opacity:1;
-	}
+    0%{
+        opacity:0;
+    }
+    100%{
+        opacity:1;
+    }
 }
 
 @-webkit-keyframes fadehide{
-	0%{
-		opacity:1;
-	}
-	100%{
-		opacity:0;
-	}
+    0%{
+        opacity:1;
+    }
+    100%{
+        opacity:0;
+    }
 }
 
 @-webkit-keyframes fadein{
-	0%{
-		opacity:0;
-		top:110px;
-	}
-	100%{
-		opacity:1;
-		top:10px;
-	}
+    0%{
+        opacity:0;
+        top:110px;
+    }
+    100%{
+        opacity:1;
+        top:10px;
+    }
 }
 
 @-webkit-keyframes fadeout{
-	0%{
-		opacity:1;
-		top:10px;
-	}
-	100%{
-		opacity:0;
-		top:110px;
-	}
+    0%{
+        opacity:1;
+        top:10px;
+    }
+    100%{
+        opacity:0;
+        top:110px;
+    }
 }
 
 @-webkit-keyframes slidein{
-	0%{
-		opacity:0;
-		left:-55px;
-	}
-	100%{
-		opacity:1;
-		left:0;
-	}
+    0%{
+        opacity:0;
+        left:-55px;
+    }
+    100%{
+        opacity:1;
+        left:0;
+    }
 }
 
 @-webkit-keyframes slideout{
-	0%{
-		opacity:1;
-		left:0;
-	}
-	100%{
-		opacity:0;
-		left:-55px;
-	}
+    0%{
+        opacity:1;
+        left:0;
+    }
+    100%{
+        opacity:0;
+        left:-55px;
+    }
 }
 
 @-webkit-keyframes qrfadein{
-	0%{
-		opacity:0;
-	}
-	100%{
-		opacity:1;
-	}
+    0%{
+        opacity:0;
+    }
+    100%{
+        opacity:1;
+    }
 }
 
 @-webkit-keyframes qrfadeout{
-	0%{
-		opacity:1;
-	}
-	100%{
-		opacity:0;
-	}
+    0%{
+        opacity:1;
+    }
+    100%{
+        opacity:0;
+    }
 }
 
 * {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
 body {
-	width: 320px;
-	height: 480px;
-	overflow: hidden;
-	font-family: arial, 'Microsoft YaHei';
-	cursor: default;
-	-webkit-user-select: none;
-	transform-origin: left top;
+    width: 320px;
+    height: 480px;
+    overflow: hidden;
+    font-family: arial, 'Microsoft YaHei';
+    cursor: default;
+    -webkit-user-select: none;
+    transform-origin: left top;
 }
 
 #header,
 #menuHead {
-	height: 38px;
-	line-height: 38px;
-	position: relative;
-	text-align: center;
-	font-size: 16px;
-	border-bottom: #CCC 1px solid;
+    height: 38px;
+    line-height: 38px;
+    position: relative;
+    text-align: center;
+    font-size: 16px;
+    border-bottom: #CCC 1px solid;
 }
 
 #notification {
-	position: absolute;
-	left: 100px;
-	top: -1000px;
-	width: 120px;
-	height: 60px;
-	line-height: 60px;
-	text-align: center;
-	background: rgba(0,0,0,0.5);
-	color: #FFF;
-	font-size: 20px;
-	border-radius: 2px;
+    position: absolute;
+    left: 100px;
+    top: -1000px;
+    width: 120px;
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    background: rgba(0,0,0,0.5);
+    color: #FFF;
+    font-size: 20px;
+    border-radius: 2px;
 }
 
 #notification.fadein {
-	top: 190px;
-	-webkit-animation: fadeshow 0.2s 1 ease-out;
+    top: 190px;
+    -webkit-animation: fadeshow 0.2s 1 ease-out;
 }
 
 #notification.fadeout {
-	top: 190px;
-	-webkit-animation: fadehide 0.2s 1 ease-in;
+    top: 190px;
+    -webkit-animation: fadehide 0.2s 1 ease-in;
 }
 
 #codes {
-	height: 442px;
-	overflow-x: hidden;
-	overflow-y: hidden;
-	background: #EEE;
-	padding-right:10px;
+    height: 442px;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    background: #EEE;
+    padding-right:10px;
 }
 
 #codes:hover {
-	padding-right: 0;
-	overflow-y: scroll;
+    padding-right: 0;
+    overflow-y: scroll;
 }
 
 #codes::-webkit-scrollbar {
-	width: 10px;
-	background: #EEE;
+    width: 10px;
+    background: #EEE;
 }
 
 #codes::-webkit-scrollbar-thumb {
-	background-color: #AAA;
-	border: 2px solid #EEE;
-	border-radius: 5px;
+    background-color: #AAA;
+    border: 2px solid #EEE;
+    border-radius: 5px;
 }
 
 #codeClipboard {
-	position: absolute;
-	top: -1000px;
+    position: absolute;
+    top: -1000px;
 }
 
 .codeBox {
-	margin: 10px;
-	margin-right: 0;
-	padding: 10px;
-	border: #CCC 1px solid;
-	background: white;
-	border-radius: 2px;
-	position: relative;
+    margin: 10px;
+    margin-right: 0;
+    padding: 10px;
+    border: #CCC 1px solid;
+    background: white;
+    border-radius: 2px;
+    position: relative;
 }
 
 .codeBox[unencrypted="true"] .warning {
-	position: absolute;
-	height: 0;
-	line-height: 12px;
-	font-size: 12px;
-	padding: 0 10px;
-	margin: 0 4px;
-	width: 250px;
-	bottom: 4px;
-	left: 0;
-	background: #EC6959;
-	color: #FFF;
-	cursor: pointer;
-	overflow: hidden;
-	border-radius: 2px;
-	-webkit-transition: height 0.2s;
+    position: absolute;
+    height: 0;
+    line-height: 12px;
+    font-size: 12px;
+    padding: 0 10px;
+    margin: 0 4px;
+    width: 250px;
+    bottom: 4px;
+    left: 0;
+    background: #EC6959;
+    color: #FFF;
+    cursor: pointer;
+    overflow: hidden;
+    border-radius: 2px;
+    -webkit-transition: height 0.2s;
 }
 
 #codes:not(.edit) .codeBox[unencrypted="true"]:hover .warning {
-	height: 24px;
+    height: 24px;
 }
 
 .codeBox[dropOver="true"] {
-	border: gray 1px dashed;
+    border: gray 1px dashed;
 }
 
 .issuer {
-	font-size: 12px;
-	color: black;
-	width: 80%;
-	text-overflow: ellipsis;
-	overflow: hidden;
+    font-size: 12px;
+    color: black;
+    width: 80%;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .code {
-	font-size: 36px;
-	color: #08C;
-	width: 80%;
-	-webkit-user-select: text;
-	font-family: 'Droid Sans Mono';
-	cursor: pointer;
+    font-size: 36px;
+    color: #08C;
+    width: 80%;
+    -webkit-user-select: text;
+    font-family: 'Droid Sans Mono';
+    cursor: pointer;
 }
 
 #codes.edit .code {
-	color: #CCC!important;
-	-webkit-user-select: none;
-	cursor: default;
+    color: #CCC!important;
+    -webkit-user-select: none;
+    cursor: default;
 }
 
 #codes.edit .account,
 #codes.edit .issuer {
-	display: none;
+    display: none;
 }
 
 .accountEdit,
 .issuerEdit {
-	display: none;
+    display: none;
 }
 
 .accountEdit input,
 .issuerEdit input {
-	border: none;
-	height: 14px;
-	width: 70%;
-	font-size: 12px;
-	font-family: arial, 'Microsoft YaHei';
-	outline: none;
-	background: #eee;
+    border: none;
+    height: 14px;
+    width: 70%;
+    font-size: 12px;
+    font-family: arial, 'Microsoft YaHei';
+    outline: none;
+    background: #eee;
 }
 
 #codes.edit .accountEdit,
 #codes.edit .issuerEdit {
-	display: block;
+    display: block;
 }
 
 #codes.timeout .code:not(.hotp) {
-	-webkit-animation: twinkling 1s infinite ease-in-out;
+    -webkit-animation: twinkling 1s infinite ease-in-out;
 }
 
 .hotp {
-	color: #555;
-	cursor: default;
+    color: #555;
+    cursor: default;
 }
 
 .hotp[hasCode="true"] {
-	color: #08C;
-	cursor: pointer;
+    color: #08C;
+    cursor: pointer;
 }
 
 .movehandle {
-	height: 98px;
-	line-height: 98px;
-	right: 10px;
-	top: 0;
-	position: absolute;
-	font-size: 24px;
-	color: #CCC;
-	cursor: move;
-	display: none;
+    height: 98px;
+    line-height: 98px;
+    right: 10px;
+    top: 0;
+    position: absolute;
+    font-size: 24px;
+    color: #CCC;
+    cursor: move;
+    display: none;
 }
 
 #codes.edit .movehandle {
-	display: block;
+    display: block;
 }
 
 .showqr {
-	right: 10px;
-	top: 10px;
-	position: absolute;
-	font-size: 20px;
-	color: #CCC;
-	cursor: pointer;
-	opacity: 0;
+    right: 10px;
+    top: 10px;
+    position: absolute;
+    font-size: 20px;
+    color: #CCC;
+    cursor: pointer;
+    opacity: 0;
 }
 
 .showqr:hover {
-	opacity: 1;
+    opacity: 1;
 }
 
 #codes.edit .showqr {
-	display: none;
+    display: none;
 }
 
 .account {
-	font-size: 12px;
-	color: gray;
-	width: 80%;
-	text-overflow: ellipsis;
-	overflow: hidden;
+    font-size: 12px;
+    color: gray;
+    width: 80%;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 #add,
@@ -322,241 +322,247 @@ body {
 #security_save,
 #passphrase_ok,
 #message_close,
-#exportButton {
-	margin: 10px;
-	padding: 20px;
-	border: #CCC 1px solid;
-	background: white;
-	border-radius: 2px;
-	position: relative;
-	text-align: center;
-	font-size: 16px;
-	color: gray;
-	cursor: pointer;
+#exportButton,
+#resize_save {
+    margin: 10px;
+    padding: 20px;
+    border: #CCC 1px solid;
+    background: white;
+    border-radius: 2px;
+    position: relative;
+    text-align: center;
+    font-size: 16px;
+    color: gray;
+    cursor: pointer;
 }
 
 #add {
-	margin-right: 0;
+    margin-right: 0;
 }
 
 #message_close,
 #add_button,
 #exportButton,
 #security_save,
-#passphrase_ok {
-	font-size: 12px;
-	margin: 20px 100px;
-	padding: 10px;
-	cursor: pointer;
+#passphrase_ok,
+#resize_save {
+    font-size: 12px;
+    margin: 20px 100px;
+    padding: 10px;
+    cursor: pointer;
 }
 
 #codes #add {
-	font-size: 16px;
-	line-height: 56px;
-	display: none;
+    font-size: 16px;
+    line-height: 56px;
+    display: none;
 }
 
 #codes.edit #add {
-	display: block;
+    display: block;
 }
 
 #codes .deleteAction {
-	font-size: 20px;
-	color: #DD4B39;
-	position: absolute;
-	top: -10px;
-	left: -10px;
-	z-index: 10;
-	display: none;
+    font-size: 20px;
+    color: #DD4B39;
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    z-index: 10;
+    display: none;
 }
 
 #codes.edit .deleteAction {
-	display: block;
-	cursor: pointer;
+    display: block;
+    cursor: pointer;
 }
 
 #infoAction {
-	position: absolute;
-	left: 20px;
-	bottom: 0;
-	height: 38px;
-	line-height: 38px;
-	font-size: 16px;
-	color: gray;
-	cursor: pointer;
+    position: absolute;
+    left: 20px;
+    bottom: 0;
+    height: 38px;
+    line-height: 38px;
+    font-size: 16px;
+    color: gray;
+    cursor: pointer;
 }
 
 #infoAction.hidden {
-	display: none;
+    display: none;
 }
 
 #editAction {
-	position: absolute;
-	right: 20px;
-	bottom: 0;
-	height: 38px;
-	line-height: 38px;
-	font-size: 16px;
-	color: gray;
-	cursor: pointer;
+    position: absolute;
+    right: 20px;
+    bottom: 0;
+    height: 38px;
+    line-height: 38px;
+    font-size: 16px;
+    color: gray;
+    cursor: pointer;
 }
 
 .counter {
-	color: #888;
-	font-size: 18px;
-	text-align: center;
-	cursor: pointer;
+    color: #888;
+    font-size: 18px;
+    text-align: center;
+    cursor: pointer;
 }
 
 .counter:not([disabled="true"]):hover {
-	color: #000;
+    color: #000;
 }
 
 .counter[disabled="true"] {
-	color: #CCC;
-	cursor: default;
+    color: #CCC;
+    cursor: default;
 }
 
 .sector,
 .counter {
-	width: 20px;
-	height: 20px;
-	position: absolute;
-	right: 10px;
-	bottom: 10px;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
 }
 
 #codes.edit .sector,
 #codes.edit .counter {
-	display: none;
+    display: none;
 }
 
 #menu {
-	width: 320px;
-	height: 480px;
-	position: absolute;
-	left: -1000px;
-	background: #EEE;
-	top: 0;
+    width: 320px;
+    height: 480px;
+    position: absolute;
+    left: -1000px;
+    background: #EEE;
+    top: 0;
 }
 
 #menu.slidein {
-	left: 0;
-	-webkit-animation: slidein 0.2s 1 ease-out;
+    left: 0;
+    -webkit-animation: slidein 0.2s 1 ease-out;
 }
 
 #menu.slideout {
-	left: -55px;
-	-webkit-animation: slideout 0.2s 1 ease-in;
+    left: -55px;
+    -webkit-animation: slideout 0.2s 1 ease-in;
 }
 
 #menuHead {
-	background: #FFF;
+    background: #FFF;
 }
 
 #menu .menuList {
-	margin: 10px;
-	border: #CCC 1px solid;
-	border-radius: 2px;
-	background: #FFF;
+    margin: 10px;
+    border: #CCC 1px solid;
+    border-radius: 2px;
+    background: #FFF;
 }
 
 #menu .menuList p {
-	position: relative;
-	border-bottom: #CCC 1px solid;
-	padding: 10px;
-	font-size: 16px;
-	color: gray;
-	cursor: pointer;
+    position: relative;
+    border-bottom: #CCC 1px solid;
+    padding: 10px;
+    font-size: 16px;
+    color: gray;
+    cursor: pointer;
 }
 
 #menu .menuList p:hover {
-	background: #F4FCFF;
-	color: black;
+    background: #F4FCFF;
+    color: black;
 }
 
 #menu .menuList p:hover:after {
-	color: black;
+    color: black;
 }
 
 #menu .menuList p:last-child {
-	border-bottom: none;
+    border-bottom: none;
 }
 
 #menu .menuList p a {
-	color: gray;
-	text-decoration: none;
-	display: line-block;
+    color: gray;
+    text-decoration: none;
+    display: line-block;
 }
 
 #menu .menuList p i.fa {
-	font-size: 14px;
-	display: line-block;
-	width: 30px;
+    font-size: 14px;
+    display: line-block;
+    width: 30px;
 }
 
 #version {
-	text-align: center;
-	color: gray;
-	margin: 10px;
+    text-align: center;
+    color: gray;
+    margin: 10px;
 }
 
 #info,
 #addAccount,
 #security,
 #passphrase,
-#export {
-	position: absolute;
-	height: 460px;
-	width: 300px;
-	padding: 10px;
-	border: gray;
-	background: white;
-	left: 10px;
-	top: -1000px;
-	box-shadow: 1px 1px 3px gray;
-	z-index: 100;
+#export,
+#resize {
+    position: absolute;
+    height: 460px;
+    width: 300px;
+    padding: 10px;
+    border: gray;
+    background: white;
+    left: 10px;
+    top: -1000px;
+    box-shadow: 1px 1px 3px gray;
+    z-index: 100;
 }
 
 #info.fadein,
 #addAccount.fadein,
 #security.fadein,
 #passphrase.fadein,
-#export.fadein {
-	top: 10px;
-	-webkit-animation: fadein 0.2s 1 ease-out;
+#export.fadein,
+#resize.fadein {
+    top: 10px;
+    -webkit-animation: fadein 0.2s 1 ease-out;
 }
 
 #info.fadeout,
 #addAccount.fadeout,
 #security.fadeout,
 #passphrase.fadeout,
-#export.fadeout {
-	top: 110px;
-	-webkit-animation: fadeout 0.2s 1 ease-in;
+#export.fadeout,
+#resize.fadeout {
+    top: 110px;
+    -webkit-animation: fadeout 0.2s 1 ease-in;
 }
 
 #infoClose,
 #addAccountClose,
 #securityClose,
 #passphraseClose,
-#exportClose {
-	height: 20px;
-	width: 20px;
-	font-size: 14px;
-	color: gray;
-	cursor: pointer;
+#exportClose,
+#resizeClose {
+    height: 20px;
+    width: 20px;
+    font-size: 14px;
+    color: gray;
+    cursor: pointer;
 }
 
 #menuClose {
-	position: absolute;
-	height: 38px;
-	line-height: 38px;
-	left: 20px;
-	font-size: 16px;
-	color: gray;
-	bottom: 0;
-	cursor: pointer;
+    position: absolute;
+    height: 38px;
+    line-height: 38px;
+    left: 20px;
+    font-size: 16px;
+    color: gray;
+    bottom: 0;
+    cursor: pointer;
 }
 
 #menuClose:hover,
@@ -574,87 +580,89 @@ body {
 #passphraseClose:hover,
 #security_save:hover,
 #passphrase_ok:hover,
-#export:hover {
-	color: black;
+#export:hover,
+#resizeClose:hover,
+#resize_save:hover {
+    color: black;
 }
 
 #infoContent,
 #addAccountContent,
 #exportContent {
-	height: 420px;
-	overflow-y: auto;
-	overflow-x: hidden;
+    height: 420px;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
 #exportData {
-	height: 340px;
-	width: 100%;
-	word-break: break-all;
-	resize: none;
-	outline: none;
+    height: 340px;
+    width: 100%;
+    word-break: break-all;
+    resize: none;
+    outline: none;
 }
 
 #infoContent p {
-	font-size: 12px;
-	margin-bottom: 20px;
+    font-size: 12px;
+    margin-bottom: 20px;
 }
 
 #infoContent a {
-	color: #4183c4;
+    color: #4183c4;
 }
 
 #qr {
-	width: 100%;
-	height: 100%;
-	top: -1000px;
-	left: 0;
-	position: absolute;
-	z-index: 10;
-	background-color: rgba(0, 0, 0, 0.5);
-	background-repeat: no-repeat;
-	background-position: center;
+    width: 100%;
+    height: 100%;
+    top: -1000px;
+    left: 0;
+    position: absolute;
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.5);
+    background-repeat: no-repeat;
+    background-position: center;
 }
 
 #qr canvas {
-	display: none;
+    display: none;
 }
 
 #qr.qrfadein {
-	top: 0;
-	-webkit-animation: qrfadein 0.2s 1 ease-out;
+    top: 0;
+    -webkit-animation: qrfadein 0.2s 1 ease-out;
 }
 
 #qr.qrfadeout {
-	top: 0;
-	-webkit-animation: qrfadeout 0.2s 1 ease-in;
+    top: 0;
+    -webkit-animation: qrfadeout 0.2s 1 ease-in;
 }
 
 #secret_box {
-	display: none;
+    display: none;
 }
 
 #secret_box input,
 #security input,
 #passphrase input {
-	display: block;
-	margin: 0 10px 10px 10px;
-	padding: 10px;
-	width: 260px;
-	border: #CCC 1px solid;
-	background: white;
-	outline: none;
+    display: block;
+    margin: 0 10px 10px 10px;
+    padding: 10px;
+    width: 260px;
+    border: #CCC 1px solid;
+    background: white;
+    outline: none;
 }
 
 .checkbox_group input[type="checkbox"],
 .radio_group input[type="radio"] {
-	display: inline-block !important;
-	width: auto !important;
+    display: inline-block !important;
+    width: auto !important;
 }
 
 .checkbox_group label,
 .radio_group label {
-	display: inline-block !important;
-	margin-left: 0 !important;
+    display: inline-block !important;
+    margin-left: 0 !important;
 }
 
 #secret_box label,
@@ -662,24 +670,30 @@ body {
 #passphrase label,
 #security_warning,
 #passphrase_info {
-	display: block;
-	margin: 10px 0 0 10px;
+    display: block;
+    margin: 10px 0 0 10px;
 }
 
 #security_warning,
 #passphrase_info {
-	color: gray;
+    color: gray;
+}
+
+#resize_list_label,
+#resize_list {
+    margin: 20px;
+    font-size: 16px;
 }
 
 #message {
-	position: absolute;
-	width: 300px;
-	padding: 10px;
-	border: gray;
-	background: white;
-	left: 10px;
-	top: 150px;
-	box-shadow: 1px 1px 3px gray;
-	display: none;
-	z-index: 1000;
+    position: absolute;
+    width: 300px;
+    padding: 10px;
+    border: gray;
+    background: white;
+    left: 10px;
+    top: 150px;
+    box-shadow: 1px 1px 3px gray;
+    display: none;
+    z-index: 1000;
 }
\ No newline at end of file
diff --git a/javascript/content.js b/javascript/content.js
index b5a9bd9..23a75bd 100644
--- a/javascript/content.js
+++ b/javascript/content.js
@@ -1,115 +1,115 @@
 function showGrayLayout() {
-	var grayLayout = document.getElementById('__ga_grayLayout__');
-	if (!grayLayout) {
-		grayLayout = document.createElement('div');
-		grayLayout.id = '__ga_grayLayout__';
-		document.body.appendChild(grayLayout);
-		var scan = document.createElement('div');
-		scan.className = 'scan';
-		scan.style.background = 'url(' + chrome.extension.getURL('images/scan.gif') + ') no-repeat center';
-		grayLayout.appendChild(scan);
-		var captureBox = document.createElement('div');
-		captureBox.id = '__ga_captureBox__';
-		grayLayout.appendChild(captureBox);
-		grayLayout.onmousedown = grayLayoutDown.bind(this);
-		grayLayout.onmousemove = grayLayoutMove.bind(this);
-		grayLayout.onmouseup = grayLayoutUp.bind(this);
-		grayLayout.oncontextmenu = function () {
-			var e = event || window.event;
-			e.preventDefault();
-			return false;
-		};
-	}
-	grayLayout.style.display = 'block';
+    var grayLayout = document.getElementById('__ga_grayLayout__');
+    if (!grayLayout) {
+        grayLayout = document.createElement('div');
+        grayLayout.id = '__ga_grayLayout__';
+        document.body.appendChild(grayLayout);
+        var scan = document.createElement('div');
+        scan.className = 'scan';
+        scan.style.background = 'url(' + chrome.extension.getURL('images/scan.gif') + ') no-repeat center';
+        grayLayout.appendChild(scan);
+        var captureBox = document.createElement('div');
+        captureBox.id = '__ga_captureBox__';
+        grayLayout.appendChild(captureBox);
+        grayLayout.onmousedown = grayLayoutDown.bind(this);
+        grayLayout.onmousemove = grayLayoutMove.bind(this);
+        grayLayout.onmouseup = grayLayoutUp.bind(this);
+        grayLayout.oncontextmenu = function () {
+            var e = event || window.event;
+            e.preventDefault();
+            return false;
+        };
+    }
+    grayLayout.style.display = 'block';
 }
 
 function grayLayoutDown(event) {
-	var e = event || window.event;
-	if (e.button === 1 || e.button === 2) {
-		e.preventDefault();
-		return false;
-	}
-	var captureBox = document.getElementById('__ga_captureBox__');
-	this.captureBoxLeft = e.clientX;
-	this.captureBoxTop = e.clientY;
-	captureBox.style.left = e.clientX + 'px';
-	captureBox.style.top = e.clientY + 'px';
-	captureBox.style.width = '1px';
-	captureBox.style.height = '1px';
-	captureBox.style.display = 'block';
+    var e = event || window.event;
+    if (e.button === 1 || e.button === 2) {
+        e.preventDefault();
+        return false;
+    }
+    var captureBox = document.getElementById('__ga_captureBox__');
+    this.captureBoxLeft = e.clientX;
+    this.captureBoxTop = e.clientY;
+    captureBox.style.left = e.clientX + 'px';
+    captureBox.style.top = e.clientY + 'px';
+    captureBox.style.width = '1px';
+    captureBox.style.height = '1px';
+    captureBox.style.display = 'block';
 }
 
 function grayLayoutMove(event) {
-	var e = event || window.event;
-	if (e.button === 1 || e.button === 2) {
-		e.preventDefault();
-		return false;
-	}
-	var captureBox = document.getElementById('__ga_captureBox__');
-	var captureBoxLeft = Math.min(this.captureBoxLeft, e.clientX);
-	var captureBoxTop = Math.min(this.captureBoxTop, e.clientY);
-	var captureBoxWidth = Math.abs(this.captureBoxLeft - e.clientX) - 1;
-	var captureBoxHeight = Math.abs(this.captureBoxTop - e.clientY) - 1;
-	captureBox.style.left = captureBoxLeft + 'px';
-	captureBox.style.top = captureBoxTop + 'px';
-	captureBox.style.width = captureBoxWidth + 'px';
-	captureBox.style.height = captureBoxHeight + 'px';
+    var e = event || window.event;
+    if (e.button === 1 || e.button === 2) {
+        e.preventDefault();
+        return false;
+    }
+    var captureBox = document.getElementById('__ga_captureBox__');
+    var captureBoxLeft = Math.min(this.captureBoxLeft, e.clientX);
+    var captureBoxTop = Math.min(this.captureBoxTop, e.clientY);
+    var captureBoxWidth = Math.abs(this.captureBoxLeft - e.clientX) - 1;
+    var captureBoxHeight = Math.abs(this.captureBoxTop - e.clientY) - 1;
+    captureBox.style.left = captureBoxLeft + 'px';
+    captureBox.style.top = captureBoxTop + 'px';
+    captureBox.style.width = captureBoxWidth + 'px';
+    captureBox.style.height = captureBoxHeight + 'px';
 }
 
 function grayLayoutUp(event) {
-	var e = event || window.event;
-	var grayLayout = document.getElementById('__ga_grayLayout__');
-	var captureBox = document.getElementById('__ga_captureBox__');
-	var captureBoxLeft = Math.min(this.captureBoxLeft, e.clientX) + 1;
-	var captureBoxTop = Math.min(this.captureBoxTop, e.clientY) + 1;
-	var captureBoxWidth = Math.abs(this.captureBoxLeft - e.clientX) - 1;
-	var captureBoxHeight = Math.abs(this.captureBoxTop - e.clientY) - 1;
-	setTimeout(function () {
-		captureBox.style.display = 'none';
-		grayLayout.style.display = 'none';
-	}, 100);
-	if (e.button === 1 || e.button === 2) {
-		e.preventDefault();
-		return false;
-	}
-	//make sure captureBox and grayLayout is hidden
-	setTimeout(function () {
-		sendPosition(captureBoxLeft, captureBoxTop, captureBoxWidth, captureBoxHeight);
-	}, 200);
-	return false;
+    var e = event || window.event;
+    var grayLayout = document.getElementById('__ga_grayLayout__');
+    var captureBox = document.getElementById('__ga_captureBox__');
+    var captureBoxLeft = Math.min(this.captureBoxLeft, e.clientX) + 1;
+    var captureBoxTop = Math.min(this.captureBoxTop, e.clientY) + 1;
+    var captureBoxWidth = Math.abs(this.captureBoxLeft - e.clientX) - 1;
+    var captureBoxHeight = Math.abs(this.captureBoxTop - e.clientY) - 1;
+    setTimeout(function () {
+        captureBox.style.display = 'none';
+        grayLayout.style.display = 'none';
+    }, 100);
+    if (e.button === 1 || e.button === 2) {
+        e.preventDefault();
+        return false;
+    }
+    //make sure captureBox and grayLayout is hidden
+    setTimeout(function () {
+        sendPosition(captureBoxLeft, captureBoxTop, captureBoxWidth, captureBoxHeight);
+    }, 200);
+    return false;
 }
 
 function sendPosition(left, top, width, height) {
-	chrome.runtime.sendMessage({
-		action : 'position',
-		info : {
-			left : left,
-			top : top,
-			width : width,
-			height : height,
-			windowWidth : window.innerWidth
-		}
-	});
+    chrome.runtime.sendMessage({
+        action : 'position',
+        info : {
+            left : left,
+            top : top,
+            width : width,
+            height : height,
+            windowWidth : window.innerWidth
+        }
+    });
 }
 
 function showQrCode(msg) {
-	var left = (screen.width / 2) - 200;
-	var top = (screen.height / 2) - 100;
-	var url = chrome.extension.getURL('qr.html') + '?' + encodeURIComponent(msg);
-	window.open(url, '_blank', 'toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, copyhistory=no, width=400, height=200, left=' + left + ',top=' + top);
+    var left = (screen.width / 2) - 200;
+    var top = (screen.height / 2) - 100;
+    var url = chrome.extension.getURL('qr.html') + '?' + encodeURIComponent(msg);
+    window.open(url, '_blank', 'toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, copyhistory=no, width=400, height=200, left=' + left + ',top=' + top);
 }
 
 chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
-	if (message.action === 'capture') {
-		sendResponse('beginCapture');
-		showGrayLayout();
-	} else if (message.action === 'errorsecret') {
-		alert(chrome.i18n.getMessage('errorsecret') + message.secret);
-	} else if (message.action === 'errorqr') {
-		alert(chrome.i18n.getMessage('errorqr'));
-	} else if (message.action === 'added') {
-		alert(message.account + chrome.i18n.getMessage('added'));
-	} else if (message.action === 'text') {
-		showQrCode(message.text);
-	}
+    if (message.action === 'capture') {
+        sendResponse('beginCapture');
+        showGrayLayout();
+    } else if (message.action === 'errorsecret') {
+        alert(chrome.i18n.getMessage('errorsecret') + message.secret);
+    } else if (message.action === 'errorqr') {
+        alert(chrome.i18n.getMessage('errorqr'));
+    } else if (message.action === 'added') {
+        alert(message.account + chrome.i18n.getMessage('added'));
+    } else if (message.action === 'text') {
+        showQrCode(message.text);
+    }
 });
diff --git a/javascript/popup.js b/javascript/popup.js
index 38db586..24d3d19 100644
--- a/javascript/popup.js
+++ b/javascript/popup.js
@@ -12,18 +12,18 @@ var shownPassphrase = false;
 var capturing = false;
 
 if (localStorage.phrase) {
-	decodedPhrase = localStorage.phrase;
-	if (localStorage.notRememberPassphrase) {
-		document.cookie = 'passphrase=' + CryptoJS.AES.encrypt(phrase, '').toString();
-		localStorage.removeItem('encodedPhrase');
-	} else {
-		localStorage.encodedPhrase = CryptoJS.AES.encrypt(phrase, '').toString();
-	}
-	localStorage.removeItem('phrase');
+    decodedPhrase = localStorage.phrase;
+    if (localStorage.notRememberPassphrase) {
+        document.cookie = 'passphrase=' + CryptoJS.AES.encrypt(phrase, '').toString();
+        localStorage.removeItem('encodedPhrase');
+    } else {
+        localStorage.encodedPhrase = CryptoJS.AES.encrypt(phrase, '').toString();
+    }
+    localStorage.removeItem('phrase');
 } else if (localStorage.encodedPhrase) {
-	decodedPhrase = CryptoJS.AES.decrypt(localStorage.encodedPhrase, '').toString(CryptoJS.enc.Utf8);
+    decodedPhrase = CryptoJS.AES.decrypt(localStorage.encodedPhrase, '').toString(CryptoJS.enc.Utf8);
 } else if (document.cookie) {
-	decodedPhrase = CryptoJS.AES.decrypt(document.cookie.split('passphrase=')[1], '').toString(CryptoJS.enc.Utf8);
+    decodedPhrase = CryptoJS.AES.decrypt(document.cookie.split('passphrase=')[1], '').toString(CryptoJS.enc.Utf8);
 }
 
 document.getElementById('extName').innerText = chrome.i18n.getMessage('extShortName');
@@ -40,11 +40,13 @@ document.getElementById('security_new_phrase_label').innerText = chrome.i18n.get
 document.getElementById('security_confirm_phrase_label').innerText = chrome.i18n.getMessage('confirm_phrase');
 document.getElementById('security_warning').innerText = chrome.i18n.getMessage('security_warning');
 document.getElementById('exportButton').innerText = chrome.i18n.getMessage('update');
+document.getElementById('resize_save').innerText = chrome.i18n.getMessage('ok');
 document.getElementById('security_save').innerText = chrome.i18n.getMessage('ok');
 document.getElementById('passphrase_info').innerText = chrome.i18n.getMessage('passphrase_info');
 document.getElementById('passphrase_phrase_label').innerText = chrome.i18n.getMessage('passphrase');
 document.getElementById('remeber_new_phrase_label').innerText = chrome.i18n.getMessage('remeber_phrase');
 document.getElementById('remeber_phrase_label').innerText = chrome.i18n.getMessage('remeber_phrase');
+document.getElementById('resize_list_label').innerText = chrome.i18n.getMessage('scale');
 document.getElementById('passphrase_ok').innerText = chrome.i18n.getMessage('ok');
 document.getElementById('version').innerText = 'Version ' + chrome.runtime.getManifest().version;
 
@@ -52,12 +54,13 @@ document.getElementById('menuAbout').innerHTML += chrome.i18n.getMessage('about'
 document.getElementById('menuExImport').innerHTML += chrome.i18n.getMessage('export_import');
 document.getElementById('menuSecurity').innerHTML += chrome.i18n.getMessage('security');
 document.getElementById('menuSyncTime').innerHTML += chrome.i18n.getMessage('sync_clock');
+document.getElementById('menuResize').innerHTML += chrome.i18n.getMessage('resize_popup_page');
 document.getElementById('menuSource').innerHTML += chrome.i18n.getMessage('source');
 document.getElementById('menuFeedback').innerHTML += chrome.i18n.getMessage('feedback');
 
 if (localStorage.notRememberPassphrase === 'true') {
-	document.getElementById('remeber_new_phrase').checked = false;
-	document.getElementById('remeber_phrase').checked = false;
+    document.getElementById('remeber_new_phrase').checked = false;
+    document.getElementById('remeber_phrase').checked = false;
 }
 
 chrome.storage.sync.get(showCodes);
@@ -65,876 +68,882 @@ chrome.storage.sync.get(showCodes);
 document.getElementById('menuExImport').onclick = showExport;
 
 document.getElementById('menuAbout').onclick = function () {
-	document.getElementById('info').className = 'fadein';
-	setTimeout(function () {
-		document.getElementById('info').style.opacity = 1;
-		document.getElementById('infoContent').innerHTML = chrome.i18n.getMessage('info');
-	}, 200);
+    document.getElementById('info').className = 'fadein';
+    setTimeout(function () {
+        document.getElementById('info').style.opacity = 1;
+        document.getElementById('infoContent').innerHTML = chrome.i18n.getMessage('info');
+    }, 200);
 }
 
 document.getElementById('menuSecurity').onclick = function () {
-	document.getElementById('security').className = 'fadein';
-	setTimeout(function () {
-		document.getElementById('security').style.opacity = 1;
-	}, 200);
+    document.getElementById('security').className = 'fadein';
+    setTimeout(function () {
+        document.getElementById('security').style.opacity = 1;
+    }, 200);
 }
 
 chrome.permissions.contains({
-	origins : ['https://www.google.com/']
+    origins : ['https://www.google.com/']
 }, function (hasPermission) {
-	if (hasPermission) {
-		syncTimeWithGoogle(false);
-	}
+    if (hasPermission) {
+        syncTimeWithGoogle(false);
+    }
 });
 
 document.getElementById('menuSyncTime').onclick = function () {
-	chrome.permissions.request({
-		origins : ['https://www.google.com/']
-	}, function (granted) {
-		if (granted) {
-			syncTimeWithGoogle(true);
-		}
-	});
+    chrome.permissions.request({
+        origins : ['https://www.google.com/']
+    }, function (granted) {
+        if (granted) {
+            syncTimeWithGoogle(true);
+        }
+    });
+}
+
+document.getElementById('menuResize').onclick = function () {
+    document.getElementById('resize').className = 'fadein';
+    setTimeout(function () {
+        document.getElementById('resize').style.opacity = 1;
+    }, 200);
+}
+
+document.getElementById('resize_save').onclick = function () {
+    var zoom = document.getElementById('resize_list').value;
+    localStorage.zoom = zoom;
+    window.close();
 }
 
 document.getElementById('security_save').onclick = function () {
-	var phrase = document.getElementById('security_new_phrase').value;
-	var phrase2 = document.getElementById('security_confirm_phrase').value;
-	if (phrase === phrase2) {
-		document.getElementById('security_new_phrase').value = '';
-		document.getElementById('security_confirm_phrase').value = '';
-		localStorage.notRememberPassphrase = (!document.getElementById('remeber_new_phrase').checked).toString();
-		document.getElementById('remeber_phrase').checked = document.getElementById('remeber_new_phrase').checked;
-		encryptSecret(phrase, true, function () {
-			showMessage(chrome.i18n.getMessage('updateSuccess'), function () {
-				document.getElementById('security').className = 'fadeout';
-				setTimeout(function () {
-					document.getElementById('security').className = '';
-					document.getElementById('security').style.opacity = 0;
-				}, 200);
-			});
-		}, function () {
-			showMessage(chrome.i18n.getMessage('phrase_incorrect'));
-		});
-	} else {
-		showMessage(chrome.i18n.getMessage('phrase_not_match'));
-	}
+    var phrase = document.getElementById('security_new_phrase').value;
+    var phrase2 = document.getElementById('security_confirm_phrase').value;
+    if (phrase === phrase2) {
+        document.getElementById('security_new_phrase').value = '';
+        document.getElementById('security_confirm_phrase').value = '';
+        localStorage.notRememberPassphrase = (!document.getElementById('remeber_new_phrase').checked).toString();
+        document.getElementById('remeber_phrase').checked = document.getElementById('remeber_new_phrase').checked;
+        encryptSecret(phrase, true, function () {
+            showMessage(chrome.i18n.getMessage('updateSuccess'), function () {
+                document.getElementById('security').className = 'fadeout';
+                setTimeout(function () {
+                    document.getElementById('security').className = '';
+                    document.getElementById('security').style.opacity = 0;
+                }, 200);
+            });
+        }, function () {
+            showMessage(chrome.i18n.getMessage('phrase_incorrect'));
+        });
+    } else {
+        showMessage(chrome.i18n.getMessage('phrase_not_match'));
+    }
 }
 
 document.getElementById('passphrase_ok').onclick = function () {
-	var phrase = document.getElementById('phrase').value;
-	document.getElementById('phrase').value = '';
-	localStorage.notRememberPassphrase = (!document.getElementById('remeber_phrase').checked).toString();
-	document.getElementById('remeber_new_phrase').checked = document.getElementById('remeber_phrase').checked;
-	encryptSecret(phrase, false, function () {
-		document.getElementById('passphrase').className = 'fadeout';
-		setTimeout(function () {
-			document.getElementById('passphrase').className = '';
-			document.getElementById('passphrase').style.opacity = 0;
-		}, 200);
-	}, function () {
-		showMessage(chrome.i18n.getMessage('phrase_incorrect'));
-	});
+    var phrase = document.getElementById('phrase').value;
+    document.getElementById('phrase').value = '';
+    localStorage.notRememberPassphrase = (!document.getElementById('remeber_phrase').checked).toString();
+    document.getElementById('remeber_new_phrase').checked = document.getElementById('remeber_phrase').checked;
+    encryptSecret(phrase, false, function () {
+        document.getElementById('passphrase').className = 'fadeout';
+        setTimeout(function () {
+            document.getElementById('passphrase').className = '';
+            document.getElementById('passphrase').style.opacity = 0;
+        }, 200);
+    }, function () {
+        showMessage(chrome.i18n.getMessage('phrase_incorrect'));
+    });
 }
 
 document.getElementById('securityClose').onclick = function () {
-	document.getElementById('security').className = 'fadeout';
-	setTimeout(function () {
-		document.getElementById('security').className = '';
-		document.getElementById('security').style.opacity = 0;
-	}, 200);
+    document.getElementById('security').className = 'fadeout';
+    setTimeout(function () {
+        document.getElementById('security').className = '';
+        document.getElementById('security').style.opacity = 0;
+    }, 200);
+}
+
+document.getElementById('resizeClose').onclick = function () {
+    document.getElementById('resize').className = 'fadeout';
+    setTimeout(function () {
+        document.getElementById('resize').className = '';
+        document.getElementById('resize').style.opacity = 0;
+    }, 200);
 }
 
 document.getElementById('passphraseClose').onclick = function () {
-	document.getElementById('passphrase').className = 'fadeout';
-	setTimeout(function () {
-		document.getElementById('passphrase').className = '';
-		document.getElementById('passphrase').style.opacity = 0;
-	}, 200);
+    document.getElementById('passphrase').className = 'fadeout';
+    setTimeout(function () {
+        document.getElementById('passphrase').className = '';
+        document.getElementById('passphrase').style.opacity = 0;
+    }, 200);
 }
 
 document.getElementById('infoAction').onclick = function () {
-	document.getElementById('menu').className = 'slidein';
-	setTimeout(function () {
-		document.getElementById('menu').style.opacity = 1;
-	}, 200);
+    document.getElementById('menu').className = 'slidein';
+    setTimeout(function () {
+        document.getElementById('menu').style.opacity = 1;
+    }, 200);
 }
 
 document.getElementById('menuClose').onclick = function () {
-	document.getElementById('menu').className = 'slideout';
-	setTimeout(function () {
-		document.getElementById('menu').className = '';
-		document.getElementById('menu').style.opacity = 0;
-	}, 200);
+    document.getElementById('menu').className = 'slideout';
+    setTimeout(function () {
+        document.getElementById('menu').className = '';
+        document.getElementById('menu').style.opacity = 0;
+    }, 200);
 }
 
 document.getElementById('infoClose').onclick = function () {
-	document.getElementById('info').className = 'fadeout';
-	setTimeout(function () {
-		document.getElementById('info').className = '';
-		document.getElementById('info').style.opacity = 0;
-		document.getElementById('infoContent').innerHTML = '';
-	}, 200);
+    document.getElementById('info').className = 'fadeout';
+    setTimeout(function () {
+        document.getElementById('info').className = '';
+        document.getElementById('info').style.opacity = 0;
+        document.getElementById('infoContent').innerHTML = '';
+    }, 200);
 }
 
 document.getElementById('add').onclick = function () {
-	document.getElementById('add_qr').style.display = 'block';
-	document.getElementById('add_secret').style.display = 'block';
-	document.getElementById('secret_box').style.display = 'none';
-	document.getElementById('addAccount').className = 'fadein';
-	setTimeout(function () {
-		document.getElementById('addAccount').style.opacity = 1;
-	}, 200);
+    document.getElementById('add_qr').style.display = 'block';
+    document.getElementById('add_secret').style.display = 'block';
+    document.getElementById('secret_box').style.display = 'none';
+    document.getElementById('addAccount').className = 'fadein';
+    setTimeout(function () {
+        document.getElementById('addAccount').style.opacity = 1;
+    }, 200);
 }
 
 document.getElementById('addAccountClose').onclick = function () {
-	document.getElementById('addAccount').className = 'fadeout';
-	setTimeout(function () {
-		document.getElementById('addAccount').className = '';
-		document.getElementById('addAccount').style.opacity = 0;
-	}, 200);
+    document.getElementById('addAccount').className = 'fadeout';
+    setTimeout(function () {
+        document.getElementById('addAccount').className = '';
+        document.getElementById('addAccount').style.opacity = 0;
+    }, 200);
 }
 
 document.getElementById('add_qr').onclick = function () {
-	beginCapture(false);
+    beginCapture(false);
 };
 
 document.getElementById('add_secret').onclick = function () {
-	document.getElementById('add_qr').style.display = 'none';
-	document.getElementById('add_secret').style.display = 'none';
-	document.getElementById('secret_box').style.display = 'block';
+    document.getElementById('add_qr').style.display = 'none';
+    document.getElementById('add_secret').style.display = 'none';
+    document.getElementById('secret_box').style.display = 'block';
 }
 
 document.getElementById('exportClose').onclick = function () {
-	document.getElementById('export').className = 'fadeout';
-	setTimeout(function () {
-		document.getElementById('export').className = '';
-		document.getElementById('export').style.opacity = 0;
-	}, 200);
+    document.getElementById('export').className = 'fadeout';
+    setTimeout(function () {
+        document.getElementById('export').className = '';
+        document.getElementById('export').style.opacity = 0;
+    }, 200);
 }
 
 document.getElementById('exportButton').onclick = function () {
-	var data = document.getElementById('exportData').value;
-	try {
-		data = JSON.parse(data);
-		chrome.storage.sync.set(data, function () {
-			if (decodedPhrase) {
-				encryptSecret(decodedPhrase, true);
-			}
-			chrome.storage.sync.get(showCodes);
-			showMessage(chrome.i18n.getMessage('updateSuccess'), function () {
-				document.getElementById('export').className = 'fadeout';
-				setTimeout(function () {
-					document.getElementById('export').className = '';
-					document.getElementById('export').style.opacity = 0;
-					document.getElementById('exportData').value = '';
-				}, 200);
-			});
-		});
-	} catch (e) {
-		showMessage(chrome.i18n.getMessage('updateFailure'));
-	}
+    var data = document.getElementById('exportData').value;
+    try {
+        data = JSON.parse(data);
+        chrome.storage.sync.set(data, function () {
+            if (decodedPhrase) {
+                encryptSecret(decodedPhrase, true);
+            }
+            chrome.storage.sync.get(showCodes);
+            showMessage(chrome.i18n.getMessage('updateSuccess'), function () {
+                document.getElementById('export').className = 'fadeout';
+                setTimeout(function () {
+                    document.getElementById('export').className = '';
+                    document.getElementById('export').style.opacity = 0;
+                    document.getElementById('exportData').value = '';
+                }, 200);
+            });
+        });
+    } catch (e) {
+        showMessage(chrome.i18n.getMessage('updateFailure'));
+    }
 }
 
 document.getElementById('editAction').onmousedown = function () {
-	editTimeout = setTimeout(function () {
-			beginCapture(true);
-		}, 500);
+    editTimeout = setTimeout(function () {
+            beginCapture(true);
+        }, 500);
 }
 
 document.getElementById('editAction').onclick = editCodes;
 
 document.getElementById('qr').onclick = function () {
-	this.className = 'qrfadeout';
-	setTimeout(function () {
-		document.getElementById('qr').className = '';
-		document.getElementById('qr').style.opacity = 0;
-	}, 200);
+    this.className = 'qrfadeout';
+    setTimeout(function () {
+        document.getElementById('qr').className = '';
+        document.getElementById('qr').style.opacity = 0;
+    }, 200);
 }
 
 document.getElementById('message_close').onclick = function () {
-	document.getElementById('message').style.display = 'none';
+    document.getElementById('message').style.display = 'none';
 }
 
 document.getElementById('add_button').onclick = saveSecret;
 
 function showMessage(msg, closeAction) {
-	document.getElementById('message_content').innerText = msg;
-	document.getElementById('message').style.display = 'block';
-	document.getElementById('message_close').onclick = function () {
-		document.getElementById('message').style.display = 'none';
-		if (closeAction) {
-			closeAction();
-		}
-	}
+    document.getElementById('message_content').innerText = msg;
+    document.getElementById('message').style.display = 'block';
+    document.getElementById('message_close').onclick = function () {
+        document.getElementById('message').style.display = 'none';
+        if (closeAction) {
+            closeAction();
+        }
+    }
 }
 
 function updateSecret(callback) {
-	for (var i = 0; i < _secret.length; i++) {
-		if (deleteIdList.indexOf(i) != -1) {
-			_secret[i] = null;
-		}
-	}
-	_secret = sortCode();
-	chrome.storage.sync.remove(deleteKeyList, function () {
-		deleteIdList = [];
-		deleteKeyList = [];
-		chrome.storage.sync.get(function (secret) {
-			var changeSecret = {};
-			for (var i = 0; i < _secret.length; i++) {
-				if (secret[_secret[i].secret] && (secret[_secret[i].secret].index != _secret[i].index ||
-						secret[_secret[i].secret].account != _secret[i].account ||
-						secret[_secret[i].secret].issuer != _secret[i].issuer) ||
-					secret[CryptoJS.MD5(_secret[i].secret)] && (secret[CryptoJS.MD5(_secret[i].secret)].index != _secret[i].index ||
-						secret[CryptoJS.MD5(_secret[i].secret)].account != _secret[i].account ||
-						secret[CryptoJS.MD5(_secret[i].secret)].issuer != _secret[i].issuer)) {
-					changeSecret[CryptoJS.MD5(_secret[i].secret)] = _secret[i];
-					if (decodedPhrase) {
-						changeSecret[CryptoJS.MD5(_secret[i].secret)].secret = CryptoJS.AES.encrypt(_secret[i].secret, decodedPhrase).toString();
-					}
-				}
-			}
-			if (changeSecret) {
-				chrome.storage.sync.set(changeSecret, function () {
-					if (callback) {
-						callback();
-					} else {
-						chrome.storage.sync.get(showCodes);
-						codes.scrollTop = 0;
-					}
-				});
-			} else {
-				if (callback) {
-					callback();
-				} else {
-					chrome.storage.sync.get(showCodes);
-					codes.scrollTop = 0;
-				}
-			}
-		});
-	});
+    for (var i = 0; i < _secret.length; i++) {
+        if (deleteIdList.indexOf(i) != -1) {
+            _secret[i] = null;
+        }
+    }
+    _secret = sortCode();
+    chrome.storage.sync.remove(deleteKeyList, function () {
+        deleteIdList = [];
+        deleteKeyList = [];
+        chrome.storage.sync.get(function (secret) {
+            var changeSecret = {};
+            for (var i = 0; i < _secret.length; i++) {
+                if (secret[_secret[i].secret] && (secret[_secret[i].secret].index != _secret[i].index ||
+                        secret[_secret[i].secret].account != _secret[i].account ||
+                        secret[_secret[i].secret].issuer != _secret[i].issuer) ||
+                    secret[CryptoJS.MD5(_secret[i].secret)] && (secret[CryptoJS.MD5(_secret[i].secret)].index != _secret[i].index ||
+                        secret[CryptoJS.MD5(_secret[i].secret)].account != _secret[i].account ||
+                        secret[CryptoJS.MD5(_secret[i].secret)].issuer != _secret[i].issuer)) {
+                    changeSecret[CryptoJS.MD5(_secret[i].secret)] = _secret[i];
+                    if (decodedPhrase) {
+                        changeSecret[CryptoJS.MD5(_secret[i].secret)].secret = CryptoJS.AES.encrypt(_secret[i].secret, decodedPhrase).toString();
+                    }
+                }
+            }
+            if (changeSecret) {
+                chrome.storage.sync.set(changeSecret, function () {
+                    if (callback) {
+                        callback();
+                    } else {
+                        chrome.storage.sync.get(showCodes);
+                        codes.scrollTop = 0;
+                    }
+                });
+            } else {
+                if (callback) {
+                    callback();
+                } else {
+                    chrome.storage.sync.get(showCodes);
+                    codes.scrollTop = 0;
+                }
+            }
+        });
+    });
 }
 
 function saveSecret() {
-	var account = document.getElementById('account_input').value;
-	var secret = document.getElementById('secret_input').value;
-	var type = document.getElementById('totp').checked ? 'totp' : 'hotp';
-	if (!account || !secret) {
-		showMessage(chrome.i18n.getMessage('err_acc_sec'));
-		return;
-	}
-	updateSecret(function () {
-		chrome.storage.sync.get(function (result) {
-			var index = Object.keys(result).length;
-			var addSecret = {};
-			if (decodedPhrase) {
-				addSecret[CryptoJS.MD5(secret)] = {
-					account : account,
-					issuer : '',
-					type : type,
-					secret : CryptoJS.AES.encrypt(secret, decodedPhrase).toString(),
-					index : index,
-					encrypted : true
-				}
-			} else {
-				addSecret[CryptoJS.MD5(secret)] = {
-					account : account,
-					issuer : '',
-					type : type,
-					secret : secret,
-					index : index
-				}
-			}
-			if ('hotp' === type) {
-				addSecret[CryptoJS.MD5(secret)].counter = 0;
-			}
-			chrome.storage.sync.set(addSecret);
-			document.getElementById('infoAction').className = '';
-			document.getElementById('addAccount').className = '';
-			document.getElementById('addAccount').style.opacity = 0;
-			document.getElementById('account_input').value = '';
-			document.getElementById('secret_input').value = '';
-			document.getElementById('editAction').setAttribute('edit', 'false');
-			document.getElementById('editAction').innerHTML = '<i class="fa fa-pencil"></i>';
-			chrome.storage.sync.get(showCodes);
-		});
-	});
+    var account = document.getElementById('account_input').value;
+    var secret = document.getElementById('secret_input').value;
+    var type = document.getElementById('totp').checked ? 'totp' : 'hotp';
+    if (!account || !secret) {
+        showMessage(chrome.i18n.getMessage('err_acc_sec'));
+        return;
+    }
+    updateSecret(function () {
+        chrome.storage.sync.get(function (result) {
+            var index = Object.keys(result).length;
+            var addSecret = {};
+            if (decodedPhrase) {
+                addSecret[CryptoJS.MD5(secret)] = {
+                    account : account,
+                    issuer : '',
+                    type : type,
+                    secret : CryptoJS.AES.encrypt(secret, decodedPhrase).toString(),
+                    index : index,
+                    encrypted : true
+                }
+            } else {
+                addSecret[CryptoJS.MD5(secret)] = {
+                    account : account,
+                    issuer : '',
+                    type : type,
+                    secret : secret,
+                    index : index
+                }
+            }
+            if ('hotp' === type) {
+                addSecret[CryptoJS.MD5(secret)].counter = 0;
+            }
+            chrome.storage.sync.set(addSecret);
+            document.getElementById('infoAction').className = '';
+            document.getElementById('addAccount').className = '';
+            document.getElementById('addAccount').style.opacity = 0;
+            document.getElementById('account_input').value = '';
+            document.getElementById('secret_input').value = '';
+            document.getElementById('editAction').setAttribute('edit', 'false');
+            document.getElementById('editAction').innerHTML = '<i class="fa fa-pencil"></i>';
+            chrome.storage.sync.get(showCodes);
+        });
+    });
 }
 
 function beginCapture(preventEdit) {
-	capturing = !!preventEdit;
-	chrome.tabs.query({
-		active : true,
-		lastFocusedWindow : true
-	}, function (tabs) {
-		var tab = tabs[0];
-		chrome.tabs.sendMessage(tab.id, {
-			action : 'capture'
-		}, function (result) {
-			if (result !== 'beginCapture') {
-				showMessage(chrome.i18n.getMessage('capture_failed'));
-			} else {
-				updateSecret(function () {
-					window.close();
-				});
-			}
-		});
-	});
+    capturing = !!preventEdit;
+    chrome.tabs.query({
+        active : true,
+        lastFocusedWindow : true
+    }, function (tabs) {
+        var tab = tabs[0];
+        chrome.tabs.sendMessage(tab.id, {
+            action : 'capture'
+        }, function (result) {
+            if (result !== 'beginCapture') {
+                showMessage(chrome.i18n.getMessage('capture_failed'));
+            } else {
+                updateSecret(function () {
+                    window.close();
+                });
+            }
+        });
+    });
 }
 
 function startMoveBox(e) {
-	dragBox = this;
-	e.dataTransfer.effectAllowed = 'move';
+    dragBox = this;
+    e.dataTransfer.effectAllowed = 'move';
 }
 
 function enterBox() {
-	this.setAttribute('dropOver', 'true');
+    this.setAttribute('dropOver', 'true');
 }
 
 function leaveBox() {
-	this.removeAttribute('dropOver');
+    this.removeAttribute('dropOver');
 }
 
 function dropBox(e) {
-	if (dragBox != this) {
-		var tmpId = this.id;
-		var tmpHtml = this.innerHTML;
-		this.id = dragBox.id;
-		this.innerHTML = dragBox.innerHTML;
-		dragBox.id = tmpId;
-		dragBox.innerHTML = tmpHtml;
-	}
-	this.removeAttribute('dropOver');
-	return false;
+    if (dragBox != this) {
+        var tmpId = this.id;
+        var tmpHtml = this.innerHTML;
+        this.id = dragBox.id;
+        this.innerHTML = dragBox.innerHTML;
+        dragBox.id = tmpId;
+        dragBox.innerHTML = tmpHtml;
+    }
+    this.removeAttribute('dropOver');
+    return false;
 }
 
 function endMoveBox() {
-	var deleteAction = document.getElementsByClassName('deleteAction');
-	for (var i = 0; i < deleteAction.length; i++) {
-		deleteAction[i].onclick = deleteCode;
-	}
-	var showQrAction = document.getElementsByClassName('showqr');
-	for (var i = 0; i < showQrAction.length; i++) {
-		showQrAction[i].onclick = showQr;
-	}
+    var deleteAction = document.getElementsByClassName('deleteAction');
+    for (var i = 0; i < deleteAction.length; i++) {
+        deleteAction[i].onclick = deleteCode;
+    }
+    var showQrAction = document.getElementsByClassName('showqr');
+    for (var i = 0; i < showQrAction.length; i++) {
+        showQrAction[i].onclick = showQr;
+    }
 }
 
 function overBox(e) {
-	e.dataTransfer.dropEffect = 'move';
-	return false;
+    e.dataTransfer.dropEffect = 'move';
+    return false;
 }
 
 function editCodes() {
-	clearTimeout(editTimeout);
-	if (capturing) {
-		capturing = false;
-		return;
-	}
-	var codes = document.getElementById('codes');
-	if (this.getAttribute('edit') == 'false') {
-		document.getElementById('infoAction').className = 'hidden';
-		clearInterval(updateInterval);
-		codes.className = 'edit';
-		this.setAttribute('edit', 'true');
-		this.innerHTML = '<i class="fa fa-check"></i>';
-		var code = document.getElementsByClassName('code');
-		var codeBox = document.getElementsByClassName('codeBox');
-		for (var i = 0; i < code.length; i++) {
-			var bulls = ''
-				for (var b = 0; b < code[i].innerText.length; b++) {
-					bulls += '&bull;'
-				}
-				code[i].innerHTML = bulls;
-			codeBox[i].draggable = 'true';
-			codeBox[i].ondragstart = startMoveBox;
-			codeBox[i].ondragenter = enterBox;
-			codeBox[i].ondragleave = leaveBox;
-			codeBox[i].ondragover = overBox;
-			codeBox[i].ondrop = dropBox;
-			codeBox[i].ondragend = endMoveBox;
-		}
-		codes.scrollTop = codes.scrollHeight;
-	} else {
-		document.getElementById('infoAction').className = '';
-		codes.className = '';
-		this.setAttribute('edit', 'false');
-		this.innerHTML = '<i class="fa fa-pencil"></i>';
-		clearInterval(updateInterval);
-		updateSecret();
-	}
+    clearTimeout(editTimeout);
+    if (capturing) {
+        capturing = false;
+        return;
+    }
+    var codes = document.getElementById('codes');
+    if (this.getAttribute('edit') == 'false') {
+        document.getElementById('infoAction').className = 'hidden';
+        clearInterval(updateInterval);
+        codes.className = 'edit';
+        this.setAttribute('edit', 'true');
+        this.innerHTML = '<i class="fa fa-check"></i>';
+        var code = document.getElementsByClassName('code');
+        var codeBox = document.getElementsByClassName('codeBox');
+        for (var i = 0; i < code.length; i++) {
+            var bulls = ''
+                for (var b = 0; b < code[i].innerText.length; b++) {
+                    bulls += '&bull;'
+                }
+                code[i].innerHTML = bulls;
+            codeBox[i].draggable = 'true';
+            codeBox[i].ondragstart = startMoveBox;
+            codeBox[i].ondragenter = enterBox;
+            codeBox[i].ondragleave = leaveBox;
+            codeBox[i].ondragover = overBox;
+            codeBox[i].ondrop = dropBox;
+            codeBox[i].ondragend = endMoveBox;
+        }
+        codes.scrollTop = codes.scrollHeight;
+    } else {
+        document.getElementById('infoAction').className = '';
+        codes.className = '';
+        this.setAttribute('edit', 'false');
+        this.innerHTML = '<i class="fa fa-pencil"></i>';
+        clearInterval(updateInterval);
+        updateSecret();
+    }
 }
 
 function sortCode() {
-	var codeBox = document.getElementsByClassName('codeBox');
-	var newSecret = [];
-	for (var index = 0, i = 0; i < codeBox.length; i++) {
-		if (_secret[Number(codeBox[i].id.substr(8))] === null) {
-			continue;
-		}
-		_secret[Number(codeBox[i].id.substr(8))].index = index;
-		newSecret.push(_secret[Number(codeBox[i].id.substr(8))]);
-		index++;
-	}
-	return newSecret;
+    var codeBox = document.getElementsByClassName('codeBox');
+    var newSecret = [];
+    for (var index = 0, i = 0; i < codeBox.length; i++) {
+        if (_secret[Number(codeBox[i].id.substr(8))] === null) {
+            continue;
+        }
+        _secret[Number(codeBox[i].id.substr(8))].index = index;
+        newSecret.push(_secret[Number(codeBox[i].id.substr(8))]);
+        index++;
+    }
+    return newSecret;
 }
 
 function deleteCode() {
-	var codeId = this.getAttribute('codeId');
-	var key = this.getAttribute('key');
-	codeId = Number(codeId);
-	deleteIdList.push(codeId);
-	deleteKeyList.push(key);
-	document.getElementById('codeBox-' + codeId).style.display = 'none';
+    var codeId = this.getAttribute('codeId');
+    var key = this.getAttribute('key');
+    codeId = Number(codeId);
+    deleteIdList.push(codeId);
+    deleteKeyList.push(key);
+    document.getElementById('codeBox-' + codeId).style.display = 'none';
 }
 
 function updateCode() {
-	for (var i = 0; i < _secret.length; i++) {
-		if (!_secret[i].secret) {
-			document.getElementById('code-' + i).innerText = chrome.i18n.getMessage('encrypted');
-			if (!shownPassphrase) {
-				shownPassphrase = true;
-				document.getElementById('passphrase').className = 'fadein';
-				setTimeout(function () {
-					document.getElementById('passphrase').style.opacity = 1;
-				}, 200);
-			}
-		} else if (_secret[i].type !== 'hotp') {
-			document.getElementById('code-' + i).innerText = getCode(_secret[i].secret);
-		}
-	}
+    for (var i = 0; i < _secret.length; i++) {
+        if (!_secret[i].secret) {
+            document.getElementById('code-' + i).innerText = chrome.i18n.getMessage('encrypted');
+            if (!shownPassphrase) {
+                shownPassphrase = true;
+                document.getElementById('passphrase').className = 'fadein';
+                setTimeout(function () {
+                    document.getElementById('passphrase').style.opacity = 1;
+                }, 200);
+            }
+        } else if (_secret[i].type !== 'hotp') {
+            document.getElementById('code-' + i).innerText = getCode(_secret[i].secret);
+        }
+    }
 }
 
 function update() {
-	getSector();
-	var second = new Date().getSeconds();
-	if (localStorage.offset) {
-		second += Number(localStorage.offset) + 30;
-	}
-	second = second % 30;
-	if (second > 25) {
-		document.getElementById('codes').className = 'timeout';
-	} else {
-		document.getElementById('codes').className = '';
-	}
-	if (second < 1) {
-		updateCode();
-	}
+    getSector();
+    var second = new Date().getSeconds();
+    if (localStorage.offset) {
+        second += Number(localStorage.offset) + 30;
+    }
+    second = second % 30;
+    if (second > 25) {
+        document.getElementById('codes').className = 'timeout';
+    } else {
+        document.getElementById('codes').className = '';
+    }
+    if (second < 1) {
+        updateCode();
+    }
 }
 
 function getSector() {
-	var second = new Date().getSeconds();
-	if (localStorage.offset) {
-		second += Number(localStorage.offset) + 30;
-	}
-	second = second % 30;
-	var canvas = document.getElementById('sector');
-	var ctx = canvas.getContext('2d');
-	ctx.clearRect(0, 0, 40, 40);
-	ctx.fillStyle = '#888';
-	sector(ctx, 20, 20, Math.PI / 180 * second / 30 * 360, Math.PI / 180 * (1 - second / 30) * 360, 16, 0, true);
-	var url = canvas.toDataURL();
-	var sectors = document.getElementsByClassName('sector');
-	for (var i = 0; i < sectors.length; i++) {
-		sectors[i].style.background = 'url(' + url + ') center / 20px 20px';
-	}
+    var second = new Date().getSeconds();
+    if (localStorage.offset) {
+        second += Number(localStorage.offset) + 30;
+    }
+    second = second % 30;
+    var canvas = document.getElementById('sector');
+    var ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, 40, 40);
+    ctx.fillStyle = '#888';
+    sector(ctx, 20, 20, Math.PI / 180 * second / 30 * 360, Math.PI / 180 * (1 - second / 30) * 360, 16, 0, true);
+    var url = canvas.toDataURL();
+    var sectors = document.getElementsByClassName('sector');
+    for (var i = 0; i < sectors.length; i++) {
+        sectors[i].style.background = 'url(' + url + ') center / 20px 20px';
+    }
 }
 
 function showCodes(result) {
-	document.getElementById('codeList').innerHTML = '';
-	if (result && result.secret) {
-		result = changeDataForm(result);
-	}
-	if (!result && !_secret) {
-		return false;
-	} else {
-		result = changeDataSub2Md5(result);
-		if (result) {
-			_secret = [];
-			for (var i in result) {
-				if (result[i].encrypted) {
-					if (decodedPhrase) {
-						try {
-							result[i].secret = CryptoJS.AES.decrypt(result[i].secret, decodedPhrase).toString(CryptoJS.enc.Utf8);
-						} catch (e) {
-							result[i].secret = '';
-						}
-					} else {
-						result[i].secret = '';
-					}
-				}
-				result[i].hash = i;
-				_secret.push(result[i]);
-			}
-			_secret.sort(function (a, b) {
-				return a.index - b.index;
-			});
-		}
-		document.getElementById('infoAction').className = '';
-		document.getElementById('editAction').setAttribute('edit', 'false');
-		document.getElementById('editAction').innerHTML = '<i class="fa fa-pencil"></i>';
-		for (var i = 0; i < _secret.length; i++) {
-			try {
-				_secret[i].issuer = decodeURIComponent(_secret[i].issuer);
-			} catch (e) {}
-			try {
-				_secret[i].account = decodeURIComponent(_secret[i].account);
-			} catch (e) {}
-			var el = document.createElement('div');
-			el.id = 'codeBox-' + i;
-			el.className = 'codeBox';
-			el.innerHTML = '<div class="deleteAction" codeId="' + i + '" key="' + _secret[i].hash + '"><i class="fa fa-minus-circle"></i></div>' +
-				('hotp' === _secret[i].type ? '<div codeId="' + i + '" class="counter"><i class="fa fa-refresh"></i></div>' : '<div class="sector"></div>') +
-				(_secret[i].issuer ? ('<div class="issuer">' + _secret[i].issuer + '</div>') : '') +
-				'<div class="issuerEdit"><input class="issuerEditBox" type="text" codeId="' + i + '" value="' + (_secret[i].issuer ? _secret[i].issuer : '') + '" /></div>' +
-				'<div class="code' + ('hotp' === _secret[i].type ? ' hotp' : '') + '" id="code-' + i + '">&bull;&bull;&bull;&bull;&bull;&bull;</div>' +
-				'<div class="account">' + _secret[i].account + '</div>' +
-				'<div class="accountEdit"><input class="accountEditBox" type="text" codeId="' + i + '" value="' + _secret[i].account + '" /></div>' +
-				'<div id="showqr-' + i + '" class="showqr"><i class="fa fa-qrcode"></i></div>' +
-				'<div class="movehandle"><i class="fa fa-bars"></i></div>';
-			document.getElementById('codeList').appendChild(el);
-			if (!_secret[i].encrypted) {
-				el.setAttribute('unencrypted', 'true');
-				var warning = document.createElement('div');
-				warning.className = 'warning';
-				warning.innerText = chrome.i18n.getMessage('unencrypted_secret_warning');
-				warning.onclick = function () {
-					document.getElementById('security').className = 'fadein';
-					setTimeout(function () {
-						document.getElementById('security').style.opacity = 1;
-					}, 200);
-				};
-				el.appendChild(warning);
-			}
-
-		}
-		var codeCopy = document.getElementsByClassName('code');
-		for (var i = 0; i < codeCopy.length; i++) {
-			codeCopy[i].onclick = copyCode;
-		}
-		var deleteAction = document.getElementsByClassName('deleteAction');
-		for (var i = 0; i < deleteAction.length; i++) {
-			deleteAction[i].onclick = deleteCode;
-		}
-		var showQrAction = document.getElementsByClassName('showqr');
-		for (var i = 0; i < showQrAction.length; i++) {
-			showQrAction[i].onclick = showQr;
-		}
-		var counterAction = document.getElementsByClassName('counter');
-		for (var i = 0; i < counterAction.length; i++) {
-			counterAction[i].onclick = getNewHotpCode;
-		}
-		var accountEditBox = document.getElementsByClassName('accountEditBox');
-		for (var i = 0; i < accountEditBox.length; i++) {
-			accountEditBox[i].onblur = saveAccount;
-		}
-		var issuerEditBox = document.getElementsByClassName('issuerEditBox');
-		for (var i = 0; i < issuerEditBox.length; i++) {
-			issuerEditBox[i].onblur = saveIssuer;
-		}
-		updateCode();
-		update();
-		clearInterval(updateInterval);
-		updateInterval = setInterval(update, 500);
-	}
+    document.getElementById('codeList').innerHTML = '';
+    if (result && result.secret) {
+        result = changeDataForm(result);
+    }
+    if (!result && !_secret) {
+        return false;
+    } else {
+        result = changeDataSub2Md5(result);
+        if (result) {
+            _secret = [];
+            for (var i in result) {
+                if (result[i].encrypted) {
+                    if (decodedPhrase) {
+                        try {
+                            result[i].secret = CryptoJS.AES.decrypt(result[i].secret, decodedPhrase).toString(CryptoJS.enc.Utf8);
+                        } catch (e) {
+                            result[i].secret = '';
+                        }
+                    } else {
+                        result[i].secret = '';
+                    }
+                }
+                result[i].hash = i;
+                _secret.push(result[i]);
+            }
+            _secret.sort(function (a, b) {
+                return a.index - b.index;
+            });
+        }
+        document.getElementById('infoAction').className = '';
+        document.getElementById('editAction').setAttribute('edit', 'false');
+        document.getElementById('editAction').innerHTML = '<i class="fa fa-pencil"></i>';
+        for (var i = 0; i < _secret.length; i++) {
+            try {
+                _secret[i].issuer = decodeURIComponent(_secret[i].issuer);
+            } catch (e) {}
+            try {
+                _secret[i].account = decodeURIComponent(_secret[i].account);
+            } catch (e) {}
+            var el = document.createElement('div');
+            el.id = 'codeBox-' + i;
+            el.className = 'codeBox';
+            el.innerHTML = '<div class="deleteAction" codeId="' + i + '" key="' + _secret[i].hash + '"><i class="fa fa-minus-circle"></i></div>' +
+                ('hotp' === _secret[i].type ? '<div codeId="' + i + '" class="counter"><i class="fa fa-repeat"></i></div>' : '<div class="sector"></div>') +
+                (_secret[i].issuer ? ('<div class="issuer">' + _secret[i].issuer + '</div>') : '') +
+                '<div class="issuerEdit"><input class="issuerEditBox" type="text" codeId="' + i + '" value="' + (_secret[i].issuer ? _secret[i].issuer : '') + '" /></div>' +
+                '<div class="code' + ('hotp' === _secret[i].type ? ' hotp' : '') + '" id="code-' + i + '">&bull;&bull;&bull;&bull;&bull;&bull;</div>' +
+                '<div class="account">' + _secret[i].account + '</div>' +
+                '<div class="accountEdit"><input class="accountEditBox" type="text" codeId="' + i + '" value="' + _secret[i].account + '" /></div>' +
+                '<div id="showqr-' + i + '" class="showqr"><i class="fa fa-qrcode"></i></div>' +
+                '<div class="movehandle"><i class="fa fa-bars"></i></div>';
+            document.getElementById('codeList').appendChild(el);
+            if (!_secret[i].encrypted) {
+                el.setAttribute('unencrypted', 'true');
+                var warning = document.createElement('div');
+                warning.className = 'warning';
+                warning.innerText = chrome.i18n.getMessage('unencrypted_secret_warning');
+                warning.onclick = function () {
+                    document.getElementById('security').className = 'fadein';
+                    setTimeout(function () {
+                        document.getElementById('security').style.opacity = 1;
+                    }, 200);
+                };
+                el.appendChild(warning);
+            }
+
+        }
+        var codeCopy = document.getElementsByClassName('code');
+        for (var i = 0; i < codeCopy.length; i++) {
+            codeCopy[i].onclick = copyCode;
+        }
+        var deleteAction = document.getElementsByClassName('deleteAction');
+        for (var i = 0; i < deleteAction.length; i++) {
+            deleteAction[i].onclick = deleteCode;
+        }
+        var showQrAction = document.getElementsByClassName('showqr');
+        for (var i = 0; i < showQrAction.length; i++) {
+            showQrAction[i].onclick = showQr;
+        }
+        var counterAction = document.getElementsByClassName('counter');
+        for (var i = 0; i < counterAction.length; i++) {
+            counterAction[i].onclick = getNewHotpCode;
+        }
+        var accountEditBox = document.getElementsByClassName('accountEditBox');
+        for (var i = 0; i < accountEditBox.length; i++) {
+            accountEditBox[i].onblur = saveAccount;
+        }
+        var issuerEditBox = document.getElementsByClassName('issuerEditBox');
+        for (var i = 0; i < issuerEditBox.length; i++) {
+            issuerEditBox[i].onblur = saveIssuer;
+        }
+        updateCode();
+        update();
+        clearInterval(updateInterval);
+        updateInterval = setInterval(update, 500);
+    }
 }
 
 function saveAccount() {
-	var codeId = this.getAttribute('codeId');
-	var s = this.value;
-	s = s.replace(/&/g, "&amp;");
-	s = s.replace(/</g, "&lt;");
-	s = s.replace(/>/g, "&gt;");
-	s = s.replace(/ /g, "&nbsp;");
-	s = s.replace(/\'/g, "&#39;");
-	s = s.replace(/\"/g, "&quot;");
-	_secret[codeId].account = s;
+    var codeId = this.getAttribute('codeId');
+    var s = this.value;
+    s = s.replace(/&/g, "&amp;");
+    s = s.replace(/</g, "&lt;");
+    s = s.replace(/>/g, "&gt;");
+    s = s.replace(/ /g, "&nbsp;");
+    s = s.replace(/\'/g, "&#39;");
+    s = s.replace(/\"/g, "&quot;");
+    _secret[codeId].account = s;
 }
 
 function saveIssuer() {
-	var codeId = this.getAttribute('codeId');
-	var s = this.value;
-	s = s.replace(/&/g, "&amp;");
-	s = s.replace(/</g, "&lt;");
-	s = s.replace(/>/g, "&gt;");
-	s = s.replace(/ /g, "&nbsp;");
-	s = s.replace(/\'/g, "&#39;");
-	s = s.replace(/\"/g, "&quot;");
-	_secret[codeId].issuer = s;
+    var codeId = this.getAttribute('codeId');
+    var s = this.value;
+    s = s.replace(/&/g, "&amp;");
+    s = s.replace(/</g, "&lt;");
+    s = s.replace(/>/g, "&gt;");
+    s = s.replace(/ /g, "&nbsp;");
+    s = s.replace(/\'/g, "&#39;");
+    s = s.replace(/\"/g, "&quot;");
+    _secret[codeId].issuer = s;
 }
 
 function changeDataForm(result) {
-	var secret = result.secret;
-	var newResult = {};
-	for (var i = 0; i < secret.length; i++) {
-		newResult[secret[i].secret] = secret[i];
-		newResult[secret[i].secret].index = i;
-	}
-	chrome.storage.sync.set(newResult);
-	chrome.storage.sync.remove('secret');
-	return newResult;
+    var secret = result.secret;
+    var newResult = {};
+    for (var i = 0; i < secret.length; i++) {
+        newResult[secret[i].secret] = secret[i];
+        newResult[secret[i].secret].index = i;
+    }
+    chrome.storage.sync.set(newResult);
+    chrome.storage.sync.remove('secret');
+    return newResult;
 }
 
 function changeDataSub2Md5(result) {
-	var modified = false;
-	for (i in result) {
-		if (i == result[i].secret) {
-			modified = true;
-			result[CryptoJS.MD5(i)] = result[i];
-			delete result[i];
-			chrome.storage.sync.remove(i);
-		}
-	}
-	if (modified) {
-		chrome.storage.sync.set(result);
-	}
-	return result;
+    var modified = false;
+    for (i in result) {
+        if (i == result[i].secret) {
+            modified = true;
+            result[CryptoJS.MD5(i)] = result[i];
+            delete result[i];
+            chrome.storage.sync.remove(i);
+        }
+    }
+    if (modified) {
+        chrome.storage.sync.set(result);
+    }
+    return result;
 }
 
 function showQr() {
-	var codeId = this.id.substr(7);
-	codeId = Number(codeId);
-	var secret = _secret[codeId];
-	var label = secret.issuer ? (secret.issuer + ':' + secret.account) : secret.account;
-	var otpauth = 'otpauth://' + (secret.type || 'totp') + '/' + label + '?secret=' + secret.secret + (secret.issuer ? ('&issuer=' + secret.issuer) : '') + (('hotp' === secret.type && secret.counter) ? ('&counter=' + secret.counter) : '');
-	var qrcode = new QRCode('qr', {
-			text : otpauth,
-			width : 128,
-			height : 128,
-			colorDark : '#000000',
-			colorLight : '#ffffff',
-			correctLevel : QRCode.CorrectLevel.L
-		}, function (qrUrl) {
-			document.getElementById('qr').style.backgroundImage = 'url(' + qrUrl + ')';
-			document.getElementById('qr').className = 'qrfadein';
-			setTimeout(function () {
-				document.getElementById('qr').style.opacity = 1;
-			}, 200);
-		});
+    var codeId = this.id.substr(7);
+    codeId = Number(codeId);
+    var secret = _secret[codeId];
+    var label = secret.issuer ? (secret.issuer + ':' + secret.account) : secret.account;
+    var otpauth = 'otpauth://' + (secret.type || 'totp') + '/' + label + '?secret=' + secret.secret + (secret.issuer ? ('&issuer=' + secret.issuer) : '') + (('hotp' === secret.type && secret.counter) ? ('&counter=' + secret.counter) : '');
+    var qrcode = new QRCode('qr', {
+            text : otpauth,
+            width : 128,
+            height : 128,
+            colorDark : '#000000',
+            colorLight : '#ffffff',
+            correctLevel : QRCode.CorrectLevel.L
+        }, function (qrUrl) {
+            document.getElementById('qr').style.backgroundImage = 'url(' + qrUrl + ')';
+            document.getElementById('qr').className = 'qrfadein';
+            setTimeout(function () {
+                document.getElementById('qr').style.opacity = 1;
+            }, 200);
+        });
 }
 
 function showExport() {
-	document.getElementById('export').className = 'fadein';
-	setTimeout(function () {
-		document.getElementById('export').style.opacity = 1;
-		chrome.storage.sync.get(function (data) {
-			document.getElementById('exportData').value = JSON.stringify(data);
-		});
-	}, 200);
+    document.getElementById('export').className = 'fadein';
+    setTimeout(function () {
+        document.getElementById('export').style.opacity = 1;
+        chrome.storage.sync.get(function (data) {
+            document.getElementById('exportData').value = JSON.stringify(data);
+        });
+    }, 200);
 }
 
 function copyCode() {
-	var code = this.innerText;
-	if ('Encrypted' == code) {
-		document.getElementById('passphrase').className = 'fadein';
-		setTimeout(function () {
-			document.getElementById('passphrase').style.opacity = 1;
-		}, 200);
-		return;
-	} else if (!/^\d+$/.test(code)) {
-		return;
-	}
-	chrome.permissions.request({
-		permissions : ['clipboardWrite']
-	}, function (granted) {
-		if (granted) {
-			var codeClipboard = document.getElementById('codeClipboard');
-			codeClipboard.value = code;
-			codeClipboard.focus();
-			codeClipboard.select();
-			document.execCommand('Copy');
-			showNotification(chrome.i18n.getMessage('copied'));
-		}
-	});
+    var code = this.innerText;
+    if ('Encrypted' == code) {
+        document.getElementById('passphrase').className = 'fadein';
+        setTimeout(function () {
+            document.getElementById('passphrase').style.opacity = 1;
+        }, 200);
+        return;
+    } else if (!/^\d+$/.test(code)) {
+        return;
+    }
+    chrome.permissions.request({
+        permissions : ['clipboardWrite']
+    }, function (granted) {
+        if (granted) {
+            var codeClipboard = document.getElementById('codeClipboard');
+            codeClipboard.value = code;
+            codeClipboard.focus();
+            codeClipboard.select();
+            document.execCommand('Copy');
+            showNotification(chrome.i18n.getMessage('copied'));
+        }
+    });
 }
 
 function encryptSecret(phrase, updatePhrase, success, fail) {
-	var errorPhrase = false;
-	var decryptedSecret;
-	chrome.storage.sync.get(function (result) {
-		for (var i in result) {
-			decryptedSecret = '';
-			if (result[i].encrypted && decodedPhrase) {
-				try {
-					decryptedSecret = CryptoJS.AES.decrypt(result[i].secret, decodedPhrase).toString(CryptoJS.enc.Utf8);
-				} catch (e) {
-					decryptedSecret = '';
-				}
-				if (decryptedSecret) {
-					result[i].secret = decryptedSecret;
-				} else if (updatePhrase) {
-					errorPhrase = true;
-					continue;
-				}
-			}
-			if (result[i].encrypted && !decryptedSecret && !updatePhrase) {
-				try {
-					decryptedSecret = CryptoJS.AES.decrypt(result[i].secret, phrase).toString(CryptoJS.enc.Utf8);
-				} catch (e) {
-					decryptedSecret = '';
-				}
-				if (decryptedSecret) {
-					result[i].secret = decryptedSecret;
-				} else {
-					errorPhrase = true;
-					continue;
-				}
-			}
-			if (phrase && decodedPhrase) {
-				result[i].secret = CryptoJS.AES.encrypt(result[i].secret, updatePhrase ? phrase : decodedPhrase).toString();
-				result[i].encrypted = true;
-			} else if (phrase && !decodedPhrase) {
-				result[i].secret = CryptoJS.AES.encrypt(result[i].secret, phrase).toString();
-				result[i].encrypted = true;
-			} else {
-				result[i].encrypted = false;
-			}
-		}
-		if (updatePhrase || !decodedPhrase) {
-			decodedPhrase = phrase;
-			if (localStorage.notRememberPassphrase === 'true') {
-				document.cookie = 'passphrase=' + CryptoJS.AES.encrypt(phrase, '').toString();
-				localStorage.removeItem('encodedPhrase');
-			} else {
-				localStorage.encodedPhrase = CryptoJS.AES.encrypt(phrase, '').toString();
-			}
-		}
-		chrome.storage.sync.set(result);
-		showCodes(result);
-		if (errorPhrase && fail) {
-			fail();
-		} else if (success) {
-			success();
-		}
-	});
+    var errorPhrase = false;
+    var decryptedSecret;
+    chrome.storage.sync.get(function (result) {
+        for (var i in result) {
+            decryptedSecret = '';
+            if (result[i].encrypted && decodedPhrase) {
+                try {
+                    decryptedSecret = CryptoJS.AES.decrypt(result[i].secret, decodedPhrase).toString(CryptoJS.enc.Utf8);
+                } catch (e) {
+                    decryptedSecret = '';
+                }
+                if (decryptedSecret) {
+                    result[i].secret = decryptedSecret;
+                } else if (updatePhrase) {
+                    errorPhrase = true;
+                    continue;
+                }
+            }
+            if (result[i].encrypted && !decryptedSecret && !updatePhrase) {
+                try {
+                    decryptedSecret = CryptoJS.AES.decrypt(result[i].secret, phrase).toString(CryptoJS.enc.Utf8);
+                } catch (e) {
+                    decryptedSecret = '';
+                }
+                if (decryptedSecret) {
+                    result[i].secret = decryptedSecret;
+                } else {
+                    errorPhrase = true;
+                    continue;
+                }
+            }
+            if (phrase && decodedPhrase) {
+                result[i].secret = CryptoJS.AES.encrypt(result[i].secret, updatePhrase ? phrase : decodedPhrase).toString();
+                result[i].encrypted = true;
+            } else if (phrase && !decodedPhrase) {
+                result[i].secret = CryptoJS.AES.encrypt(result[i].secret, phrase).toString();
+                result[i].encrypted = true;
+            } else {
+                result[i].encrypted = false;
+            }
+        }
+        if (updatePhrase || !decodedPhrase) {
+            decodedPhrase = phrase;
+            if (localStorage.notRememberPassphrase === 'true') {
+                document.cookie = 'passphrase=' + CryptoJS.AES.encrypt(phrase, '').toString();
+                localStorage.removeItem('encodedPhrase');
+            } else {
+                localStorage.encodedPhrase = CryptoJS.AES.encrypt(phrase, '').toString();
+            }
+        }
+        chrome.storage.sync.set(result);
+        showCodes(result);
+        if (errorPhrase && fail) {
+            fail();
+        } else if (success) {
+            success();
+        }
+    });
 }
 
 function showNotification(message) {
-	var notification = document.getElementById('notification');
-	notification.innerText = message;
-	notification.className = 'fadein';
-	clearTimeout(notificationTimeout);
-	notificationTimeout = setTimeout(function () {
-			notification.className = 'fadeout';
-			setTimeout(function () {
-				notification.className = '';
-			}, 200);
-		}, 1000);
+    var notification = document.getElementById('notification');
+    notification.innerText = message;
+    notification.className = 'fadein';
+    clearTimeout(notificationTimeout);
+    notificationTimeout = setTimeout(function () {
+            notification.className = 'fadeout';
+            setTimeout(function () {
+                notification.className = '';
+            }, 200);
+        }, 1000);
 }
 
 function syncTimeWithGoogle(showStatusBox) {
-	var xhr = new XMLHttpRequest();
-	xhr.open('HEAD', 'https://www.google.com/');
-	var xhrAbort = setTimeout(function () {
-			xhr.abort();
-			if (showStatusBox) {
-				showMessage(chrome.i18n.getMessage('updateFailure'));
-			}
-		}, 5000);
-	xhr.onreadystatechange = function () {
-		if (xhr.readyState == 4) {
-			clearTimeout(xhrAbort);
-			var serverTime = new Date(xhr.getResponseHeader('date'));
-			serverTime = serverTime.getTime();
-			var clientTime = new Date();
-			clientTime = clientTime.getTime();
-			var offset = Math.round((serverTime - clientTime) / 1000);
-			if (!serverTime) {
-				if (showStatusBox) {
-					showMessage(chrome.i18n.getMessage('updateFailure'));
-				}
-			} else if (Math.abs(offset) <= 300) { // within 5 minutes
-				localStorage.offset = Math.round((serverTime - clientTime) / 1000);
-				if (showStatusBox) {
-					showMessage(chrome.i18n.getMessage('updateSuccess'));
-				}
-			} else {
-				showMessage(chrome.i18n.getMessage('clock_too_far_off'));
-			}
-		}
-	};
-	xhr.send();
+    var xhr = new XMLHttpRequest();
+    xhr.open('HEAD', 'https://www.google.com/');
+    var xhrAbort = setTimeout(function () {
+            xhr.abort();
+            if (showStatusBox) {
+                showMessage(chrome.i18n.getMessage('updateFailure'));
+            }
+        }, 5000);
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState == 4) {
+            clearTimeout(xhrAbort);
+            var serverTime = new Date(xhr.getResponseHeader('date'));
+            serverTime = serverTime.getTime();
+            var clientTime = new Date();
+            clientTime = clientTime.getTime();
+            var offset = Math.round((serverTime - clientTime) / 1000);
+            if (!serverTime) {
+                if (showStatusBox) {
+                    showMessage(chrome.i18n.getMessage('updateFailure'));
+                }
+            } else if (Math.abs(offset) <= 300) { // within 5 minutes
+                localStorage.offset = Math.round((serverTime - clientTime) / 1000);
+                if (showStatusBox) {
+                    showMessage(chrome.i18n.getMessage('updateSuccess'));
+                }
+            } else {
+                showMessage(chrome.i18n.getMessage('clock_too_far_off'));
+            }
+        }
+    };
+    xhr.send();
 }
 
 function getNewHotpCode() {
-	var codeId = this.getAttribute('codeId');
-	if (this.getAttribute('disabled') == 'true') {
-		return;
-	}
-	if (document.getElementById('code-' + codeId).innerText == 'Encrypted') {
-		document.getElementById('passphrase').className = 'fadein';
-		setTimeout(function () {
-			document.getElementById('passphrase').style.opacity = 1;
-		}, 200);
-		return;
-	}
-	this.setAttribute('disabled', 'true');
-	setTimeout(function () {
-		this.removeAttribute('disabled');
-	}
-		.bind(this), 5000);
-	document.getElementById('code-' + codeId).setAttribute('hasCode', 'true');
-	document.getElementById('code-' + codeId).innerText = getCode(_secret[codeId].secret, _secret[codeId].counter);
-	_secret[codeId].counter++;
-	chrome.storage.sync.get(function (secret) {
-		secret[CryptoJS.MD5(_secret[codeId].secret)].counter = _secret[codeId].counter;
-		chrome.storage.sync.set(secret);
-	});
-}
-
-function getZoom() {
-	var zoomList = [25, 33, 50, 67, 75, 90, 100, 110, 125, 150, 175, 200, 250, 300, 400, 500];
-	var zoom = Math.round(((window.outerWidth) / window.innerWidth)*100);
-	var zoomDiff = -1;
-	for (var i = 0; i < zoomList.length; i++) {
-	    if (zoomDiff < 0 || Math.abs(zoom - zoomList[i]) < zoomDiff) {
-	        zoomDiff = Math.abs(zoom - zoomList[i]);
-	    }  else {
-	        zoom = zoomList[i - 1];
-	        break;
-	    }
-	}
-	if (zoomList.indexOf(zoom) === -1) {
-	    zoom = 500;
-	}
-	return zoom;
-}
-
-function rezoom() {
-	var zoom = getZoom();
-	if (zoom > 100) {
-		document.body.style.height = 480 * 100 / zoom + 'px';
-		document.body.style.marginRight = 320 * (100 / zoom - 1) + 'px';
-		document.body.style.transform = 'scale(' + (100 / zoom) + ')';
-	}
+    var codeId = this.getAttribute('codeId');
+    if (this.getAttribute('disabled') == 'true') {
+        return;
+    }
+    if (document.getElementById('code-' + codeId).innerText == 'Encrypted') {
+        document.getElementById('passphrase').className = 'fadein';
+        setTimeout(function () {
+            document.getElementById('passphrase').style.opacity = 1;
+        }, 200);
+        return;
+    }
+    this.setAttribute('disabled', 'true');
+    setTimeout(function () {
+        this.removeAttribute('disabled');
+    }
+        .bind(this), 5000);
+    document.getElementById('code-' + codeId).setAttribute('hasCode', 'true');
+    document.getElementById('code-' + codeId).innerText = getCode(_secret[codeId].secret, _secret[codeId].counter);
+    _secret[codeId].counter++;
+    chrome.storage.sync.get(function (secret) {
+        secret[CryptoJS.MD5(_secret[codeId].secret)].counter = _secret[codeId].counter;
+        chrome.storage.sync.set(secret);
+    });
+}
+
+function resize(zoom) {
+    zoom = Number(zoom);
+    if (zoom !== 100) {
+        document.body.style.marginBottom = 480 * (zoom / 100 - 1) + 'px';
+        document.body.style.marginRight = 320 * (zoom / 100 - 1) + 'px';
+        document.body.style.transform = 'scale(' + (zoom / 100) + ')';
+    }
 }
 
 (function () {
-	var clientTime = new Date();
-	clientTime = Math.floor(clientTime.getTime() / 1000 / 3600 / 24);
-	if (!localStorage.lastRemindingBackupTime) {
-		localStorage.lastRemindingBackupTime = clientTime;
-	} else if (clientTime - localStorage.lastRemindingBackupTime >= 30 || clientTime - localStorage.lastRemindingBackupTime < 0) {
-		showMessage(chrome.i18n.getMessage('remind_backup'));
-		localStorage.lastRemindingBackupTime = clientTime;
-	}
+    // Remind backup
+    var clientTime = new Date();
+    clientTime = Math.floor(clientTime.getTime() / 1000 / 3600 / 24);
+    if (!localStorage.lastRemindingBackupTime) {
+        localStorage.lastRemindingBackupTime = clientTime;
+    } else if (clientTime - localStorage.lastRemindingBackupTime >= 30 || clientTime - localStorage.lastRemindingBackupTime < 0) {
+        showMessage(chrome.i18n.getMessage('remind_backup'));
+        localStorage.lastRemindingBackupTime = clientTime;
+    }
+
+    // Resize
+    var zoom = localStorage.zoom || '100';
+    document.getElementById('resize_list').value = zoom;
+    resize(zoom);
+
+    // Click extension name 5 times to show export box
+    var extName = document.getElementById('extName');
+    var count = 0;
+    var timer;
+    extName.onclick = function () {
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+                count = 0;
+            }, 1000);
+
+        count++;
+        if (count == 5) {
+            count = 0;
+            showExport();
+        }
+    };
 })();
-
-(function () {
-	var extName = document.getElementById('extName');
-	var count = 0;
-	var timer;
-	extName.onclick = function () {
-		clearTimeout(timer);
-		timer = setTimeout(function () {
-				count = 0;
-			}, 1000);
-
-		count++;
-		if (count == 5) {
-			count = 0;
-			showExport();
-		}
-	}
-})();
-
-//setTimeout(rezoom, 200);
diff --git a/manifest.json b/manifest.json
index 6533b87..c1b6f6e 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "__MSG_extName__",
     "short_name": "__MSG_extShortName__",
-    "version": "4.12",
+    "version": "4.13",
     "default_locale": "en",
     "description": "__MSG_extDesc__",
     "icons": {
diff --git a/popup.html b/popup.html
index 2489a6f..4eaab6e 100644
--- a/popup.html
+++ b/popup.html
@@ -30,6 +30,7 @@
 	<p id="menuExImport"><i class="fa fa-exchange"></i></p>
 	<p id="menuSecurity"><i class="fa fa-lock"></i></p>
     <p id="menuSyncTime"><i class="fa fa-refresh"></i></p>
+    <p id="menuResize"><i class="fa fa-expand"></i></p>
 </div>
 <div class="menuList">
 	<p><i class="fa fa-comments-o"></i><a id="menuFeedback" target="_blank" href="https://github.com/Sneezry/authenticator/issues/new"></a></p>
@@ -94,6 +95,25 @@
 <div id="exportButton"></div>
 </div>
 </div>
+
+<div id="resize">
+<div id="resizeClose"><i class="fa fa-times-circle"></i></div>
+<label for="resize_list" id="resize_list_label"></label>
+<select id="resize_list">
+    <option value="100" selected>100%</option>
+    <option value="90">90%</option>
+    <option value="80">80%</option>
+    <option value="67">67%</option>
+    <option value="57">57%</option>
+    <option value="50">50%</option>
+    <option value="40">40%</option>
+    <option value="33">33%</option>
+    <option value="25">25%</option>
+    <option value="20">20%</option>
+</select>
+<div id="resize_save"></div>
+</div>
+
 <div id="message">
 <div id="message_content"></div>
 <div id="message_close"></div>