ver1.3.1

simple-translate/Settings.js

@@ -0,0 +1,274 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+//初回起動時にオプションページを表示して設定を初期化
+//Display option page at initial startup and initialize settings
+/*
+browser.runtime.onInstalled.addListener(function(){
+    browser.runtime.openOptionsPage();
+});
+*/
+function settingsObj() {};
+(function () {
+
+    //オプションページを書き換え，設定の初期化
+    //Rewrite option page, initialize setting
+    settingsObj.prototype.initOptionsPage = function () {
+        return new Promise(function (resolve, reject) {
+            labelSet();
+            getSettingsByHtml();
+            overRideSettingsByStorage().then(function () {
+                overRideHtml();
+                saveSettings();
+                resolve();
+            });
+        })
+    };
+    //オプションページから設定を保存
+    //Save settings from options page
+    settingsObj.prototype.saveOptionsPage = function () {
+        return new Promise(function (resolve, reject) {
+            getSettingsByHtml();
+            saveSettings().then(function () {
+                resolve();
+            });
+        })
+    };
+    //設定を初期化
+    //Initialize setting
+    settingsObj.prototype.init = function () {
+        return new Promise(function (resolve, reject) {
+            getSettings().then(function () {
+                resolve(Settings);
+            })
+        })
+    }
+    //設定を返す
+    //return settings
+    settingsObj.prototype.get = function () {
+        return Settings;
+    };
+    //受け取ったオブジェクトを保存
+    //Save the received object
+    settingsObj.prototype.save = function (settings) {
+        return new Promise(function (resolve, reject) {
+            for (let i in settings) {
+                Settings[i] = settings[i];
+            }
+            saveSettings().then(function () {
+                resolve();
+            });
+        })
+    };
+    //設定を削除
+    //Delete settings
+    settingsObj.prototype.clear = function (setting) {
+        return new Promise(function (resolve, reject) {
+            delete Settings[setting];
+            saveSettings().then(function () {
+                resolve();
+            })
+        })
+    }
+    //全ての設定を削除
+    //Delete all settings
+    settingsObj.prototype.clearAll = function () {
+        return new Promise(function (resolve, reject) {
+            Settings = new settingsObj();
+            saveSettings().then(function () {
+                resolve();
+            })
+        })
+    }
+
+    //let Settings = new settingsObj();
+    let Settings={};
+    //S = new settingsObj(); //外部から呼び出し Call from outside
+
+    //spanやoptionのid，buttonのclassに"Label"が含まれるときi18nから値を取得して書き換え
+    //When "label" is included in span and option id, button class Retrieve the value from i18n and rewrite it
+    function labelSet() {
+        
+        //span idにLableが含まれていたら
+        let spans = document.getElementsByTagName("span");
+        for (let i in spans) {
+            if (spans[i].id == undefined || spans[i].id.indexOf("Label") == -1) continue;
+            let label = browser.i18n.getMessage(spans[i].id);
+            if (label == "") continue;
+            spans[i].innerHTML = label;
+        }
+        
+        //button, submit, text classにLabelが含まれていたら
+        let inputs = document.getElementsByTagName("input");
+        for (let i in inputs) {
+            if (inputs[i].id == undefined || inputs[i].className.indexOf("Label") == -1) continue;
+            let label=browser.i18n.getMessage(inputs[i].className);
+            if(label=="")continue;
+            
+            switch (inputs[i].type) {
+                case "button":
+                case "submit":
+                    inputs[i].value = label;
+                    break;
+                case "text":
+                    inputs[i].placeholder=label;
+            }
+        }
+        
+        //options idにLabelが含まれていたら
+        let options=document.getElementsByTagName("option");
+        for(let i in options){
+            if (options[i].id == undefined || options[i].id.indexOf("Label") == -1) continue;
+            let label=browser.i18n.getMessage(options[i].id);
+            if(label=="")continue;
+            
+            options[i].innerHTML=label;
+        }
+    }
+
+    //storageからSettingsの項目を取得して存在しない物をSettingsに上書き
+    //Retrieve the Settings item from storage and overwrite Settings that do not exist
+    function overRideSettingsByStorage() {
+        return new Promise(function (resolve, reject) {
+            browser.storage.local.get("Settings", function (value) {
+                
+                for (let i in Settings) {
+                    if (value.Settings!=undefined && value.Settings[i] != undefined) {
+                        Settings[i] = value.Settings[i];
+                    }
+                }
+                for (let i in value.Settings) {
+                    if (Settings[i] == undefined) Settings[i] = value.Settings[i];
+                }
+                resolve();
+            })
+        })
+    }
+
+    //オプションページにSettingsを反映
+    //Reflect Settings on option page
+    function overRideHtml() {
+        let inputs = document.getElementsByTagName("input");
+        for (let i in inputs) {
+            if(inputs[i].id==undefined) continue;
+            if (inputs[i].className != undefined && inputs[i].className.indexOf("noSetting") != -1) continue;
+
+            switch (inputs[i].type) {
+                case "text":
+                case "number":
+                case "search":
+                case "tel":
+                case "url":
+                case "email":
+                case "password":
+                case "datetime":
+                case "month":
+                case "week":
+                case "time":
+                case "datetime-local":
+                case "range":
+                case "color":
+                    inputs[i].value = Settings[inputs[i].id];
+                    break;
+                case "checkbox":
+                    inputs[i].checked = Settings[inputs[i].id];
+                    break;
+                case "radio":
+                    if (Settings[inputs[i].name] == inputs[i].value) {
+                        inputs[i].checked = true;
+                    }
+                    break;
+            }
+        }
+        let textareas=document.getElementsByTagName("textarea");
+        for(let i in textareas){
+            if(textareas[i].id==undefined) continue;
+            if (textareas[i].className != undefined && textareas[i].className.indexOf("noSetting") != -1) continue;
+            textareas[i].value=Settings[textareas[i].id];
+        }
+        
+        let selects=document.getElementsByTagName("select");
+        for(let i in selects){
+            if(selects[i].id==undefined) continue;
+            if (selects[i].className != undefined && inputs[i].className.indexOf("noSetting") != -1) continue;
+            
+            selects[i].value=Settings[selects[i].id];
+        }
+    }
+
+    //オプションページから設定の値を取得
+    //Get setting value from option page
+    function getSettingsByHtml() {
+        let inputs = document.getElementsByTagName("input");
+
+        for (let i in inputs) {
+            if(inputs[i].id==undefined) continue;
+            if (inputs[i].className != undefined && inputs[i].className.indexOf("noSetting") != -1) continue;
+
+            switch (inputs[i].type) {
+                case "text":
+                case "number":
+                case "search":
+                case "tel":
+                case "url":
+                case "email":
+                case "password":
+                case "datetime":
+                case "month":
+                case "week":
+                case "time":
+                case "datetime-local":
+                case "range":
+                case "color":
+                    Settings[inputs[i].id] = inputs[i].value;
+                    break;
+                case "checkbox":
+                    Settings[inputs[i].id] = inputs[i].checked;
+                    break;
+                case "radio":
+                    if (inputs[i].checked == true) {
+                        Settings[inputs[i].name] = inputs[i].value;
+                    }
+                    break;
+            }
+        }
+        
+        let textareas=document.getElementsByTagName("textarea");
+        for(let i in textareas){
+            if(textareas[i].id==undefined) continue;
+            if (textareas[i].className != undefined && textareas[i].className.indexOf("noSetting") != -1) continue;
+            Settings[textareas[i].id]=textareas[i].value;
+        }
+        
+        let selects=document.getElementsByTagName("select");
+        for(let i in selects){
+            if(selects[i].id==undefined) continue;
+            if (selects[i].className != undefined && selects[i].className.indexOf("noSetting") != -1) continue;
+            
+            Settings[selects[i].id]=selects[i].value;
+        }
+    }
+    
+    //ストレージが変更されたらget
+    browser.storage.onChanged.addListener(getSettings);
+    function getSettings() {
+        return new Promise(function (resolve, reject) {
+            browser.storage.local.get("Settings", function (value) {
+                Settings = value.Settings;
+                resolve(Settings);
+            });
+        })
+    }
+
+    function saveSettings() {
+        return new Promise(function (resolve, reject) {
+            browser.storage.local.set({
+                'Settings': Settings
+            }).then(function () {
+                resolve(Settings);
+            });
+        })
+    }
+
+}());

