選択した英単語を日本語に変換するChrome Extension

a-screenshot.png

content_script.css

.efc-popup {
    position: absolute;
    border-radius: 7px;
    background: #fae797;
    min-width: 150px;
    padding: 5px;
    z-index: 1000;
}

.efc-popup-text {
    background: #fff;
    color: #000;
    padding: 5px;
    font-size: 11px;
}

.efc-popup .efc-popup-error-message {
    color: #d33626;
}

content_script.js

const TRANSLATE_URL = 'http://unuuu.com/dev/eijiro.php?eigo=';
const CANNOT_TRANLATE_TEXT = '選択された単語は翻訳できせんでした';

// 翻訳のポップアップを表示する位置
var displayPosition = {
    top:    '0px',
    right:  '0px',
    bottom: '0px',
    left:   '0px'
};

function CheckPressKey(keyCode) {
    this.checkKeyCode = keyCode;
    this.isPress = false;
}

CheckPressKey.prototype.addListenKeyDownAndKeyUp = function() {
    var thisObject = this;
    document.addEventListener('keydown', function(event) {
        if (event.keyCode === thisObject.checkKeyCode) {
            thisObject.isPress = true;
            // console.log("Check Press Key Down / isPress:" + thisObject.isPress);
        }
    });
    document.addEventListener('keyup', function(event) {
        if (event.keyCode === thisObject.checkKeyCode && thisObject.isPress === true) {
            thisObject.isPress = false;
            // console.log("Check Press Key Up / isPress:" + thisObject.isPress);
        }
    });        
};

function cleanUpTextForDisplay(text) {
    var cleanUpText = text;
    if (cleanUpText !== null && cleanUpText.length > 0) {
        cleanUpText = cleanUpText.replace(/\\n/g, '、');
    } else {
        // 翻訳されなければ空文字にする
        cleanUpText = '';
    }
    return cleanUpText;
}

function removePopUp() {
    var popUpDiv = document.querySelector('.efc-popup');
    // console.log('removePopUp / popUpDiv: ' + popUpDiv);
    // 既に翻訳が表示されている場合は削除
    if (popUpDiv !== null) {
        popUpDiv.parentNode.removeChild(popUpDiv);
    }    
}

function displayPopUpForText(text) {
    removePopUp();
    var popUpDiv = document.createElement('div');
    popUpDiv.classList.add('efc-popup');
    var popUpInnerDiv = document.createElement('div');
    popUpDiv.appendChild(popUpInnerDiv);
    popUpInnerDiv.classList.add('efc-popup-text');
    if (text.length === 0) {
        popUpInnerDiv.classList.add('efc-popup-error-message');
        text = CANNOT_TRANLATE_TEXT;
    }
    popUpInnerDiv.innerHTML = text;

    // ポップアップを表示する
    document.body.appendChild(popUpDiv);
    popUpDiv.style.left = displayPosition.left;
    popUpDiv.style.top  = displayPosition.top;
}

function displayTranslateWord(translateWord) {
    // console.log('displayTranslateWord / word: ' + translateWord);  
    var displayWord = cleanUpTextForDisplay(translateWord);
    // console.log('displayTranslateWord / displayWord: ' + displayWord);    
    displayPopUpForText(displayWord);
}

function errorTranslate(errorText) {
    console.log('Error: ' + errorText);
}

function searchWord(word, successCallback, errorCallback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', TRANSLATE_URL + word, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        var responseText = xhr.responseText;
        if (xhr.status === 200) {
            if (typeof(successCallback) !== 'undefined') {
                successCallback(responseText);
            }
        } else {
            if (typeof(errorCallback) !== 'undefined') {
                errorCallback(responseText);
            }
        }
      }
    };
    xhr.send(null);    
}

CheckPressKey.prototype.mouseDownCallback = removePopUp;

CheckPressKey.prototype.mouseUpCallback = function() {
    var selectedString = window.getSelection().toString();
    // キーが押されていて文字が選択されている時
    if (this.isPress && selectedString.length > 0) {
        // console.log('Mouse Up Callback / selectedString: ' + selectedString);        
        searchWord(selectedString, displayTranslateWord, errorTranslate);
    }
};

CheckPressKey.prototype.addListenMouseDownAndMouseUp = function() {
    var thisObject = this;
    document.addEventListener('mousedown', function(event) {
        if (typeof(thisObject.mouseDownCallback) !== 'undefined') {
            thisObject.mouseDownCallback();
        }
        // console.log("Mouse Down / callback:" + thisObject.mouseDownCallback);
    });
    document.addEventListener('mouseup', function(event) {
        displayPosition.top = (document.body.scrollTop + event.y - 50) + 'px';
        displayPosition.left = event.x + 'px';
        
        if (typeof(thisObject.mouseUpCallback) !== 'undefined') {
            thisObject.mouseUpCallback();
        }
        // console.log("Mouse Up / callback:" + thisObject.mouseUpCallback);
    });            
};

(function() {
    // altキー(keyCode:18)が押されているかを検知する
    var checkPressKey = new CheckPressKey(18);
    checkPressKey.addListenKeyDownAndKeyUp();
    checkPressKey.addListenMouseDownAndMouseUp();

    // console.log('start eijiro for chrome');
}).call(this);

manifest.json

{
    "name": "Eijiro for Chrome",
    "version": "0.0.1",
    "manifest_version": 2,
    "description": "Eijiro for Chrome",
    "content_scripts": [
        {
            "matches": ["http://*/*", "https://*/*"],
            "css": ["content_script.css"],
            "js": ["content_script.js"]
        }
    ]
}