JavaScript
chrome-extension

Chrome extensionで英和翻訳のサンプルを作成してみました。

javascript勉強中のものです。
Chromeエクステンションを触ったことがなかったので、基本ぐらいは知っておきたいと思い、勉強しながら作成して見ました。

注意
ちょっと勉強して、あとはググりながら作成したものですので、いろいろダメな部分もあると思いますが、間違っていましたら指摘して欲しいです。

作成したサンプル

英和翻訳したい部分を選択し、右クリックからGoogle翻訳のページをポップアップするChrome拡張です。
wOxpNeqJp3.gif


内容

フォルダ構成
/
├ background.js
├ content.js
├ icon.png
└ manifest.json
manifest.json
{
    "manifest_version":2,
    "name":"English-Japanese",
    "version":"1.0",
    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": ["content.js"]
    }],
    "background":{
        "scripts": ["background.js"]
    },
    "permissions":[
        "contextMenus"
    ],
    "icons":{
        "16":"icon.png"
    }
}
background.js
'use strict';

chrome.contextMenus.create({
    title: "English-Japanese",
    contexts: ["all"],
    type: "normal",
    onclick: function(){
        chrome.tabs.getSelected(null, function(tab) {
            chrome.tabs.sendRequest(tab.id, {}, function(response) {
                console.log(response.selectedText);
            });
        });
    }
});

content.js
'use strict';

chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) {
        const selectedText = window.getSelection().toString();
        const win = window.open(
            `https://translate.google.com/?hl=ja#en/ja/${encodeURIComponent(selectedText)}`,
            'window1',
            'width=600,height=500,scrollbars=yes'
        );

        // 親ウィンドウを閉じたら、子ウィンドウも閉じる
        window.addEventListener('unload',function(e){
            win.close();
        });

        sendResponse({selectedText:selectedText});
    }
);

if(window.opener && location.href.startsWith('https://translate.google.com/?hl=ja#en/ja/')){
    // 親ウィンドウが存在する(=子ウィンドウの)場合で、Google 翻訳(英和)のページだった場合
    const res = document.getElementById('gt-res-wrap');
    const src = document.getElementById('gt-src-wrap');
    document.body.innerHTML = '';
    document.body.appendChild(res);
    document.body.appendChild(src);
}

覚えると役に立つ場面がくると思いますので、勉強できてよかったです。
最後まで読んでいただきありがとうございました。