simple-translate/_locales/en/messages.json

@@ -11,7 +11,7 @@
     "showLink":{
         "message": "Translate this page"
     },
-    "LangListLabel":{
+    "targetLangLabel":{
         "message":"Target language"
     },
     "langList":{
@@ -40,5 +40,26 @@
     },
     "translateLinkMenu":{
         "message": "Translate selected link"
+    },
+    "panelSizeLabel":{
+        "message": "Size of translation panel"
+    },
+    "buttonSizeLabel":{
+        "message": "Size of button"
+    },
+    "buttonPositionLabel":{
+        "message": "Display position of button"
+    },
+    "rightUpLabel":{
+        "message": "Upper right"
+    },
+    "rightDownLabel":{
+        "message": "Bottom right"
+    },
+    "fontSizeLabel":{
+        "message": "Font size"
+    },
+    "saveLabel":{
+        "message": "Save"
     }
 }

simple-translate/_locales/ja/messages.json

@@ -11,7 +11,7 @@
     "showLink":{
         "message": "このページを翻訳"
     },
-    "LangListLabel":{
+    "targetLangLabel":{
         "message":"翻訳先の言語"
     },
     "langList":{
@@ -40,5 +40,26 @@
     },
     "translateLinkMenu":{
         "message": "選択したリンクを翻訳"
+    },
+    "panelSizeLabel":{
+        "message": "翻訳パネルのサイズ"
+    },
+    "buttonSizeLabel":{
+        "message": "ボタンのサイズ"
+    },
+    "buttonPositionLabel":{
+        "message": "ボタンの表示位置"
+    },
+    "rightUpLabel":{
+        "message": "右上"
+    },
+    "rightDownLabel":{
+        "message": "右下"
+    },
+    "fontSizeLabel":{
+        "message": "フォントサイズ"
+    },
+    "saveLabel":{
+        "message": "保存"
     }
 }

