Chrome拡張でGoogleのサイト翻訳の原文と翻訳を同時表示したい(失敗)

Chrome chrome-extension google translation JavaScript

経緯

Googleのサイトの翻訳で原文と翻訳後の文章を同時表示すれば、英語学習とか原文を確認する手間が省けるのでは思い、Chromeの拡張機能を作ってみて同時表示を試してみたが、翻訳後の文章はiframeを使用していたため、cross-originに引っかかり結果失敗。

手法

Google翻訳では要素の文章の前に、.google-src-textという原文の要素が挿入されるので、このクラスを削除して、改行を追加すればいけるのではと考えた。

<span class="google-src-text" style="direction: ltr; text-align: left">Services</span>
サービス

<span style="direction: ltr; text-align: left">Services<br></span>
サービス

実装

以下3つのファイルを一つのディレクトリにまとめる。

• manifest.json(Chrome拡張の設定)
• jquery-1.12.3.min.js(manifest.jsonに記述したバージョン)
• script.js(メイン)
  

{
  "name": "ShowOriginalTextOnGoogleTranslate",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "",
  "permissions":[],
  "content_scripts": [
    {
      "matches": ["https://translate.google.com/translate*"],
      "js": ["jquery-1.12.3.min.js","script.js"],
      "run_at": "document_start"
    }
  ]
}

console.log('Show Original Text On Google Translate');

$(function () {
    _$anno1 = $('#anno1');
    _$anno2 = $('#anno2');

    //同時表示ボタン
    $anno3 = _$anno1.clone().attr('id', 'anno3').text('原文と翻訳').css('border-left', 'none');
    _$anno2.before($anno3);

    //ここから下で失敗
    $anno3.on('click', function(){
        var $iframe = $('#contentframe>iframe').contents();

        $iframe.find('.google-src-text').each(function(v){
            $(v).removeClass('google-src-text').append('<br />');
        });
    });
});

ディレクトリごとChrome拡張機能の設定にて読み込む。

結果

iframeのせいで、結局cross-originで失敗。

Chrome拡張でframeを突破する方法があればなあ。