Coder Social home page Coder Social logo

ryo-fujinone / chromium-translation-toggler Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 59 KB

A Chrome extension that toggles the translation of pages using native apps.

License: MIT License

JavaScript 55.98% CSS 4.29% HTML 17.08% Batchfile 1.01% Python 21.63%
chrome-extension

chromium-translation-toggler's Introduction

Chromium Translation Toggler

Chromium ベースのブラウザの翻訳の切り替え(トグル)を行う拡張機能とネイティブアプリ (.bat + Python スクリプト) のセットです。拡張機能はネイティブメッセージングでネイティブアプリを実行し、ネイティブアプリはブラウザのコンテキストメニューを表示させて T+Enter を入力し翻訳を切り替えます。この拡張機能を実行するための JavaScript のコードを他の拡張機能から実行するという運用を想定しています。

動作環境

  • 拡張機能

    • Chromium ベースのブラウザ
  • ネイティブアプリ

    • Windows
    • Python3

インストール (拡張機能)

  1. 拡張機能のページで「デベロッパーモード」を有効にする。
  2. 「パッケージ化されていない拡張機能を読み込む」から拡張機能のフォルダを選択してインストールする。

インストールが完了するとオプションページが開きます。
通常は変更する必要はありません。

インストール (ネイティブアプリ)

install_host.bat を実行してください。レジストリに translation_toggler.json のパスが登録されます。
また、pip で以下をインストールしてください。

pip install pygetwindow pywinauto

実行方法

ユーザー独自の JavaScript のコードの実行をサポートした拡張機能等で以下のコードを実行してください。

const elem = document.querySelector("#chromium-translation-toggle-trigger");
elem.dataset.trigger = true;

トリガー要素の ID を変更する必要がある場合はオプションページから変更が可能です。

右クリックが禁止されているサイトで使用する場合、上記コードに合わせて以下のコードを実行してください。

document.addEventListener("contextmenu", (e)=> {e.stopPropagation()}, true);

動作

デフォルトでは Shift+F10 を入力させてコンテキストメニューを表示させます。フルスクリーン表示かつ DevTools を上下左右で開いている場合に限り、F12 で DevTools を閉じ翻訳をトグルした後で F12 で DevTools を開くという実装にしています。

Shift+F10 がうまく機能しない場合や都合が悪い場合は直近のマウスカーソルの位置で右クリックさせてコンテキストメニューを開くモードに変更可能です。そちらのモードではバー (タブバー、アドレスバー、ブックマークバー) の高さの情報が必要であるため、オプションページで取得/設定出来るようにしています。毎回自動で高さを取得するオプションもありますが、そちらは開いているページによっては翻訳のトグルに時間が掛かる場合があります。バーの高さの情報を使用せず pywinauto でページ部分のコントロール(ウィンドウの構成要素)を取得する実装にすることも可能でしたが、開いているページによっては極端に時間が掛かることがあったため、そちらは採用しませんでした。

何らかの理由で任意の位置を右クリックさせたい場合は以下のように data-x と data-y に座標を設定してください。

elem.dataset.x = 300;
elem.dataset.y = 400;

Edge の場合に限り、Edge モードを使用してください。Edge は他の Chromium ベースのブラウザとは挙動が異なるため、専用のモードを用意する必要がありました。Edge モードの挙動は 4 通りあり、各ページ上において初回の実行では翻訳は必ず即終了します。各ページ上において 2 回目以降の実行では後述の data-translated に true/false を設定しない場合、翻訳メニュー上のコントロールを取得するという実装にしており、2 ~ 3 秒程度掛かる場合があります。data-translated が false の場合、翻訳メニューを開いて Enter を入力するという実装にしています。true の場合、翻訳メニューを開いて右に移動してから Enter を入力するという実装にしています。data-translated が設定されている場合は即終了します。Edge の場合はなるべく data-translated を設定して実行するようにしてください。Edge モード以外では data-translated の値は使用されないので、Edge 以外のブラウザでは data-translated を設定する必要はありません。

elem.dataset.translated = false;
或いは
elem.dataset.translated = true;

Credits

chromium-translation-toggler's People

Contributors

ryo-fujinone avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.