simple-translate/background.js

@@ -1,20 +1,26 @@
-getSetting();
+/* This Source Code Form is subject to the terms of the Mozilla Public
-browser.storage.onChanged.addListener(getSetting)
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-//設定の読み出し
+//初回起動時にオプションページを表示して設定を初期化
-function getSetting() {
+browser.runtime.onInstalled.addListener(function(){
-    browser.storage.local.get(["targetLang", "ifShowButton", "ifCheckLang", "ifShowMenu"], function (value) {
+    browser.runtime.openOptionsPage();
-        if (value.targetLang == undefined) initialSetting(); //初回起動時
-        targetLang = value.targetLang;
-        ifShowButton = value.ifShowButton;
-        ifCheckLang = value.ifCheckLang;
-        ifShowMenu = value.ifShowMenu;
-        if (ifShowMenu) menuCreate();
-        else menuRemove();
 });
+
+let S = new settingsObj()
+browser.storage.onChanged.addListener(showMenu);
+
+S.init().then(function(){
+    showMenu();
+});
+function showMenu(){
+    if(S.get().ifShowMenu){
+        menuRemove();
+        menuCreate();
+    }
+    else menuRemove();
 }
 
-//設定の初期化
 function initialSetting() {
     switch (browser.i18n.getUILanguage()) { //一部の言語はブラウザの設定に合わせる
         case "ja":
@@ -22,19 +28,13 @@ function initialSetting() {
         case "zh-TW":
         case "ko":
             targetLang = browser.i18n.getUILanguage();
+            secondTargetLang="en";
             break;
         default:
             targetLang = "en";
+            secondTargetLang="ja";
             break;
                                         }
-    browser.storage.local.set({
-        'targetLang': targetLang,
-        'ifShowButton': true,
-        'ifCheckLang': true,
-        'ifShowMenu': true
-    }, function () {
-        getSetting();
-    });
 }
 
 //メニューを表示
@@ -91,7 +91,7 @@ function translateTextMenu(info, tab) {
 //ページ全体を翻訳
 function translatePageMenu(info, tab) {
     browser.tabs.create({
-        'url': "https://translate.google.co.jp/translate?hl=" + targetLang + "&sl=auto&u=" + encodeURIComponent(info.pageUrl),
+        'url': "https://translate.google.co.jp/translate?hl=" + S.get().targetLang + "&sl=auto&u=" + encodeURIComponent(info.pageUrl),
         'active': true,
         'index': tab.index + 1
     });
@@ -100,7 +100,7 @@ function translatePageMenu(info, tab) {
 //リンクを翻訳
 function translateLinkMenu(info, tab) {
     browser.tabs.create({
-        'url': "https://translate.google.co.jp/translate?hl=" + targetLang + "&sl=auto&u=" + encodeURIComponent(info.linkUrl),
+        'url': "https://translate.google.co.jp/translate?hl=" + S.get().targetLang + "&sl=auto&u=" + encodeURIComponent(info.linkUrl),
         'active': true,
         'index': tab.index + 1
     });

simple-translate/manifest.json

@@ -1,6 +1,6 @@
 {
     "manifest_version": 2,
-    "version": "1.2.1",
+    "version": "1.3.1",
     
     "name": "__MSG_extName__",
     "description": "__MSG_extDescription__",
@@ -12,7 +12,7 @@
         }
     },
     
-    "permissions": ["<all_urls>", "storage", "contextMenus"],
+    "permissions": ["<all_urls>", "storage", "contextMenus", "clipboardRead"],
     
     "options_ui": {
         "page": "options/options.html"
@@ -28,7 +28,7 @@
     },
     
     "background": {
-        "scripts": ["background.js"]
+        "scripts": ["Settings.js", "background.js"]
     },
     
     "browser_action": {
@@ -49,7 +49,7 @@
         {
             "matches": ["http://*/*", "https://*/*", "<all_urls>"],
             "css": ["simple-translate.css"],
-            "js": ["simple-translate.js"]
+            "js": ["Settings.js", "simple-translate.js"]
         }
     ]
 }

simple-translate/options/options.css

@@ -4,3 +4,23 @@ background-color: #d7d7db;
 height: 1px;
 border: none;
 }
+input[type="number"] {
+    -moz-appearance:textfield;
+    width: 50px;
+}
+#save{
+    width: auto;
+    height: 30px;
+    
+    margin-left: ;
+    margin-right: auto;
+    
+    
+    color: #111;
+    border: 1px solid #bbb;
+    border-radius: 2px;
+    background-color: #fbfbfb;
+}
+#save:hover{
+    background: #f5f5f5;
+}

simple-translate/options/options.html

@@ -12,21 +12,21 @@
         <select id="targetLang"></select></label>
     </p>
     <p>
-        <label><input type="checkbox" name="ifShowButton" value="1">
+        <label><input type="checkbox" id="ifShowButton" checked=true>
             <span id=ifShowButtonLabel>テキスト選択時にボタンを表示する</span></label>
     </p>
     <p>
-        <label><input type="checkbox" name="ifCheckLang" value="1">
+        <label><input type="checkbox" id=ifCheckLang checked=true>
             <span id=ifCheckLangLabel>選択したテキストが翻訳先言語と同じ時はボタンを表示しない</span></label>
     </p>
     <p>
-        <label><input type="checkbox" name="ifShowMenu" value="1">
+        <label><input type="checkbox" id=ifShowMenu checked=true>
             <span id=ifShowMenuLabel>コンテキストメニューを表示する</span></label>
     </p>
     
     <hr>
     <p>
-        <label><input type="checkbox" name="ifChangeSecondLang" value="1">
+        <label><input type="checkbox" id=ifChangeSecondLang>
             <span id=ifChangeSecondLangLabel>ツールバー翻訳パネルの入力テキストが翻訳先言語と同じ場合は第2言語に切り替える</span></label>
     </p>
     
@@ -35,7 +35,43 @@
             <select id="secondTargetLang"></select></label>
     </p>
     
+    <hr>
+    <p>
+    <span id=panelSizeLabel>翻訳パネルのサイズ</span>
+    <label><span>W</span>
+        <input id=width type=number value=300 min=1 placeholder=300>
+    </label>
+    <label><span>H</span>
+        <input id=height type=number value=200 min=1 placeholder=200>
+    </label>
+    </p>
     
+    <p>
+    <label><span id=buttonSizeLabel>ボタンのサイズ</span>
+        <input id=buttonSize type=number value=22 min=1 placeholder=22>
+    </label>
+    </p>
+    
+    <p>
+    <span id=buttonPositionLabel>ボタンの表示位置</span>
+    <label>
+        <input type=radio name=buttonPosition value=rightUp><span id=rightUpLabel>右上</span>
+    </label>
+    <label>
+        <input type=radio name=buttonPosition value=rightDown checked><span id=rightDownLabel>右下</span>
+    </label>
+    </p>
+    
+    <p>
+    <label><span id=fontSizeLabel>フォントサイズ</span>
+        <input id=fontSize type=number value=13 min=1 placeholder=13>
+    </label>
+    </p>
+    
+    <hr>
+    <input type=button id=save value=save class=saveLabel>
+    
+    <script type="text/javascript" src="../Settings.js"></script>
     <script type="text/javascript" src="options.js"></script>
 </body>
 

simple-translate/options/options.js

@@ -1,44 +1,17 @@
-var targetLang = document.getElementById("targetLang");
+/* This Source Code Form is subject to the terms of the Mozilla Public
-var ifShowButton = document.getElementsByName("ifShowButton").item(0);
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
-var ifCheckLang = document.getElementsByName("ifCheckLang").item(0);
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-var ifShowMenu = document.getElementsByName("ifShowMenu").item(0);
+
-var ifChangeSecondLang = document.getElementsByName("ifChangeSecondLang").item(0);
+let S = new settingsObj()
-var secondTargetLang = document.getElementById("secondTargetLang");
+let targetLang = document.getElementById("targetLang");
+let secondTargetLang = document.getElementById("secondTargetLang");
 
 targetLang.innerHTML=browser.i18n.getMessage("langList");
 secondTargetLang.innerHTML=browser.i18n.getMessage("langList");
 
-document.getElementById("targetLangLabel").innerHTML=browser.i18n.getMessage("langListLabel");
+S.initOptionsPage().then(function(){
-document.getElementById("ifShowButtonLabel").innerHTML=browser.i18n.getMessage("ifShowButtonLabel");
+    document.getElementById("save").addEventListener('click', function(){
-document.getElementById("ifCheckLangLabel").innerHTML=browser.i18n.getMessage("ifCheckLangLabel");
+        S.saveOptionsPage();
-document.getElementById("ifShowMenuLabel").innerHTML=browser.i18n.getMessage("ifShowMenuLabel");
-document.getElementById("ifChangeSecondLangLabel").innerHTML=browser.i18n.getMessage("ifChangeSecondLangLabel");
-document.getElementById("secondTargetLangLabel").innerHTML=browser.i18n.getMessage("secondTargetLangLabel");
-
-//設定を読み込んで反映
-browser.storage.local.get(["targetLang", "ifShowButton", "ifCheckLang", "ifShowMenu", "ifChangeSecondLang", "secondTargetLang"], function (value) {
-    targetLang.value = value.targetLang;
-    ifShowButton.checked=value.ifShowButton;
-    ifCheckLang.checked=value.ifCheckLang;
-    ifShowMenu.checked=value.ifShowMenu;
-    ifChangeSecondLang.checked=value.ifChangeSecondLang;
-    secondTargetLang.value=value.secondTargetLang;
     });
+})
 
-function save() {
-    browser.storage.local.set({
-        'targetLang': targetLang.value,
-        'ifShowButton': ifShowButton.checked,
-        'ifCheckLang': ifCheckLang.checked,
-        'ifShowMenu': ifShowMenu.checked,
-        'ifChangeSecondLang': ifChangeSecondLang.checked,
-        'secondTargetLang': secondTargetLang.value
-    }, function () {});
-}
-
-targetLang.addEventListener("change", save);
-ifShowButton.addEventListener("change", save);
-ifCheckLang.addEventListener("change", save);
-ifShowMenu.addEventListener("change", save);
-ifChangeSecondLang.addEventListener("change", save);
-secondTargetLang.addEventListener("change", save);

simple-translate/popup/popup.css

@@ -1,5 +1,5 @@
 body {
-    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo', 'メイリオ', 'Osaka', 'MS PGothic', 'arial', 'helvetica', 'sans-serif';
+    font-family: 'Sugoe UI','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo', 'メイリオ', 'Osaka', 'MS PGothic', 'arial', 'helvetica', 'sans-serif';
     text-align: left;
     font-size: 13px;
     height: auto;
@@ -20,9 +20,8 @@ hr {
 p {}
 
 textarea {
-    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo', 'メイリオ', 'Osaka', 'MS PGothic', 'arial', 'helvetica', 'sans-serif';
+    font: inherit;
     text-align: left;
-    font-size: 13px;
     resize: none;
     overflow: auto;
     max-height: 250px;
@@ -42,6 +41,7 @@ textarea {
 
 #target {
     max-height: 250px;
+    min-height: 20px;
     overflow-y: auto;
     word-wrap: break-word;
 }
@@ -51,9 +51,8 @@ textarea {
 }
 
 #langList {
-    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo', 'メイリオ', 'Osaka', 'MS PGothic', 'arial', 'helvetica', 'sans-serif';
+    font: inherit;
     text-align: left;
-    font-size: 13px;
     float: right;
     margin-bottom: 20px;
     max-width: 140px;

simple-translate/popup/popup.html

@@ -10,7 +10,7 @@
 <body>
     <div id=main>
     <form>
-        <textarea id=textarea spellcheck=false></textarea>
+        <textarea id=textarea spellcheck=false contenteditable=true></textarea>
     </form>
     <hr>
     <div id=target>
@@ -20,6 +20,7 @@
     <select id="langList"></select>
     <div id=link></div>
 
+    <script src="../Settings.js"></script>
     <script src="popup.js"></script>
 </body>
 

simple-translate/popup/popup.js

@@ -1,10 +1,27 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+let S=new settingsObj();
+//設定を読み出し
+S.init().then(function(value){
+    defaultTargetLang = value.targetLang;
+    targetLang = value.targetLang;
+    secondTargetLang = value.secondTargetLang;
+    ifChangeSecondLang=value.ifChangeSecondLang;
+    langList.value = targetLang; //リスト初期値をセット
+    langList.addEventListener("change", changeLang);
+    
+    document.body.style.fontSize=value.fontSize;
+})
+
 let target = document.getElementById("target");
 let langList = document.getElementById("langList");
 let textarea = document.getElementById("textarea");
 
-const initialText = browser.i18n.getMessage("initialTextArea");
 langList.innerHTML = browser.i18n.getMessage("langList");
-textarea.innerText = initialText;
+const initialText = browser.i18n.getMessage("initialTextArea");
+textarea.placeholder= initialText;
 
 let targetLang;
 let secondTargetLang;
@@ -12,19 +29,11 @@ let defaultTargetLang;
 let ifChangeSecondLang;
 let sourceWord = "";
 
-browser.storage.onChanged.addListener(getTargetLang);
+/*
-getTargetLang(); //翻訳先言語初期化
+//Firefoxの仕様上popup.htmlでfocusが効かないため使えない
-//設定を読み出し
+textarea.focus();
-function getTargetLang() {
+document.execCommand("paste");
-    browser.storage.local.get(["targetLang", "secondTargetLang","ifChangeSecondLang"], function (value) {
+*/
-        defaultTargetLang = value.targetLang;
-        targetLang = value.targetLang;
-        secondTargetLang = value.secondTargetLang;
-        ifChangeSecondLang=value.ifChangeSecondLang;
-        langList.value = targetLang; //リスト初期値をセット
-        langList.addEventListener("change", changeLang);
-    });
-}
 
 //翻訳先言語変更時に更新
 function changeLang() {
@@ -73,7 +82,16 @@ function refleshSource() {
     }
 }
 
+textarea.addEventListener("paste", resize)
+
 textarea.addEventListener("keydown", resize);
+
+textarea.addEventListener("keyup", function (event) {
+    //if (event.keyCode == 13) resize();
+    resize();
+    inputText();
+});
+
 //テキストボックスをリサイズ
 function resize() {
     setTimeout(function () {
@@ -87,17 +105,9 @@ textarea.addEventListener("click", textAreaClick, {
 });
 //テキストエリアクリック時の処理
 function textAreaClick() {
-    if (textarea.value == initialText) {
-        textarea.value = "";
-    } else {
     textarea.select();
 }
-}
 
-textarea.addEventListener("keyup", function (event) {
-    if (event.keyCode == 13) resize();
-    inputText();
-});
 //文字入力時の処理
 function inputText() {
     sourceWord = textarea.value;

simple-translate/simple-translate.css

@@ -2,8 +2,9 @@
     all: initial;
     background-color: #fff;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
-    border-radius: 3px;
+    border-radius: 10%;
-    background-image: url("icons/16.png");
+    background-image: url("icons/512.png");
+    background-size:75%;
     background-repeat: no-repeat;
     background-position: center;
     height: 22px;
@@ -21,7 +22,6 @@
 #simple-translate-panel {
     all: initial;
     background-color: #fff;
-    /*opacity: 0;*/
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
     border-radius: 3px;
     min-height: 20px;
@@ -30,7 +30,6 @@
     height: auto;
     min-width: 10px;
     max-width: 300px;
-    width:300px;/*消すかも*/
     position: fixed;
     padding: 10px 18px;
     z-index: 2147483646;
@@ -42,14 +41,11 @@
 
 #simple-translate-panel p {
     all: initial;
-    font-size: 13px;
+    font-family: 'Sugoe UI','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo', 'メイリオ', 'Osaka', 'MS PGothic', 'arial', 'helvetica', 'sans-serif' !important;
-    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
     text-align: left;
     display: inline-block;
     margin: 0;
     word-wrap: break-word;
-    transition-duration: 200ms;
-    animation-name: simple-translate-fadein;
 }
 
 #simple-translate-panel p::-moz-selection {

simple-translate/simple-translate.js

@@ -1,26 +1,15 @@
-document.body.insertAdjacentHTML("beforeend", "<div id='simple-translate-button'></div><div id='simple-translate-panel'><p>...</p></div><div id='simple-translate-popup'></div>"); //body末尾にボタン配置
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+document.body.insertAdjacentHTML("beforeend", "<div id='simple-translate-button'></div><div id='simple-translate-panel'><p>...</p></div>"); //body末尾にボタン配置
 var button = document.getElementById("simple-translate-button");
 var panel = document.getElementById("simple-translate-panel");
-var popup = document.getElementById("simple-translate-popup");
 var selectionWord;
 var clickPosition;
 
-var targetLang;
+let S=new settingsObj();
-var ifShowButton;
+S.init();
-var ifCheckLang;
-
-
-getSetting();
-browser.storage.onChanged.addListener(getSetting);
-//設定を読み出し
-function getSetting() {
-    browser.storage.local.get(["targetLang", "ifShowButton", "ifCheckLang"], function (value) {
-        targetLang = value.targetLang;
-        ifShowButton = value.ifShowButton;
-        ifCheckLang = value.ifCheckLang;
-    });
-}
-
 window.addEventListener("mouseup", Select, false);
 //テキスト選択時の処理 ダブルクリックした時2回処理が走るのを何とかしたい
 function Select(e) {
@@ -29,7 +18,7 @@ function Select(e) {
         selectionWord = String(window.getSelection());
         if ((selectionWord.length !== 0) && (e.button == 0) && (e.target.id !== "simple-translate-panel") && (e.target.parentElement.id !== "simple-translate-panel")) { //選択範囲が存在かつ左クリックかつパネル以外のとき
             clickPosition=e;
-            if (ifShowButton) {//ボタンを表示
+            if (S.get().ifShowButton) {//ボタンを表示
                 checkLang().then(function (results) {
                     if (results) popupButton(e);
                 });
@@ -41,12 +30,12 @@ function Select(e) {
 //選択テキストの言語をチェックして返す
 function checkLang() {
     return new Promise(function (resolve, reject) {
-        if(ifCheckLang){ //設定がオンなら
+        if(S.get().ifCheckLang){ //設定がオンなら
             getRequest(selectionWord.substr(0, 100)) //先頭100文字を抽出して言語を取得
                 .then(function (results) {
                     let lang = results.response[2];
                     let percentage = results.response[6];
-                    resolve(lang != targetLang && percentage > 0); //真偽値を返す
+                    resolve(lang != S.get().targetLang && percentage > 0); //真偽値を返す
                 });
         }else { //設定がオフならtrueを返す
             resolve(true);
@@ -56,12 +45,18 @@ function checkLang() {
 
 //ボタンを表示
 function popupButton(e) {
-    if (ifShowButton) {
+    let position;
+    let buttonSize=S.get().buttonSize;
+    
+    if(S.get().buttonPosition=="rightUp") position=(-1*buttonSize)-10;
+    else if(S.get().buttonPosition=="rightDown") position=10;
+    
     button.style.left = e.clientX + 10 + 'px';
-        button.style.top = e.clientY + 5 + 'px';
+    button.style.top = e.clientY + position + 'px';
+    button.style.width=S.get().buttonSize+"px";
+    button.style.height=S.get().buttonSize+"px";
     button.style.display = 'block';
 }
-}
 button.addEventListener("click", function (e) {
     translate();
     showPanel(e);
@@ -85,7 +80,7 @@ function getRequest(word) {
     return new Promise(function (resolve, reject) {
         let xhr = new XMLHttpRequest();
         xhr.responseType = 'json';
-        let url = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=" + targetLang + "&dt=t&q=" + encodeURIComponent(word);
+        let url = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=" + S.get().targetLang + "&dt=t&q=" + encodeURIComponent(word);
         xhr.open("GET", url);
         xhr.send();
         xhr.onload = function () {
@@ -129,7 +124,7 @@ function hidePanel(e) {
 //パネルがウィンドウ外にはみ出る時に位置を調整
 function panelPosition(e) {
     var p = new Object();
-    panel.style.width = '300px';
+    panel.style.width = S.get().width+'px';//300px
     var panelHeight = panel.clientHeight;
     var panelWidth = parseInt(window.getComputedStyle(panel.getElementsByTagName("p")[0], null).width);
     //一旦パネルの横幅を300にしてpの横幅を取得
@@ -137,16 +132,20 @@ function panelPosition(e) {
     if (e.clientX + panelWidth > window.innerWidth - 80) {
         p.x = window.innerWidth - panelWidth - 80;
     } else {
-        p.x = e.clientX + 10;
+        p.x = e.clientX;
     }
     if (e.clientY + panelHeight > window.innerHeight - 30) {
         p.y = window.innerHeight - panelHeight - 30;
     } else {
-        p.y = e.clientY + 10;
+        p.y = e.clientY;
     }
     panel.style.width = 'auto'; //panelWidth + 'px';
     panel.style.top = p.y + 'px';
     panel.style.left = p.x + 'px';
+    
+    panel.style.maxWidth=S.get().width+"px";
+    panel.style.maxHeight=S.get().height+"px";
+    panel.getElementsByTagName("p")[0].style.fontSize=S.get().fontSize+"px";
 }